Comment créer un formulaire de contact avec Elementor ?

Il y a 3 grandes étapes pour créer un formulaire de contact grâce à Elementor :

👉 Etape n°1 : Installer Elementor Pro

👉 Etape n°2 : Créer un formulaire de contact avec Elementor Pro

👉 Etape n°3 : Paramétrer le formulaire de contact

Après avoir testé différentes solutions de formulaires de contact sur WordPress, je ne peux que vous recommander la solution d’Elementor !

Elle est simple, permissive et efficace. De plus, les messages reçus, en plus d’être envoyés sur votre boîte mail, sont récoltés et stockés dans l’interface de WordPress.

La création d’un formulaire nécessite d’avoir la version pro d’Elementor. Si vous ne l’avez pas, vous verrez comment y souscrire dans l’étape n°1 de ce guide.

Si vous avez déjà une licence Elementor Pro, rendez vous directement à l’étape suivante !

Allez c’est parti 🙂

Etape n°1 : Installer Elementor Pro

La fonctionnalité « formulaire » n’est accessible qu’avec Elementor pro.

Bien qu’il s’agisse d’une extension payante, je ne peux que vous la recommander.

En effet, en dehors de sa vocation principale de constructeur de pages, je trouve qu’Elementor a créé l’une des meilleurs solution de formulaire de contact du marché.

Pour installer Elementor Pro, je vous redirige vers cet article qui détaille l’installation étape par étape :

Guide pour installer Elementor Pro

Etape n°2 : Créer un formulaire de contact avec Elementor Pro

Une fois la version Pro d’Elementor installée, vous allez pouvoir créer un formulaire de contact.

Sur l’éditeur d’elementor, saisissez « formulaire dans la barre de recherche ». Vous verrez apparaître le widget nommé « Formulaire » :

Cliquez dessus et faites le glisser à l’endroit désiré sur votre page.

Dans l’onglet « Contenu » vous pourrez appliquer l’ensemble des champs dont vous avez besoin sur votre formulaire :

Comme d’habitude avec Elementor, rendez vous dans les onglets « Style » et « Avancé » pour paramétrer le design de votre formulaire de contact :

Etape n°3 : Paramétrer le formulaire de contact

Voila quelques conseils supplémentaires pour bien paramétrer vos formulaire de contact.

Paramétrage de l’adresse email pour recevoir les notifications

Via l’onglet « Contenu » vous trouverez le menu « E-mail ». C’est ici qu’il faut paramétrer l’adresse mail sur laquelle vous voulez recevoir les notifications de prise de contact :

Via ces notification, vous recevrez dans votre boîte mail, le message saisi par la personne qui a rempli le formulaire de contact.

Paramétrer les actions après envoi

Elementor vous permet de paramétrer un certains nombre d’actions lorsqu’un utilisateur vous envoie une demande via le formulaire.

Vous pouvez les attribuer dans le menu « Actions après envoi » :

Dans ce cas de figure voila les 3 actions paramétrées :

1) Collecter les envois : Les messages seront récoltés et stockés à l’intérieur de votre interface WordPress.

2) E-mail : Un email de notification vous est envoyé à l’adresse mail de votre choix

3) Redirection : Le visiteur est redirigé sur la page de votre choix après avoir appuyé sur le bouton d’envoi du formulaire.

Dès lors que vous ajoutez une action, un menu qui lui est spécifique apparaît sous le menu « Actions après envoi ».

Par exemple, ci-dessous, le menu spécifique « Redirection » qui permet d’attribuer l’URL de redirection :

Eviter les spams

Voila 2 astuces qui vous permettront d’éviter de recevoir des messages frauduleux de type spam.

Créer des honeypot

En français, « honeypot » se traduit par « pot de miel ».

Dans la pratique, un honeypot est un champ de formulaire qui est seulement visible pour les robots qui envoient des spams.

Si ce champ est rempli, alors Elementor détecte que le formulaire a été sais par un robot et non un humain. La prise de contact est alors rejetée.

Ci-dessous, 2 honeypot différents ont été créés afin de multiplier l’efficacité du procédé :

Il s’agit des champs « Ville » et « Pays », qui restent parfaitement invisibles pour les humains.

Paramétrer reCaptcha

En complément, vous pouvez paramétrer le champ reCaptcha V3 :

reCaptcha est un outil développé par Google qui permet de distinguer un utilisateur humain d’un robot sur votre site.

Pour que ce paramétrage soit actif sur votre formulaire, il vous faudra créer une licence reCaptcha V3 et la saisir dans Elementor.

Pour créer votre clé reCaptcha, rendez vous sur l’interface de Google dédié à cet effet.

Ensuite, rendez vous dans l’onglet Elementor dans WordPress, dans « Régalges » puis « Intégrations » :

Si vous créez une licence reCaptcha V3, saisissez bien les infos dans la section reCaptcha V3.

Conclusion

Voilà tout ! J’espère que ce guide vous aura aidé à créer votre formulaire de contact avec Elementor !

Découvrir les autres articles sur Elementor Pro