Contact Form 7 est le plugin WordPress le plus connu et le plus utilisé en matière de gestion et d’insertion de formulaire de contacts.
Nous verrons à travers ce tutoriel comment installer et paramétrer le plugin Contact Form 7, comment créer un formulaire de contact et comment l’intégrer dans les pages de votre site WordPress.
Sommaire :
Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le prestataire WordPress idéal.
Trouver un expert WordPress
C’est quoi Contact Form 7 ?
La réponse est très simple : Contact Form 7 est un plugin pour WordPress qui permet de créer et de personnaliser des formulaires de contact que vos utilisateurs pourront utiliser pour vous envoyer des messages depuis votre site.
Quelques exemples d’application
Qui dit « formulaire de contact » ne dit pas forcément « contacter l’équipe ». On parle plutôt du fait que l’utilisateur peut entrer en contact avec une personne ou un service pour faire un échange de communication ou obtenir un résultat à sens unique. Il peut y avoir plusieurs applications aux formulaires. Voici quelques exemples :
- Contacter. Permet aux utilisateurs de contacter l’équipe du site, pour poser des questions, souligner un bug, envoyer des encouragements, effectuer une demande de SAV, etc.
- Générer un devis. Le formulaire demande tous aspects techniques et les souhaits au prospect. Vous recevez alors un e-mail avec les réponses ; et vous pourrez alors proposer un devis personnalisé.
- Recevoir un lien personnalisé ou une documentation comme un livre blanc. Il n’est pas rare qu’un site professionnel utilise cette méthode, qui consiste à demander l’adresse e-mail de l’utilisateur via un formulaire pour lui envoyer une brochure, un lien, une documentation, etc. Cela permet en général au site de pouvoir vérifier qui a téléchargé ou pas un document, mais aussi de créer une liste de prospects à contacter.
Comment fonctionne le plugin ?
Avant tout, le plugin Contact Form 7 doit être installé sur votre WordPress. Une fois que tout est configuré et que l’utilisateur se rend sur une page où le formulaire est actif, alors l’internaute le verra. Quand il a rempli tous les champs, ou du moins les champs obligatoires, le plugin traite les données et vous envoie un mail à vous et à l’utilisateur. C’est aussi simple que ça. Bien entendu, vous pourrez, depuis l’espace administration, indiquer les champs visibles pour l’utilisateur et paramétrer l’envoi des mails ainsi que les messages de confirmation et d’erreur.
Comment installer Contact Form 7 sur WordPress ?
Tout se passe dans l’espace administration de votre WordPress. Rendez-vous dans le menu Extensions > Ajouter. Dans la barre de recherche, saisissez « Contact Form 7 ». Le résultat de recherche devrait afficher un encart avec le bon module, portant le même nom. Cliquez sur le bouton « Installer maintenant », attendez que le processus d’installation fasse son travail. N’oubliez pas de l’activer.
Une fois l’installation du plugin Contact Form 7 terminée et le-dit plugin activé, vous pourrez remarquer l’ajout d’un onglet « Contact » dans le menu. C’est par ici que vos formulaires pour WordPress seront gérés.
Comment paramétrer Contact Form 7 ?
Avant tout, il faut faire le distinguo entre les paramètres de chaque formulaire et les paramètres globaux du plugin. Pour le premier point, nous les verrons lors de la création d’un formulaire. Concentrons-nous déjà sur les configurations du plugin, que l’on retrouve dans Contact > Intégration. Pourquoi « intégration » ? Tout simplement, car vous allez pouvoir intégrer plusieurs services externes au plugin.
Sécuriser ses formulaires avec reCAPTCHA
C’est la fonctionnalité la plus importante. En liant le plugin avec votre compte Google et en ayant au préalablement crée un reCAPTCHA, vous pourrez alors utiliser les services de Google pour s’assurer que l’utilisateur qui envoie le mail est bien un humain. Il est vraiment recommandé d’activer cette option le plus rapidement possible avant d’être débordé par la situation.
Gérer l’envoi des mails depuis un service externe
Une fois que l’utilisateur a validé son formulaire Contact Fom 7, le plugin envoie un mail. En principe, si vous louez un espace sur un serveur mutualisé chez OVH, IONOS ou Gandy par exemple, le serveur mail est déjà configuré. Suivant votre situation, ce ne sera pas toujours le cas. Vous pourrez donc utiliser un service tiers qui vous loue un accès STMP (service d’envoi de mail).
Le plugin Contact Form 7 permet de se connecter à deux d’entre eux : Sendinblue et Constant Contact.
Faire un e-marketing avec Sendinblue et Constant Contact
Comme dit juste au-dessus, les services Sendinblue et Constant Contact vous permettent de faire du marketing. Lorsque l’envoi est envoyé (via le service), l’adresse e-mail de l’utilisateur est récupérée, vous permettant alors de faire des listes de newsletters. Vous pourrez alors générer et envoyer des campagnes marketing de type « Newsletter » et voir les statistiques : le pourcentage de personnes qui ont reçu, ouvert, lu et supprimé le mail.
Attention, ce genre de pratique est à expliquer les RGPD, sous peine de lourdes amendes.
Intégrer un paiement dans le formulaire avec Stripe
Il est également possible d’intégrer le moyen de paiement Stripe à votre plugin Contact Form 7. Ainsi, vous pourrez demander à vos utilisateurs de payer avant de valider le formulaire. Nous ne rentrerons pas dans les détails dans cet article, mais sachez que la fonctionnalité existe.
Comment créer ou modifier un formulaire sur WordPress avec Contact Form 7 ?
Tout d’abord, rendez-vous dans le menu Contact > Formulaires de contact. Vous y retrouverez la liste de tous vos formulaires.
Pour en modifier un, il vous suffit de survoler la liste du bon formulaire et cliquer sur le lien « Modifier ». Pour en créer un nouveau, il vous suffit tout simplement de cliquer sur le bouton « Ajouter » situé en haut de la page.
Que vous soyez sur une création ou une modification de formulaire, l’interface et les options sont les mêmes. Voyons les onglets un par un.
Gérer les champs à afficher
L’onglet « Formulaire » est là pour gérer l’affichage des champs sur la page, dans un format HTML.
Cette partie est plutôt technique. Nous allons voir le fonctionnement ; si malgré tout, cela reste flou, vous pouvez faire appel à un développeur Web confirmé pour vous aider, en déposant gratuitement une annonce sur Codeur.com.
Tout d’abord, il faut savoir que la personnalisation proposée est écrite en HTML, avec l’utilisation de shortcodes typiques de WordPress. Dans le modèle qui vous est proposé par défaut, vous pouvez voir par exemple ce qui suit :
<label> Votre nom
[text* your-name] </label>Nous avons une balise HTML <label> qui contient le texte affiché à l’écran « Votre nom » puis le shortcode du champ : [text* your-name]. Ici, il désigne un champ de type « text » (textuel) identifié par le mot-clé « your-name ». Gardez cette notion de mot-clé en tête, nous allons en avoir besoin dans les prochains onglets.
Pour ces fameux shortcodes, il existe une aide pour le créer. Constatez la rangée de bouton :
Il s’agit ici des différents types de champs que vous pouvez intégrer dans votre formulaire. En cliquant dessus, l’assistant de création s’affiche dans une modale. Remplissez le formulaire d’aide à la création, puis cliquez sur « Insérer la balise ».
Cela va générer le shortcode à partir des éléments renseignés et le placer à la position de votre curseur dans l’éditeur de texte principal.
Il n’y a hélas pas de possibilité d’ouvrir l’assistance pour modifier un champ. Il vous faudra soit modifier le shortcode déjà en place si vous y arrivez : soit supprimer le champ et le recréer.
Gérer l’envoi du formulaire par e-mail
Toutes les configurations se trouvent dans l’onglet « E-mail ». Vous aurez les options suivantes :
- Pour : l’adresse e-mail qui recevra l’e-mail. Il est possible d’utiliser la variable
[_site_admin_email]pour utiliser l’adresse e-mail général liée à votre WordPress. - De : pour le format
nom utilisateur <email@domain.com>, renseigne le nom d’utilisateur ainsi que l’adresse e-mail. Là encore, il est possible d’utilisateur les variables respectives[_site_title]et[_site_admin_email]pour récupérer le nom du site et l’adresse e-mail qui y est lié. - Objet : sujet de l’email.
- En-tête additionnelles : les informations complémentaires et facultatives du mail ; comme les copies et les copies cachées.
- Corps du message : le contenu du corps du mail.
Pour intégrer la valeur d’un champ saisi par l’utilisateur dans les champs Objet et Corps du message, il faut utiliser une variable qui s’écrit de la façon suivante : crochet ouvert + identifiant du champ + crochet fermé. Exemple avec le champ que l’on a identifié « type-lits » dans l’onglet précédent, on va donc écrire : [type-lits].
Il est également possible d’envoyer un second e-mail à l’utilisateur qui a saisi le formulaire. Pour ce faire, il suffit de cocher le champ « Utiliser l’e-mail (2) ». Le fonctionnement est le même que le premier !
Gérer les notifications
On parle ici des retours faits par le site lors de la saisie des informations ; on est hors des e-mails ici. Par exemple, le message qui s’affiche pour confirmer que tout est validé et l’e-mail a été envoyé. Ou encore notifier quand un champ n’est pas valide, comme l’adresse e-mail vide ou dans un mauvais format.
Dans l’onglet « Messages », vous pourrez modifier librement les messages envoyés pour chaque situation. Il y a trop de champs pour tous les lister et les détailler ici, mais les descriptifs sont très clairs.
Options avancées
Enfin, il y a l’onglet « Réglages additionnel ». Il est très technique et permet d’aller plus loin dans la configuration du mail envoyé. Il est par exemple possible de :
- ne pas envoyer l’e-mail (utile pour le mode développement) ;
- ne pas sauvegarder les données du formulaire saisi ;
- ajouter du code Javascript sur les boutons ;
- etc.
Tout est expliqué sur la documentation dédiée.
Comment insérer un formulaire Contact Form 7 dans une page ou article WordPress ?
Une fois que le formulaire est prêt, vous pouvez récupérer le shortcode généré par le plugin, qui fait aussi office de code d’intégration du formulaire. Il est possible de le récupérer soit directement depuis le tableau de listing des formulaires, colonne « Code court » ; soit dans la page d’édition d’un formulaire, dans l’encart bleu sous le titre du formulaire.
Il vous suffit donc de copier ce shortcode et de le coller dans la page ou l’article de votre choix depuis l’éditeur de contenu.
- Rendez-vous sur la page ou l’article en question.
- Là où vous souhaitez ajouter le formulaire, insérer une commande avec « / » et choisissez « Code court ».
- Dans l’encart qui s’affiche, collez le shortcode copié précédement.
Enregistrez la page ou l’article puis rendez-vous dessus avec la partie publique du site internet. Vous pourrez alors constater que votre formulaire est en place.
En ce qui concerne la personnalisation du visuel, il va falloir mettre les mains dans le cambouis et toucher au CSS. Si vous ne savez pas le faire, vous pouvez soit apprendre, soit demander l’intervention d’un développeur WordPress en passant par Codeur.com !
Notre astuce pour créer un formulaire avec Contact Form 7 sur WordPress
Le plugin Contact Form 7 vous permet donc de créer rapidement des formulaires à intégrer sur vos pages ou vos articles WordPress et de gérer les mails qui seront envoyés. Que vous en ayez un seul ou des dizaines, cet outil sera un réel allié.
Si l’installation, la configuration ou l’utilisation du plugin vous pose un problème, faites appel à un développeur spécialiste de WordPress pour vous aider dans la mise en place et la gestion du plugin Contact Form 7. Sur Codeur.com, le dépôt d’annonce est gratuit et les réponses sont rapides afin de vous permettre de trouver le prestataire idéal pour vous accompagner.
