Le module formulaire de contact du Divi Visual Builder
Vous souhaitez créer un formulaire de contact WordPress sympa ? Je vous présente dans ce tutoriel le module formulaire de contact du Divi Visual Builder de la société Elegant Themes. Grâce au thème Divi et à son constructeur de page, désignez votre site web WordPress comme un pro !
Insertion du module
Insérer un rangée, la fenêtre des modules s’ouvre puis appeler le module « Formulaire de contact ».
Ajout et paramétrage du Contenu général
Dans l’onglet « Contenu » des paramètres généraux du module vous avez tout d’abord en haut de fenêtre, les différents champs insérés.
Texte :
Vous pouvez dans cette partie, donner un titre au formulaire, écrire un message de succès d’envoi et modifier le texte du bouton d’envoi du formulaire.
Email :
A cet endroit vous pouvez renseigner l’email du destinataire du formulaire. S’il y a plusieurs destinataires, il faudra séparer les adresses email par des virgules.
Si vous ne renseignez pas d’adresse email, le formulaire sera envoyé à l’adresse email déclarée dans votre interface administrateur WordPress.
Vous pouvez également personnaliser le message reçu en écrivant un texte avec des variables, reprenant les id des champs. Vous pourriez par exemple choisir décrire : « La personne qui envoie le formulaire s’appelle %%Name%% et son adresse email est %%Email%% etc. «
Rediriger :
Vous pouvez ici activer la redirection vers une adresse URL. L’expéditeur sera donc redirigé vers une page de votre choix une fois qu’il aura cliqué sur le bouton « Envoi »
Spam protection :
Vous avez ici le choix entre activer un Captcha basique ou un captcha plus évolué qui fait appel à un service de protection anti-spam.
On peut définir un captcha en disant que c’est un programme qui protège les sites internet contre les robots en générant des questions auxquelles seuls les humains peuvent répondre mais pas les programmes informatiques malveillants. Il va donc servir à éviter les spams sur vos boîtes mails. Ici le Captcha basique est une simple addition à résoudre.
Si vous activer l’autre option, « Utiliser un service de protection Spam » vous pouvez utiliser reCAPTCHA v3, qui est un service gratuit de Google, vous pouvez vous faire un compte ici : https://developers.google.com/recaptcha
reCAPTCHA v3 est « transparent » pour l’ internaute et plus aucun test ne lui est demandé. En effet, cette version s’appuie sur un algorithme analysant les actions de l’utilisateur et lui donne accès à un site avec l’assurance qu’il n’est pas un robot.
Ajout et paramétrage du Contenu spécifique d’un champ
Pour ajouter le contenu d’un champ spécifique et le paramétrer, cliquer sur l’engrenage du champ choisi.
ID du champ :
l’id est utilisé pour identifier l’élément HTML pour pouvoir y accéder et le manipuler dans le code. Il est donc unique pour cet élément. (pas d’espace, pas d’accent)
Titre :
C’est le nom qui apparaîtra à l’internaute, visible dans le champ.
Options de champs :
Vous pouvez à cet endroit choisir le type de champ (champ d’entrée, champ email, case etc.). Vous pouvez ensuite choisir une longueur minimum ou maximum des caractères dans le champ.
Dans « Symboles utilisés » vous pouvez appliquer des restrictions. Par exemple pour un champ d’entrée Téléphone vous pouvez exiger uniquement des chiffres de 0-9 et aucun autres caractères.
La logique conditionnelle :
La logique conditionnelle permet de créer une ou plusieurs règles pour afficher des champs dynamiquement en fonction des entrées à d’autres champs du formulaire.
Si le bouton “Relation” est placé sur “Pas de restriction”, la logique s’appliquera si une des règles configurées est vérifiée.
Sinon, en activant l’interrupteur « Relation » sur “Tout”, il faudra que toutes les règles configurées soient vérifiées pour que la logique s’active.
A noter que cette relation ne s’applique que pour les cas où plusieurs règles de logique sont configurées. Dans le cas où vous ne paramétrez qu’une seule règle, cette fonctionnalité n’aura pas d’effet.
Style applicable au module formulaire de contact
Vous pouvez ensuite vous rendre dans l’onglet « Style » pour personnaliser le formulaire selon votre goût.
Comme on le voit ci-dessous tout est entièrement personnalisable.
Si vous voulez ajouter une couleur de fond à votre formulaire de contact, retournez dans l’onglet « Contenu » dans fond vous pouvez appliquer une couleur de fond au module et aussi peut-être un masque de fond, comme je le fais dans la vidéo, à vous de voir.
A l’ajout de votre couleur de fond, vous remarquerez que le formulaire est trop proche du bord. Il faut pour cela vous revenir dans l’onglet « Style » puis « Espacement » et ajouter par exemple 30 ou 40 pixels de marge interne (au sommet, en bas, à gauche et à droite).
