Comment créer un formulaire sécurisé et sans spam avec WPForms

WPForms est un plugin formidable pour créer des formulaires, avec des possibilités intéressantes même dans sa version gratuite.

 

Dans un guide précédent, nous avons montré comment créer un formulaire simple avec Forminator afin de vous initier à ce type d’outil. Dans celui-ci, nous allons répéter le procédé, mais cette fois avec WPForms, qui propose une interface graphique très qualitative et intuitive.

 

Nous allons donc voir comment créer un formulaire de contact simple, mais surtout sécurisé, afin d’éviter de recevoir du spam.

Table des matières

Pourquoi un formulaire de contact est indispensable sur votre site

Que vous vendiez des produits, des services, que vous ayez un blog ou tout autre type de site, vos visiteurs et futurs clients vont être amenés à vous contacter pour demander des informations, faire une demande de devis, organiser un rendez-vous, ou obtenir plus d’explications sur un élément.

 

Ce qui est une bonne chose, car une personne qui vous contacte a de grandes chances d’être un futur prospect.

 

Et c’est là que votre formulaire fait son entrée. Il doit être convaincant, simple et bien conçu pour que le visiteur ne fasse pas marche arrière et n’abandonne pas avant d’envoyer son message.

Si ce dernier est mal conçu, il vous fera perdre tôt ou tard des clients. Encore pire, si vous n’en avez pas du tout, vous ne laissez tout simplement pas la possibilité aux gens de prendre contact avec vous.

 

C’est pour cela qu’il est aujourd’hui indispensable d’avoir un formulaire de contact.

Quelles sont les possibilités avec WPForms ?

Une différence réelle entre WPForms et Forminator concerne les formulaires conditionnels (c’est-à-dire des champs qui s’affichent ou se cachent selon les réponses de l’utilisateur).

 

Avec Forminator, les logiques conditionnelles sont disponibles dans la version gratuite, ce qui permet par exemple de :

 

  • afficher un champ uniquement si une réponse particulière est sélectionnée

 

  • rendre un champ obligatoire selon une réponse précédente

 

  • adapter dynamiquement les champs selon le contexte

 

Cela donne une grande flexibilité dès la version gratuite.

 

En revanche, avec WPForms, la logique conditionnelle n’est disponible que dans la version payante (Pro). Cela signifie que si vous utilisez la version gratuite de WPForms, vous ne pourrez pas configurer ce type de comportement. Pour avoir les options de condition, il faudra passer à une licence payante.

 

Autrement dit :

 

  • WPForms gratuit = pas de condition logique avancée

 

  • Forminator gratuit = logique conditionnelle disponible

 

Ce n’est pas seulement un détail : si vous avez besoin d’un formulaire qui s’adapte aux réponses de l’utilisateur (par exemple pour une demande de devis, un questionnaire interactif ou un formulaire dynamique), Forminator peut être une meilleure option sans dépenser d’argent.

 

Après, si vous êtes prêt à investir et que vous voulez une interface très propre, un support dédié, et une intégration plus “premium”, WPForms reste excellent – mais il faut garder à l’esprit que certaines fonctionnalités avancées sont réservées à la version payante.

WPForms ralentit-il un site WordPress ?

Dans la majorité des cas, WPForms ne ralentit pas un site WordPress.

 

C’est un plugin bien optimisé, qui ne charge ses scripts que sur les pages où un formulaire est réellement présent. Cela signifie qu’il n’impacte pas toutes les pages du site inutilement.

 

Cependant, comme pour n’importe quel plugin, tout dépend de la façon dont il est utilisé.

 

Un site peut commencer à ralentir si :

 

  • vous installez trop de plugins en même temps

 

  • vous utilisez beaucoup d’extensions supplémentaires liées à WPForms

 

  • votre hébergement manque de ressources serveur

 

  • vous ajoutez des formulaires très complexes avec beaucoup de champs et de scripts

 

Dans sa version standard, un simple formulaire de contact n’a quasiment aucun impact sur les performances.

Quelle est l'avis des utilisateurs de WP Forms

