PlanetHoster PlanetHoster host Your world

Installer un formulaire de contact + reCAPTCHA à son WordPress

Il peut paraître simple d'installer un formulaire de contact sur son blog WordPress mais en fait c'est une tâche délicate surtout depuis l'entrée en vigueur du règlement général sur la protection des données (RGPD) en mai 2018. Tous les webmasters se doivent suivre ce règlement!

Afin de protéger les formulaires de contact sur son blog, il est devenu primordial d'utiliser un dispositif anti-robots. En effet, il arrive souvent que des réseaux de "spambots" abusent  des pages de contact afin d'inonder les sites de messages de SPAM. Ceci est une attaque sérieuse et peut potentiellement affecter la stabilité et la performance de votre blog. La procédure suivante vous décrira le processus d'installation avec WPForms et Google reCAPTCHA sur le formulaire de contact d'un site WordPress afin de les protéger correctement et éviter des problèmes plus grave. 

Nous recommandons fortement l'utilisation de WP Forms. Son approche met l'accent sur la facilité d'utilisation et intègre directement les directives du RGPD et le système reCAPTCHA de Google afin que vous n'ayez pas à trop à vous soucier de la sécurité.


Installation du module WPForms


1- Se connecter à son tableau de bord WordPress et naviguer jusqu'à "Extensions" et "Ajouter"


2- Recherchez le terme "WpForms" installer cette extension :



3- Cliquer sur le bouton "Activer"



Félicitations! Vous avez installé Wp Forms! Nous allons maintenant commencer avec la création de notre premier formulaire de contact.

Création du formulaire de contact



1- Dans le volet de gauche de votre tableau de bord, sous le menu WPForms, cliquer sur "Ajouter", le créateur de formulaire de WPForms va ensuite se charger:




2- Commençons par nommer notre formulaire de contact, "contact"  par exemple, où nous allons déployer un formulaire de contact rudimentaire qui comprend un champ : Nom, Prénom,  adresse courriel et message.


3-  Sur la page qui suit, WpForms vous laissera personaliser les champs du modèle de formulaire choisi. Dans le cas présent, on utilisera le formulaire par défaut:



4- Lorsque vous avez configuré votre formulaire, cliquer sur Enregistrer afin de le sauvegarder




Configuration des directives RGPD


WPForms vous permet facilement de vous assurer que votre formulaire de contact soit conforme aux directives du règlement général sur la protection des données. Cela se fait dans les réglages de l'extension WPForms:


1- Cliquer sur "Réglages" dans le volet de droite de votre tableau de bord WordPress >> WPForms:



2- En bas de cette page, cocher l'option nommée " Améliorations RGPD" :



3- Enfin, cliquer sur le bouton orange " Enregistrer les réglages" afin d'appliquer cette modification:



Activation de reCAPTCHA


1.1- Premièrement, il faut générer le jeu de clés nécessaire au fonctionnement du dispositif anti-robots Google reCAPTCHA. Pour cela, il faut se connecter / s'enregistrer sur le site suivant:


https://www.google.com/recaptcha/


1.2- Cliquer sur le bouton bleu "Admin Console":



1.3-  En haut à droite de la console admin, cliquer sur le signe + (create):



1.4-  Remplir les champs:


  • Label:  Nom de référence que vous donnez afin de bien savoir à quel site correspond ce jeu de clé
  • reCAPTCHA type:   V2 va demander à l'utilisateur de résoudre un casse-tête. V3 va automatiquement établir si le visiteur est un robot ou pas grâce à des analyses sophistiquées.
  • Domains:  Indiquer le ou les nom(s) de domaine du ou des site(s) pour le(s)quel(s) vous générez un jeu de clé reCAPTCHA
  • Owners:  Normalement, ce champ sera automatiquement rempli mais vous pourrez ajouter un contact supplémentaire ou même plusieurs.


1.5- Accepter les conditions d'utilisation et cliquer sur "Submit:



1.6- Enfin, Google vous indique le jeu de clé à mettre en place dans la configuration reCAPTCHA de votre formulaire de contact:



Bien prendre note les clés: secrète et publique avant de passer à l'étape suivante



Activation de reCAPTCHA dans WPforms


Deuxièmement, il faut activer le dispositif reCAPTCHA dans le formulaire de contact que nous venons de créer. Celà se fait en deux étapes,  la mise en place du jeu de clé reCAPTCHA dans la configuration de WPForms puis l'activation de l'anti-robots dans le formulaire de contact créé. 


2.1- Cliquer sur "Réglages" dans le volet de gauche de votre tableau de bord WordPress >> WPForms et choisir la section nommée reCAPTCHA:


  • Type:  reCAPTCHA v2 ou v3  selon ce que vous aviez choisi lors de la création du jeu de clé.
  • Clé du site:  correspond à la clé du site lors de la création du jeu de clé.
  • Clé secrète: correspond à la clé secrète lors de la création du jeu de clé.
  • Score Threshold (0.4 par défaut):  reCAPTCHA v3 va déterminer automatiquement si l'utilisateur est un robot. Ce réglage permet de contrôler l'agressivité de reCAPTCHA v3.  0 = aggressif / 0.5 = moyen /  1= souple.
  • Mode sans conflit:  À utiliser seulement qu'en cas de souci. Cela va supprimer les autres occurrences de reCAPTCHA afin d'éviter des conflits.

2.2- Cliquer sur le bouton orangé nommé "Enregistrer les réglages":


Activation de l'anti-robots dans le formulaire


Il ne restera plus qu'à activer l'anti-robots dans notre formulaire de contact:


3.1- Dans le tableau de bord WordPress, cliquer sur WPForms >> Tous les formulaires et cliquer sur le formulaire de contact  >>> Modifier:


3.2- Wordpress vous dirigera ensuite dans le createur de formulaires de contact WPForms, se rendre dans la section Réglages >>> Général. Cocher le bouton  Enable Google reCAPTCHA;



3.3- Enregistrer le formulaire de contact en cliquant sur le bouton orangé prévu:



Publier une page de contact créée avec WPForms


Maintenant toutes les étapes ont correctement été suivi mais le formulaire de contact n'apparaît toujours pas sur mon site. C'est normal! Pour cela il faudra publier une page de contact dans son WordPress.


1- Dans le tableau de bord WordPress, cliquer sur WPForms >> Tous les formulaires et cliquer sur le formulaire de contact  >>> Modifier


2-  Dans le créateur de formulaire de contact en haut à droite cliquer sur le bouton gris nommé </>Intégration:



3- WPForms vous indiquera ensuite dans une fenêtre pop-up  le code à copier dans le presse papier.  Il ne suffira donc qu'à coller le code indiqué dans un article ou une page de votre WordPress:




4- Retourner dans le tableau de bord >> Articles >> Ajouter :


  • Donner un titre à la page
  • Y coller le code d'intégration de WPforms
  • Publier la page


5- Félicitations!  Le formulaire de contact a bien été publié et 100% sécurisé contre les SPAM en plus d'être conforme au RGPD, le règlement Général sur la Protection des données.