Comment ajouter un formulaire de contact à WordPress

Installer un formulaire de contact sur votre site WordPress est nécessaire quand vous souhaitez être contacté et non spammé par des robots qui vous proposent des produits que vous ne souhaitez pas recevoir. Voici comment faire.

O va voir comment installer un formulaire de contact sur un site WordPress. Et on va voir aussi comment le protéger contre le SPAM.

Ajout de l’extension pour créer le formulaire de contact

Pour commencer, je vais sur le tableau de bord WordPress de mon site et je vais aller dans « extensions » et cliquer sur « ajouter ».

Pour ceux qui ne le savent pas, ça s’appelle aussi plugins en anglais. Un plugin, c’est un petit programme qu’on peut ajouter à votre site WordPress pour lui ajouter des fonctionnalités spécifiques.

En l’occurrence, là, je veux ajouter un formulaire de contact et il y a un plugin qui fait très bien cette chose-là qui s’appelle « contact form 7 ».

Vous cliquez sur « ajouter des extensions », vous avez un petit moteur de recherche et vous allez taper le nom du plugin que je vous ai indiqué « contact form 7 ».

Et vous allez voir que lorsque vous avez bien tapé le nom de l’extension correctement, elle s’affiche en général en tout premier.

Vous cliquez sur « installer » et au bout de quelques secondes, une fois qu’elle sera installée, ce bouton se transformera en bouton bleu qui vous propose de l’activer. Vous cliquez sur « activer ».

Et une fois, que c’est fait, vous allez pouvoir créer votre premier formulaire de contact.

Quand vous avez installé l’extension « contact form 7 », l’extension va s’ajouter en tant que menu dans tableau de bord WordPress.

Et vous aurez un petit menu « contact » qui aura été ajouté par cette extension où vous allez pouvoir faire trois choses :

• Accéder à la liste de vos formulaires de contact, parce que vous pouvez en avoir plusieurs
• Créer un formulaire (de contact ou pour d’autres usages)
• Gérer l’intégration

Vous allez voir un peu plus en détails en quoi ça consiste.

Création du formulaire de contact

On commence par créer un formulaire

Si je clique sur « créer un formulaire », cette extension est assez intelligente parce qu’elle ne va pas vous embêter à créer les champs que tout le monde met en général sur tous les sites internet. Elle va pré-créer votre formulaire avec les champs de base qui sont requis.

Ce n’est pas compliqué à comprendre. Après la petite nomination « label », vous avez l’intitulé de ce qui apparaîtra dans le formulaire.

Vous pouvez remplacer « obligatoire » par un astérisque (*) parce que communément les gens savent que quand il y a un astérisque, ça veut dire que c’est un champ requis.

A signaler que si vous avez un champ qui n’est pas indiqué comme obligatoire et que vous voulez le rendre obligatoire, il faudra ajouter un petit astérisque à côté de la catégorie de champ tel qu’elle est spécifiée.

Ensuite, on a un champ objet et un champ message qui ne sont pas obligatoires. Ensuite, on a le bouton « envoyer ».

Ce n’est pas très compliqué.

Il y a des petits boutons qui nous permettent d’ajouter des champs ou des éléments à renseigner dans le formulaire par votre visiteur.

Par exemple, après l’adresse email, je saute une ligne ou deux et je clique sur « tel » pour ajouter une balise téléphone. Là, je peux cocher la case si je veux que la balise ou le champ soit obligatoire sinon je laisse décoché. C’est tout ce qu’il y a à faire et je clique sur insérer la balise.

Une fois que c’est fait, qu’est ce qui se passe ?

Il faut donner un nom à votre formulaire : « mon formulaire » et je clique sur enregistrer.

Ce que je peux faire, c’est aller dans l’onglet « email » pour vérifier que tout soit correct. Et en l’occurrence, il faut vérifier que votre adresse email soit correcte.

En effet, quand une personne envoie ce formulaire, c’est vous qui allez recevoir un email qui va être envoyé par le site et qui va vous dire : quelqu’un a essayé de vous contacter, voilà ce qu’il dit, voilà son adresse mail etc..

Sur cet ongle « email », on voit le contenu de l’email qui vous sera envoyé.

Tous ce qui est entre crochet, ce sont des variables, ce sont les données que l’utilisateur aurait renseigné au moment où il aura rempli les champs du formulaire.

Si tout est ok, je clique sur enregistrer.

Intégration du formulaire de contact

Mon formulaire est créé. Ce qu’il va falloir faire maintenant c’est l’intégrer dans une page de votre site WordPress pour qu’il soit fonctionnel.