WPForms est aujourd’hui l’un des leaders parmi les plugins de formulaires WordPress. Sans compter Contact Form 7, qui reste plus brut et moins poussé au niveau de l’interface graphique, WPForms se démarque notamment par son système en glisser-déposer, beaucoup plus intuitif.

 

WPForms compte plus de 6 millions d’installations actives sur des sites WordPress, avec une note proche de 5/5 basée sur plus de 14 000 avis. Cela montre clairement que la communauté WordPress apprécie ce plugin.

 

Parmi les qualités qui reviennent souvent dans les avis, on retrouve sa simplicité d’utilisation, son efficacité, ainsi que sa capacité à collecter des informations utilisateurs de manière claire et structurée.

 

C’est un outil jugé à la fois accessible aux débutants et suffisamment complet pour des projets plus avancés.

Comment installer WPForms sur WordPress

Pour installer WPForms sur WordPress et commencer à créer vos propres formulaires, rendez-vous dans « Extensions > Ajouter une extension ».

 

Tapez ensuite dans la barre de recherche en haut à droite WPForms, puis attendez de voir apparaître l’extension dans les résultats.

 

Il ne vous restera plus qu’à cliquer sur « Installer maintenant », puis sur « Activer ».

Ajoutez une extension en recherchant “WPForms” dans la barre de recherche des extensions WordPress, puis cliquez sur “Installer maintenant” et “Activer” pour commencer à créer votre formulaire.

Cliquez ensuite sur « Installer maintenant », puis pensez bien à activer le plugin une fois l’installation terminée.

 

Nous avons vu le cas où vous trouvez le plugin directement dans la bibliothèque WordPress. Mais si vous l’avez au format ZIP, ou si vous souhaitez installer la version Pro, rendez-vous sur notre guide Comment installer un plugin, avec une section dédiée au téléversement des plugins ZIP.

Installation de l’extension WPForms depuis la page Extensions du tableau de bord WordPress

Comprendre l'interface de WPForms

Une fois le plugin activé, vous allez être redirigé vers la page de « Bienvenue » de WPForms.

 

Pour commencer, cliquez sur « Créer votre premier formulaire ».

Interface WPForms dans WordPress avec bouton pour créer un premier formulaire

Vous arrivez sur la page qui vous demande de sélectionner un modèle.

 

À gauche, vous avez une barre qui propose différents modèles classés par thème ou secteur.

 

Sur la partie droite, vous pouvez visualiser chaque modèle de formulaire.

 

Nous pouvons aussi y voir un bloc « Générer avec l’IA », et c’est là que réside une partie de la puissance de WPForms. Vous pouvez utiliser cette fonctionnalité basée sur l’intelligence artificielle pour générer des formulaires plus complexes sans perdre de temps.

 

De l’autre côté, nous avons également des formulaires de contact préconçus. Cela peut être pratique, mais dans notre cas, cela ne nous intéresse pas pour l’instant. Nous voulons d’abord comprendre ce que nous faisons, créer le formulaire nous-mêmes, puis ensuite, si nécessaire, utiliser ces modèles.

 

Il est important de procéder ainsi au début. En cas de problème, si vous ne connaissez pas le fonctionnement de votre formulaire, les pannes seront plus difficiles à identifier et à corriger.

Pour continuer, nous allons cliquer sur « Formulaire vide », puis sur « Créer un formulaire vierge ».

Interface WPForms affichant les modèles disponibles avec sélection du formulaire vide

Nous arrivons maintenant sur l’éditeur qui va nous permettre de réaliser notre formulaire.

 

Afin de ne pas vous perdre, nous allons décortiquer l’interface pour être sûrs que vous compreniez tous les paramètres.

 

Premièrement, dans la barre du haut, dans l’onglet Menu à côté du point d’interrogation, nous avons la possibilité (avec la version gratuite) de dupliquer le formulaire (inutile à cette étape de la création) ou alors d’enregistrer en brouillon (utile si nous ne voulons pas que nos modifications apparaissent au public).

 

À droite de ce paramètre, vous pouvez prévisualiser le rendu de votre formulaire.

 

Le bouton « Contenu embarqué » sert quant à lui à copier le shortcode pour l’intégrer dans la page souhaitée.

 

Enfin, « Enregistrer », comme son nom l’indique, permet d’enregistrer les modifications pour qu’elles soient prises en compte et affichées aux visiteurs.

