fbpx

Bons plans Alpa14 | Des offres et des réductions intéressantes à découvrir 😃

Créer un formulaire de contact avec Divi

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

Par où commencer pour créer son site Internet ?

Toute personne disposant d’un ordinateur et d’une connexion Internet peut créer son propre site Web. Il existe de nombreux outils en ligne qui facilitent le processus. Les sites Web peuvent être utilisés pour promouvoir votre entreprise, communiquer avec les clients et partager vos idées.

Dans cette vidéo qui est qui est une retransmission d’un Webinar, Léopoldine la fondatrice de la société Webmyday, explique les différentes étapes à suivre et les bonnes questions à se poser pour créer son premier site web professionnel. Elle passe en revue les services et les outils nécessaires à la conception Web et propose des conseils pour créer un site Web efficace.

Cette vidéo est une excellente ressource pour les débutants qui souhaitent en savoir plus sur les étapes à suivre dans la conception Web ou pour les propriétaires d’entreprise qui ont besoin de créer un site Internet pour leur activité. 

Sommaire de la vidéo

0:00 Introduction
2:41 La formation Webmyday qu’est-ce que c’est ?
6:22 Faire ou faire faire son site Internet ?
16:31 Solutions pour faire son site soi-même
18:24 Solutions pour faire faire son site
22:33 Coût d’un site Internet
25:55 Un CMS, qu’est-ce que c’est ?
26:46 Les CMS les plus connus
32:57 Le nom de domaine
33:39 L’ hébergement
34:54 Quelques hébergeurs
38:35 4 choses que doit comprendre votre hébergement
40:01 WordPress qu’est-ce que c’est ?
40:29 Différence entre WP.com et wp.org
43:00 Les différentes composants de WP
46:33 En résumé les étapes pour travailler avec WordPress
47:47 Conclusion

Sommaire de la vidéo

Vous serez peut-être également intéressé par ces articles …

Enregistrer son écran pour créer des formations

Enregistrer son écran pour créer des formations

Vous recherchez un logiciel de capture pour filmer l’écran de votre PC ou de votre Mac ? Vous souhaitez créer des démos de logiciels, des démos de jeux, des tutoriels ou des vidéos de formation d’aspect professionnel ? Alors vous avez sans doute besoin de DemoCreator de Wondershare !

lire plus
Divi Supreme : Module Text Path

Divi Supreme : Module Text Path

Divi Supreme possède un excellent nouveau module intitulé Text Path qui vous permet de créer de magnifiques chemins de texte. Avec ce module, vous pouvez facilement créer des motifs et des dessins complexes dans votre texte.

lire plus
Créer un pop-up sur un site Divi

Créer un pop-up sur un site Divi

Ce tutoriel vous propose une solution simple et pratique pour créer un pop-up. En effet, je vous présente un plugin gratuit pour Divi intitulé « Popups for Divi » qui vous permettra de transformer toute section de votre site web en fenêtre pop-up.

lire plus
Offrez-moi un café! Merci :)