En face du formulaire, on a ce qu’on appelle un « code court » (ou « shortcode ») qui est toujours entre crochets sur WordPress. Ce code court, je le sélectionne et je le copie.

Ensuite je le colle dans une page, et instantanément, la page affichera le formulaire avec les champs que j’ai définis.

Fonctionnement du formulaire

Mon formulaire de contact est opérationnel. Si je clique sur envoyer sans rien remplir, il va refuser car les champs obligatoires sont vides. Un message d’erreur va aussi apparaître au bas de la page.

Ce formulaire de contact est opérationnel

Vous pouvez faire un petit test d’envoi avant de le publier pour voir s’il fonctionne bien

Vous cliquez sur envoyer. Vous allez recevoir l’email que vous-même vous êtes envoyé par le formulaire de contact.

C’est la première étape.

On sait que tout fonctionne bien.

Ajout du système anti-spam : reCaptcha

Maintenant, ce qui manque c’est une protection à ce formulaire.

Et il faut le protéger parce qu’il y a beaucoup de robots sur internet qui vont détecter les formulaires de contact et les champs à renseigner et vont se mettre à saisir des informations.

Ils vous envoient des messages publicitaires pour acheter des produits ou des choses qui ne nous intéressent absolument pas.

Vous allez être spammé à longueur de journée et c’est quand même très pénible.

Pour éviter ça, il y a un outil qui est proposé par Google et qui est totalement gratuit qui s’appelle « recaptcha ».

Je reviens sur mon formulaire de contact. Vous allez dans le menu « intégration », où vous avez la possibilité d’avoir un lien direct pour accéder à recaptcha, c’est la page où vous allez reconfigurer une protection de la saisie de votre formulaire.

Vous avez dû en voir par mal sur internet.

Pendant longtemps, c’était un code à taper dans le formulaire. Ce code n’était pas en chiffres ni en texte, c’était un code dans une image.

Après, ça a un petit peu évolué et ce qu’on voit encore beaucoup c’est Google qui le propose, c’est simplement de cocher une case pour dire «  je ne suis pas un robot ».

Maintenant, ça a encore évolué et Google propose une version 3 de son recaptcha.

Et cette version 3 n’implique aucune action de la part de l’utilisateur. Il est capable de détecter en fonction de la réputation, sur je ne sais quels critères, qu’il s’agit d’un robot qui essaie de remplir le formulaire et non pas d’une personne. Et dans ce cas, il va bloquer le formulaire et l’empêcher l’envoi du message.

Vous pouvez l’installer assez facilement.

Il suffit de cliquer sur « recaptcha » et ensuite sur « admin console ».

Vous allez simplement cliquer sur le petit + pour créer un nouveau captcha.

Vous mettez un libellé, vous pouvez mettre le nom de votre site afin de vous souvenir.

Vous pouvez choisir entre la version 2 ou la version 3. La version 2 est la version qui va afficher une petite case sur le formulaire invitant l’utilisateur à cocher pour dire qu’il n’est pas un robot et puis la version 3 c’est l’inverse, la version automatique où l’utilisateur n’a rien à cocher et n’a rien à faire, c’est Google qui va détecter si c’est quelque chose de suspect ou si au contraire c’est quelque chose de valide, si c’est une vraie personne qui essaie de vous contacter ou un robot.

Ensuite il faut ajouter votre nom de domaine et ensuite cliquer sur « envoyer ».

Automatiquement, un écran vous propose 2 clés :

• une clé du site
• et une clé secrète

Ces deux clès, on les copie-colle dans WordPress, dans l’intégration du recaptcha en cliquant sur « configuration de l’intégration ».

Il y a bien une clé du site à intégrer et une clé secrète.

Je copie la clé du site, je la colle et je copie la clé secrète et je la colle et j’enregistre tous les changements.

Si je reviens sur ma page du formulaire de contact et que je rafraîchis la page, en bas à droite, il y a un petit symbole qui va s’afficher qui correspond à la protection recaptcha et qui va maintenant sécuriser votre site par rapport aux éventuelles tentatives suspectes de robot pour vous envoyer des publicités non souhaitées.

Pour l’utilisateur, ce sera transparent, il aura juste à renseigner son nom, son adresse mail, son téléphone et éventuellement, l’objet de son message. Il cliquera sur envoyer et c’est tout !

Initiation à WordPress

Je vous ai montré comment installer un formulaire de contact sur votre site WordPress.

Mais si vous débutez avec WordPress, je vous propose une formation d’initiation d’1h30 qui vous explique tout de A à Z sur le CMS le plus populaire : comment il fonctionne, qu’est-ce qu’on peut faire avec, les plugin, les thèmes, etc…

Cliquez ici pour accéder à la formation d’initiation WordPress