Éditeur WordPress de formulaire vide mettant en avant la barre bleue « Prévisualisation / Contenu embarqué / Enregistrer ».

Dans la barre latérale gauche, plusieurs sections sont disponibles et vont nous être utiles :

 

  • Configuration nous renvoie vers la page permettant de choisir notre modèle. Une fois le formulaire créé, cette section ne nous sera plus d’une grande utilité.

 

  • Réglages sera en revanche très utilisée et particulièrement importante. Avec la version gratuite, elle nous permettra de modifier le nom du formulaire, son apparence, configurer la protection contre le spam, définir l’adresse e-mail d’envoi et de confirmation, etc.

 

  • Marketing et Paiements ne nous serviront pas dans ce guide. Ces sections permettent de connecter un CRM d’emailing et d’intégrer des moyens de paiement afin de les utiliser ensuite dans WPForms.
Éditeur WordPress de formulaire mettant en évidence le menu latéral avec options Configuration, Champs, Réglages, Marketing et Paiements.

Nous avons ensuite à droite les différents éléments que nous pouvons ajouter et qui vont composer notre formulaire.

 

Nous pouvons voir les principaux champs, ceux disponibles dans la version gratuite (affichés normalement en bleu), et ceux réservés à la version payante (affichés en grisé).

 

En haut, nous avons la section « Options du champ », qui permet de modifier le libellé, la description, la taille du champ, définir si celui-ci est facultatif ou obligatoire, et dans le cas de la version payante, activer les conditions logiques.

Éditeur WordPress affichant le panneau d’ajout de champs standards et spécifiques pour créer un formulaire personnalisé.

Pour finir, nous avons la partie centrale où apparaîtront nos différents champs, et où nous pourrons les organiser dans l’ordre souhaité.

 

C’est ici que nous construisons concrètement notre formulaire.

 

Nous avons également, dans cette zone, la possibilité de dupliquer un champ afin d’aller plus vite lors de la création, ce qui est très pratique lorsque plusieurs champs se ressemblent.

Aperçu du formulaire vide dans l’éditeur WordPress invitant à ajouter des champs pour créer un formulaire personnalisé.

Comment créer un formulaire avec WPForms ?

Pour commencer, dans la section Champs, ajoutez dans cet ordre précis :

 

  • Nom

 

  • Email

 

  • Texte sur une seule ligne

 

  • Texte en paragraphe

 

Cela nous permettra d’avoir une base propre pour créer un formulaire de contact simple et structuré.

Création d’un formulaire de contact WordPress avec champs Nom, E-mail et zones de texte personnalisées.

Une fois ceci fait, cliquez sur « Nom » afin que nous puissions voir les différents paramètres modifiables.

Édition d’un champ Nom obligatoire dans un formulaire de contact créé avec WordPress.

Dans les modifications possibles, nous avons dans la section « Général » la possibilité de changer le libellé. Dans ce cas, nous allons le laisser tel quel.

 

Vous pouvez modifier le format si vous le souhaitez, par exemple mettre uniquement un champ Nom, ou ajouter un second champ pour le prénom. Cela est toutefois assez déconseillé, car cela rajoute une étape supplémentaire qui peut freiner le visiteur à vous envoyer un message.

 

Ne remplissez pas la description pour des étapes simples comme celle-ci.

 

Veillez également à ce que la case « Nécessaire » soit cochée. Si elle est activée, le champ sera obligatoire pour la personne qui remplit le formulaire.

Configuration du champ Nom dans un formulaire WordPress avec options libellé, format et champ obligatoire.

Ensuite, dans la section « Avancé », changez la Taille du champ en « Grand » (l’option est normalement réglée sur « Moyen »). Cette option permet de définir la largeur du formulaire et donc l’espace que prendra le champ sur la ligne.

 

Dans le champ Prénom, inscrivez « Prénom » dans la partie Espace réservé.

 

Dans le champ Nom, inscrivez « Nom » dans Espace réservé.

 

Enfin, cochez l’option « Masquer les sous-libellés » afin d’avoir un rendu plus propre et plus moderne.

Paramètres avancés du champ Nom dans un formulaire WordPress avec taille, classes CSS et options d’affichage.

