Dans ce tutoriel, nous allons voir comment envoyer un e-mail automatique à un visiteur qui remplit un formulaire d'inscription présent sur notre site web construit sur Framework360.
Étape 1 : Créons notre formulaire
Commençons par créer le formulaire de contact sur lequel, dans les prochaines étapes, nous mettrons en œuvre l’action d’envoi automatique de l’e-mail. Le formulaire de contact, également connu sous le nom de module de contact, est un module dans lequel les visiteurs du site web saisissent leurs données telles que, par exemple, nom, prénom, e-mail ou numéro de téléphone.
Avant de commencer, je précise que dans ce tutoriel nous verrons les étapes indispensables pour la création d'un formulaire de contact. Si vous souhaitez découvrir en profondeur toutes les fonctionnalités du module “Form” de Framework360, nous vous invitons à consulter le tutoriel dédié en cliquant ici.
C'est parti ! La première chose que vous devez faire, comme montré dans la figure ci-dessous, est d'aller dans le menu situé à gauche de l'écran, où vous trouverez l'option “Contenus” à l'intérieur de laquelle se trouvera l'option “Form”, cliquons sur “ Form”.
Une fois que vous êtes dans l'écran principal du formulaire, vous devrez cliquer sur le bouton “Ajouter” qui se trouve en haut à droite pour créer un nouveau formulaire.
L'écran de création du formulaire est divisé en 3 onglets (comme montré sur la figure) :
- Général
- Actions
- Événements
Dans ce tutoriel, nous allons analyser uniquement les deux premiers onglets, à savoir “Générales” et “Actions”. (Je te rappelle que si tu veux en savoir plus sur les informations relatives au module “Formulaire” de Framework360, tu peux consulter le guide dédié en cliquant ici).
Que pouvons-nous faire dans l'onglet “Générales”?
Dans l'onglet “Générales”, la première chose que nous pouvons faire est donnons un nom à notre formulaire, n'oublie pas de vérifier qu'il y a une coche sur “actif” comme montré dans la figure ci-dessous.
En parcourant la page, nous allons définir les “Champs visibles”.
Les “Champs visibles” représentent les champs où le visiteur devra saisir les données que vous souhaitez demander.
Comprenons ensemble les étapes que vous devrez suivre pour créer vos champs en prenant comme exemple la création du champ “Nom”, où le visiteur devra entrer son nom.
Tout d'abord, nous allons ajouter le nom du champ, dans notre exemple ce sera “Nom”. Ensuite, nous allons définir le type de champ, le type de champ sera “input”. Enfin, nous allons définir dans la section “Type d'Input” ce qui sera l’input dont nous avons besoin, dans notre exemple le type d'input sera “text” car notre visiteur devra taper son nom.
Dans l'image ci-dessous, je vous montre à quoi ressemblera la page une fois ces trois premiers paramètres simples définis :
À ce stade, pour compléter la configuration de notre champ, nous pourrions insérer d'autres paramètres comme le “Placeholder”, c'est-à-dire, le texte qui apparaît en transparence où votre visiteur devra ajouter son nom, ou nous pourrons ajouter l’obligation du champ.
Une fois tous les paramètres qui nous intéressent insérés, nous cliquerons sur la voix à droite “Ajouter un champ”.
Bien, maintenant procédez de manière analogue pour tous les champs qui vous intéressent, comme Nom de famille, Mail, Numéro de téléphone, etc. Pour les besoins de ce tutoriel, il sera nécessaire d'insérer le champ “Mail” car connaître l’adresse mail du client sera indispensable pour générer l'email de réponse automatique.
Que pouvons-nous faire dans l'onglet “Actions”?
À ce stade, déplaçons-nous dans l'onglet “Actions”. À l'intérieur de ce dernier, le système nous donnera la possibilité de sélectionner différentes fonctions :
- Enregistrer Client
- Recevoir demande
- S'inscrire à des listes de newsletters
- Affecter une étiquette
- Envoyer une réponse automatique
En activant la fonction “Enregistrer Client”, comme indiqué dans l'image ci-dessus, vous aurez la possibilité d'enregistrer les données fournies par le visiteur dans la liste des clients.
En cliquant sur “Enregistrer Client”, vous n'aurez qu'à créer une correspondance entre les champs créés précédemment dans l'onglet “Général” et les données demandées dans cette section ; pour être plus clair, prenons un exemple : le logiciel dans cette zone vous demandera d'où obtenir le nom du visiteur et à travers un menu déroulant, où se trouvent les champs précédemment créés, vous devrez sélectionner le champ “Nom”.
En activant la fonction “Recevoir demande”, en revanche, le système nous enverra un email automatique avec les données laissées par le visiteur.
La configuration de cette action se fait de manière analogue à la précédente, c'est-à-dire que vous devrez créer une correspondance entre les champs réalisés précédemment dans l'onglet “Généraux” et les données requises dans cette section.
La seule spécification qu'il est opportun de faire concerne le champ "Corps de la Demande". Ce dernier devra être associé au champ "Message" du formulaire, si ce champ a été créé dans l'onglet précédent.
Étape 2 : Créons notre action d'envoi automatique de mail à notre visiteur
Bien en restant toujours dans l'onglet “Actions” présent dans l'écran de création du formulaire, nous devons activer la fonction “Envoyer une réponse automatique”. Cette action nous permettra d'envoyer un mail automatique au visiteur qui a rempli le formulaire de contact.
En cliquant sur le bouton “Activer”, la section “Paramètres d'envoi de réponse automatique” s'ouvrira en bas, toujours dans l'onglet “Actions”, comme montré dans la figure suivante :
Dans cette section, vous devrez :
- Créer une correspondance, de manière similaire à ce qui a été vu pour les actions “Enregistrer client” et “Recevoir demande” à la fin de l'étape 1, entre les champs réalisés dans l'onglet “Généraux” avec les données requises dans cette section. Plus précisément, dans cette section, les seuls champs à synchroniser sont uniquement les champs “Nom du destinataire” et “ Email Destinataire”, respectivement avec les champs du formulaire “Nom” et “Email”.
- Insérer l’objet de l'e-mail de réponse dans le champ “Objet”.
- Insérer une éventuelle adresse à laquelle le destinataire pourra nous répondre, si vous souhaitez qu'elle soit différente de celle avec laquelle nous envoyons l'e-mail, dans le champ “Adresse Replay-To”.
- Insérer le nom qui doit apparaître comme expéditeur dans l'e-mail, si vous voulez qu'il soit différent de celui défini par défaut, dans le champ “Nom Expéditeur”.
L’adresse e-mail avec laquelle nous envoyons l'e-mail et le nom par défaut de l'expéditeur peuvent être vérifiés en allant dans la section “Configuration” du menu principal de Framework360.
Maintenant, sous la rubrique “Gestion des emails” (mise en évidence dans l’image suivante), vous pouvez créer le corps de l'email, via le constructeur visuel de Framework360, en cliquant sur le bouton bleu “Ajouter une ligne”.
Enfin, dans la rubrique “PJ Email”, vous pouvez ajouter d'éventuelles pièces jointes à l'email.
Étape 3 : Ajoutons le formulaire créé dans le menu principal de notre site web
Une fois le module créé, tu devras l'insérer dans la page où tu souhaites qu'il apparaisse. Pour ce faire, tu dois aller sur :
Contenus > Pages
À ce stade, la liste des pages présentes sur le site apparaîtra, en cliquant sur le bouton vert en haut à droite “Ajouter” nous allons créer une nouvelle page.
Une fois que tu seras dans l'écran de création de la page, tu devras ajouter un contenu et sélectionner le formulaire que tu as créé précédemment, en suivant les étapes suivantes :
- Clique sur “Ajouter Ligne”
- Cliquez sur “Ajouter du contenu”
- Maintenant, cliquez sur “Formulaire”
- Sélectionnez le formulaire que vous avez précédemment créé
Après avoir créé la page contenant notre formulaire . Pour ce faire, clique sur l’élément “Menu” que tu trouveras dans la barre latérale à gauche sous l’élément “Site Web”, comme le montre la figure suivante :
Une fois dans la page de modification du menu principal du site web, déplace la page “Contacts”, c’est-à-dire, la page que tu viens de créer, depuis la colonne “ Pages” dans la colonne “Ordre Menù”, comme montré dans la figure suivante :
Ainsi, la page contenant le forum sera affichée dans le menu principal du site web.
