Découvrez les bons plans & les réductions Alpa14

Créer un formulaire de contact avec Divi

Alpa14 les tutoriels faciles !

Catégories

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 ! 

Licence Divi
Code Promo Divi Supreme
.

Insertion du module

Insérer un rangée, la fenêtre des modules s’ouvre puis appeler le module « Formulaire de contact ».

Module formulaire de contact
Contenu

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.

Options des champs
paramétrage module
Formation WordPress
Hostinger hébergement web
Amelia booking plugin

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.

Style module formulaire de contact
Espacement - marge interne

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).

MailerLite free-trial

Vous serez peut-être intéressé par les articles suivants :

Tutoriel Divi : Inverser les colonnes selon la vue

Tutoriel Divi : Inverser les colonnes selon la vue

En vue ordinateur un site web peut avoir un design avantageux mais peut être moins en vue mobile du fait des colonnes d’une rangée qui passent les unes sous les autres.
On peut alors se trouver avec une suite d’éléments non souhaitée avec par exemple 2 textes ou 2 images à la suite.

lire plus
Un menu hamburger ? en vue ordinateur : site WordPress Divi

Un menu hamburger ? en vue ordinateur : site WordPress Divi

Sur Internet, le terme de “hamburger menu” désigne un menu de navigation utilisé sur les sites mobiles par souci  de gain de place et d’ergonomie, la largeur de l’écran étant restreinte pour conserver un menu classique. Sur ces périphériques mobiles, on masque alors le menu derrière un bouton à 3 petits traits ressemblant à un hamburger.

lire plus
Créer un site WordPress parfaitement responsive

Créer un site WordPress parfaitement responsive

Dans cette vidéo, je vous montre comment créer un site web WordPress responsive en utilisant le thème Divi et son Visual Builder. Je vous explique comment utiliser les puissantes fonctionnalités intégrées à Divi pour créer un site Web professionnel qui aura fière allure sur n’importe quel appareil en s’adaptant parfaitement à son écran.

lire plus