Maintenant, faites la même chose pour le champ « E-Mail ».

 

Vérifiez que la case « Nécessaire » est bien cochée, afin que le champ soit obligatoire.

 

Ensuite, dans la section « Avancé », assurez-vous que la Taille du champ est bien réglée sur « Grand ».

 

Enfin, dans le champ « Texte indicatif », vérifiez qu’il y ait bien inscrit : E-Mail.

Configuration avancée du champ E-mail dans un formulaire WordPress avec texte indicatif et options d’affichage.

Ensuite, nous pouvons cliquer sur « Texte sur une seule ligne ».

 

Pour le paramétrage de ce champ, nous allons modifier le libellé afin d’y inscrire « Sujet ».

 

Ensuite, vérifiez que la case « Nécessaire » est bien cochée (nativement elle ne l’est pas, il faut donc l’activer), afin que ce champ devienne obligatoire.

 

Puis, rendez-vous dans la section « Avancé ».

 

Réglez la Taille du champ sur « Grand », et dans « Texte indicatif », écrivez :

 

Entrez ici le sujet de votre demande.

 

Nous n’avons rien d’autre à modifier sur ce champ.

Configuration du champ Sujet dans un formulaire WordPress avec texte indicatif personnalisé.

Pour finir, faites exactement la même chose pour le champ « Texte en paragraphe », à la différence du libellé que vous pouvez modifier en « Contenu », et du texte indicatif où vous pouvez insérer :

 

« Entrez ici le contenu de votre demande. »

 

À la suite de cela, pensez bien à enregistrer vos modifications afin qu’elles soient prises en compte.

Configuration du champ Contenu et bouton Enregistrer dans l’éditeur de formulaire WordPress.

Allez dans la section « Réglages > Général ».

 

Nous allons alors modifier le nom du formulaire afin de nous y retrouver plus facilement par la suite.

 

Vous pouvez aussi modifier le texte du bouton d’envoi, ainsi que le message qui s’affiche pendant le chargement de l’envoi.

Paramètres généraux d’un formulaire de contact WordPress avec modification du nom et options d’envoi.

Ensuite, dans « Réglages > Thèmes », c’est ici que vous pouvez modifier l’apparence de votre formulaire grâce à la section située à gauche.

 

Cette partie est propre à chacun. À vous d’être créatif et d’adapter le design de votre formulaire pour que celui-ci s’intègre parfaitement au reste de votre site web.

 

Sur la partie droite, nous avons une prévisualisation. Celle-ci n’est pas représentative des champs précédemment paramétrés. Elle sert uniquement à afficher les changements en direct sur un formulaire type comprenant un email, un nom, des cases à cocher, etc.

Personnalisation des thèmes et styles d’un formulaire de contact WordPress avec aperçu du design.

Comment paramétrer l’envoi d’e-mails de son formulaire sur WPForms ?

Pour configurer l’envoi d’e-mails, car oui, vos visiteurs vont vous contacter via le formulaire, il faut effectivement paramétrer l’envoi des mails afin qu’ils se délivrent correctement.

 

Pour cela, rendez-vous dans « Réglages > Notifications ».

 

Vous arrivez alors sur la page permettant de configurer l’envoi par mail. Nous allons voir paramètre par paramètre comment procéder.

 

Commençons par « Adresse e-mail du destinataire ».

 

Par défaut, elle est réglée sur l’e-mail de l’administrateur du site, c’est-à-dire l’adresse rattachée à votre installation WordPress.

 

Si vous ne souhaitez pas que les réponses arrivent sur cette adresse, vous pouvez supprimer le module affiché en bleu et entrer manuellement l’adresse e-mail souhaitée.

Paramétrage des notifications e-mail d’un formulaire de contact WordPress avec destinataire et objet personnalisé.

Ensuite, dans la partie « Ligne de sujet de l’e-mail », qui correspond au titre du mail que vous allez recevoir, nous allons choisir quelque chose de simple mais efficace, qui nous donne dès le premier coup d’œil des informations sur la demande.

 

Cela permet de gagner du temps et de prioriser, si nécessaire, certaines demandes.

 

Pour cela, vous pouvez par exemple inscrire :

 

« Nouveau contact de {field_id= »9″} pour {field_id= »7″} »

 

Attention à bien remplacer les {field_id= » »} par ceux correspondant à votre formulaire.

 

Vous pouvez récupérer les identifiants en cliquant sur la petite icône d’étiquette, qui permet d’insérer automatiquement les réponses de vos champs dans le sujet du mail.

Configuration des notifications WordPress avec insertion de Smart Tags pour personnaliser l’objet de l’e-mail du formulaire.

Ensuite, dans « Nom de l’expéditeur », il faut indiquer le nom que vous souhaitez afficher comme expéditeur du mail.

 

Vous pouvez mettre le nom de votre entreprise ou le nom public de votre site, c’est à vous de choisir.

 

Concernant l’e-mail de l’expéditeur, il est généralement préférable de mettre le même que celui du destinataire, afin d’éviter certains problèmes de délivrabilité.

 

Vous pouvez toutefois utiliser une autre adresse si vous le souhaitez, mais il est recommandé d’utiliser une adresse liée à votre nom de domaine pour plus de crédibilité.

Paramétrage du nom et de l’e-mail de l’expéditeur dans les notifications d’un formulaire WordPress.

Descendez ensuite jusqu’à la section « Répondre à ».

 

Complétez ce champ avec l’adresse que le visiteur renseignera dans le formulaire (généralement le champ E-Mail).

 

Grâce à cela, lorsque vous cliquerez sur « Répondre » dans votre boîte mail, vous répondrez directement à l’adresse du visiteur, et non à votre adresse d’expédition.

 

C’est un réglage très important, car sans cela, vous risqueriez de répondre à votre propre adresse au lieu de celle du contact.

Configuration du champ Répondre à avec Smart Tags E-mail dans les notifications d’un formulaire WordPress.

Ensuite, la partie « Message de l’e-mail » correspond tout simplement au contenu du mail que vous allez recevoir.

 

Vous avez deux possibilités :

 

La première consiste à laisser « {all_fields} ». Cela signifie que WPForms va récupérer toutes les réponses du formulaire et les insérer automatiquement dans le mail, avec une mise en page standard (non personnalisable dans la version gratuite).

 

La seconde possibilité est d’ajouter les éléments un par un en utilisant les identifiants de champs ({field_id}), afin d’organiser le message de manière plus claire et structurée.

 

Dans notre cas, nous allons faire simple et laisser « {all_fields} ».

Si vous souhaitez personnaliser davantage, cliquez sur la petite icône d’étiquette pour insérer les champs manuellement et créer une présentation qui vous convient.

 

Vous pouvez ensuite, si vous le souhaitez, choisir un modèle d’e-mail, mais les options restent limitées avec la version gratuite. Nous vous conseillons donc de laisser le modèle par défaut.

 

Les autres paramètres disponibles dans cette section sont réservés à la version premium.

Configuration du message de notification avec la balise intelligente all_fields dans un formulaire WordPress.

Ensuite, dans « Réglages > Confirmations », vous avez le message qui s’affichera lorsqu’un utilisateur finalisera l’envoi du formulaire.

 

Vous avez plusieurs possibilités d’affichage après une soumission :

 

  • afficher un message (comme dans notre cas)

 

  • afficher une page spécifique

 

  • ou rediriger vers une URL personnalisée

 

Dans notre cas, le message proposé est déjà très clair et professionnel, nous allons donc le laisser tel quel.

Configuration du message de confirmation après envoi d’un formulaire de contact WordPress.

Comment sécuriser son formulaire WPForms contre le spam avec reCAPTCHA

Pour cela, rendez-vous dans « Réglages > Protection anti-spam et sécurité ».

 

Nous pouvons voir les protections natives de WPForms. Nous n’allons pas y toucher pour le moment et plutôt nous intéresser à reCAPTCHA.

 

reCAPTCHA est une solution gratuite proposée par Google, qui permet de protéger votre formulaire contre le spam.

 

Pour y ajouter nos clés API, il faut cliquer dans un premier temps sur la croix en haut à droite (pensez bien à enregistrer avant de cliquer).

Paramètres de protection anti-spam et reCAPTCHA pour sécuriser un formulaire de contact WordPress.

Vous êtes redirigé vers la page comportant tous vos formulaires.

 

Cliquez ensuite sur « Réglages ».

Vue d’ensemble des formulaires WPForms dans WordPress avec liste des formulaires et accès aux réglages.

Allez dans la section nommée « CAPTCHA ».

Paramètres WPForms avec configuration CAPTCHA pour sécuriser les formulaires WordPress contre le spam.

Et cliquez sur le module « reCAPTCHA ».

 

Une fois le module sélectionné, de nouveaux champs apparaissent.

Choix du service CAPTCHA reCAPTCHA dans les réglages WPForms pour protéger un site WordPress contre le spam.

Cochez ensuite « reCAPTCHA ».

 

WPForms va vous demander la clé API reCAPTCHA assignée à votre site.

 

Pour la trouver, veuillez vous référer à notre article sur Forminator, dans la section « Comment activer reCAPTCHA sur WordPress ».

 

À la suite de la lecture de ce dernier, entrez les clés API trouvées directement dans les champs « Clé de site » et « Clé secrète ».

 

Le message d’échec correspond au message qui s’affichera en cas d’erreur lors de la vérification.

 

Le seuil de score représente le degré de fermeté de reCAPTCHA (plus il est élevé, plus le filtre est strict).

 

Le mode sans conflit peut être activé si votre site rencontre des problèmes de compatibilité avec d’autres scripts ou plugins.

 

Cliquez ensuite sur « Enregistrer les réglages ».

Configuration des clés reCAPTCHA v3 dans WPForms avec clé de site, clé secrète et seuil de score.

Une fois enregistré, il ne reste plus qu’à retourner dans « Tous les formulaires > Formulaire de contact > Modifier ».

Modification d’un formulaire de contact dans WPForms depuis la vue d’ensemble des formulaires WordPress.

Il ne vous reste plus qu’à ajouter le champ reCAPTCHA afin que votre formulaire soit protégé par cette solution anti-spam.

 

Une fois cela fait, pensez bien à enregistrer vos modifications.

Ajout du champ CAPTCHA dans un formulaire de contact WPForms pour renforcer la sécurité anti-spam.

Pour finir, il ne vous reste plus qu’à cliquer sur « Contenu embarqué ».

 

WPForms vous propose soit d’intégrer le formulaire dans une page existante, d’en créer une nouvelle, ou d’utiliser un code court. Vous avez le choix selon votre organisation.

 

Si vous avez déjà une page de contact prête, cliquez sur « Utiliser un code court ».

 

Copiez le shortcode, puis rendez-vous sur la page où vous souhaitez intégrer votre formulaire et collez-le à l’endroit souhaité.

Fenêtre d’intégration WPForms pour ajouter un formulaire de contact dans une page WordPress via code court.

Ensuite, ajoutez un widget « Shortcode » (ou « Code court ») et collez le shortcode précédemment copié depuis le plugin WPForms.

 

Cliquez ensuite sur Publier / Enregistrer.

Insertion du code court WPForms dans l’éditeur Gutenberg pour afficher un formulaire de contact sur une page WordPress.

Vous avez maintenant un superbe formulaire de contact, propre, structuré et surtout sécurisé.

 

Il est simple à remplir pour vos visiteurs, clair dans sa présentation, et correctement paramétré pour que vous receviez les demandes par e-mail sans difficulté.

Formulaire de contact WordPress avec champs nom, e-mail, sujet et message prêt à être envoyé.

Vous avez maintenant toutes les bases pour créer un formulaire de contact professionnel, sécurisé et fonctionnel avec WPForms.

 

Mais ce guide ne représente qu’une partie des possibilités offertes par ce plugin. WPForms est un outil très complet, avec de nombreuses fonctionnalités supplémentaires, notamment dans sa version Pro.

 

Un prochain guide sera entièrement dédié à la présentation détaillée du plugin, où nous analyserons en profondeur les différences entre la version gratuite et la version payante, les fonctionnalités avancées, ainsi que les cas d’usage concrets selon votre projet.

 

Cela vous permettra de comprendre réellement tout le potentiel de WPForms et de faire le bon choix en fonction de vos besoins.