brand-lws-red brand-lws-white
Tutoriels

WordPress
time_read32mn de lecture

Comment créer un formulaire de contact simple dans WordPress ?

28 février 2022

Comment créer un formulaire de contact simple dans WordPress ?

Pour créer un formulaire de contact simple dans WordPress, vous avez besoin de suivre certaines étapes. Que vous veniez d’installer WordPress sur votre hébergement web ou que votre site existe déjà, avoir un formulaire de contact est important.

Pour les sites générés avec le logiciel open-source WordPress, la création de formulaires de contact est facilitée par l’installation de certaines extensions. Sur le répertoire officiel des plugins WordPress, il existe plusieurs extensions génératrices de formulaires de contact. Dans cet article, vous allez apprendre à créer des formulaires de contact simples avec le plugin Contact Form 7.

Pourquoi créer un formulaire de contact ?

Il existe de nombreux avantages pour lesquels vous devez avoir un formulaire de contact sur votre site :

  • Il est le seul moyen dont vont se servir vos visiteurs pour vous contacter facilement et depuis le site
  • Vous avez la possibilité de limiter les courriels indésirables en y ajoutant des mesures de sécurité. Vous pouvez notamment protéger ce formulaire de contact de spams en utilisant Google reCAPTCHA.
  • Vos visiteurs ont la possibilité de vous proposer des partenariats sans avoir à rechercher votre adresse e-mail.
  • Tous les messages sont envoyés dans une seule boîte de réception. Donc, vous avez la possibilité de gérer et répondre à tous les messages rapidement
  • Sur les boutiques en ligne, les formulaires de contact permettent à vos clients de vous adresser leurs difficultés afin de leur trouver rapidement des solutions
  • Un formulaire de contact bien configuré permet au propriétaire du site de recevoir des messages avec toutes les informations du correspondant. Cela permet de situer rapidement son problème et trouver une solution rapide.

Créer un formulaire de contact simple dans WordPress

Lorsque vous souhaitez avoir un formulaire de contact sur votre site, pensez premièrement à l’extension Contact Form 7. Ce dernier est livré avec plusieurs fonctionnalités gratuites. Vous avez notamment :

  • La possibilité de personnaliser les champs du formulaire
  • La facilité de créer plusieurs formulaires de contact
  • Des fonctionnalités sont faciles à comprendre et à configurer. Donc, l’extension peut être utilisée aussi bien par les débutants que les professionnels
  • L’opportunité de protéger votre formulaire en utilisant un système de sécurité tel que l’ajout d’un reCAPTCHA
  • Possibilité de gérer et modifier les formulaires déjà créés
  • L’extension fournit un code d’intégration. Vous pouvez donc insérer le formulaire de contact à n’importe quelle section de votre site
  • Contact Form 7 est utilisé par des millions d’utilisateurs WordPress et est compatible avec la majorité d’extensions de base de ce CMS
  • Enfin, vous avez la possibilité de lier cette extension à des modules de marketing tiers.

Installer le plugin Contact Form 7

La première chose à faire est d’installer le plugin Contact Form 7 sur votre site. Pour cela, connectez-vous dans votre espace d’administration WordPress et défilez vers la section « Extensions › Ajouter ». Cela vous redirige vers le répertoire officiel des extensions WordPress. Si vous avez des difficultés à vous connecter à votre tableau de bord WordPress, lisez cet article : Comment accéder à l’espace d’administration WordPress ?.

Pour retrouver rapidement l’extension et gagner du temps, vous pouvez vous servir de la zone de recherche présente sur cette interface. Ce que vous avez à faire est d’indiquer le mot-clé « Contact Form 7 » et attendre les résultats.

Une fois que vous l’avez trouvé, cliquez sur le bouton « Installer maintenant » de ce plugin.

installer contact form 7

Le processus d’installation peut prendre quelques secondes. Une fois terminé, vous devez cliquer sur le bouton « Activer ».

activer contact form 7

Après activation, une nouvelle option s’ajoute dans votre menu de gauche du tableau de bord. Normalement, elle est désignée sous le terme : « Contact ».

Utiliser le plugin Contact Form 7

À cet instant, vous avez installé le plugin Contact Form 7 avec succès. Ainsi rendez-vous dans votre tableau de bord puis dans « Contact › formulaires de contact ».

créer un formulaire de contact simple dans WordPress

Une fois cela fait, vous serez redirigé vers une nouvelle interface avec tous les formulaires actuellement créés avec Contact Form 7. Ils sont classés dans un tableau reprenant leur titre, le code court d’intégration, le créateur du formulaire et enfin la date de création.

Immédiatement après son installation, ce plugin embarque avec lui un formulaire de contact par défaut. Et donc, vous pouvez soit le modifier, le supprimer et en créer un nouveau, ou simplement l’abandonner et créer votre propre formulaire.

formulaire de contact par defaut

Comme pour tous les formulaires que vous allez créer, ce formulaire de contact par défaut possède un code qui permet de l’intégrer à votre site.

Pour ajouter un nouveau formulaire, rendez-vous en haut de la page et cliquer sur le bouton « Ajouter ».

ajouter un nouveau formulaire

Une fois cela fait, une nouvelle interface vous sera présentée (référence image ci-dessous).

créer un nouveau formulaire de contact

Tout ce que vous avez à faire est de renseigner le nom ou le titre du formulaire et de cliquer sur le bouton « Enregistrer ». Après sa création, ce formulaire prend le même aspect que le formulaire par défaut. Vous devez de ce fait penser à le personnaliser.

Personnaliser un formulaire de contact

La personnalisation du formulaire de contact permettra l’ajout ou le retrait de certains champs. Contact Form 7 vous permet de faire la personnalisation avancée du formulaire afin qu’il réponde complètement à vos besoins.

modifier un formulaire de contact

Afin de faire vos modifications, vous devez vous rendre dans le tableau reprenant tous les formulaires. Ensuite, vous devez défiler votre curseur vers le formulaire à modifier. Cliquez sur « modifier » parmi les options proposées. Vous serez amené à personnaliser quatre onglets nécessaires. Il s’agit notamment de l’onglet formulaire, e-mail, messages et enfin réglages additionnels.

Personnaliser l’onglet formulaire

personnaliser l'onglet formulaire de contact form 7

Notez que pour ce premier onglet, toutes les modifications seront axées sur l’architecture du formulaire. Comme sur l’image ci-dessus, vous aurez un aperçu de votre formulaire représenté par une succession de codes correspondant chacun à un champ.

Par défaut, le formulaire comporte les champs « votre nom, votre adresse e-mail, l’objet du message, le message et le bouton envoyer ».

champ d'un formulaire de contact

Dans un formulaire de contact, un champ correspond à une association d’un titre et d’une balise. Chaque champ s’ouvre avec une balise HTML d’ouverture désignée ‹label› et se ferme avec une autre balise ‹label/› de fermeture. Le titre du champ se trouve entre les deux balises.

Vous avez juste au-dessus du formulaire, plusieurs balises que vous pouvez ajouter à votre formulaire de contact.

champ de balises

Pour constituer un champ, commencez par saisir la balise HTML ouvrante. Ensuite, indiquez le titre du champ. Puis, rendez-vous dans la section de générateurs de balises et choisissez la balise correspondante.

inserer un champ au formulaire

Si vous souhaitez ajouter un champ texte par exemple à votre formulaire, vous devez choisir la balise texte. Une fois cela fait, un tableau contextuel apparaît avec quelques options (référence image ci-dessus).

  • Type de champ : en cochant la case champ obligatoire, cela signifie que vos visiteurs doivent remplir obligatoirement ce champ sans quoi leurs messages ne seront pas envoyés.
  • Nom : il s’agit simplement du nom qui va désigner la balise dans le champ. Vous pouvez le personnaliser comme bon vous semble.

Ces deux options sont les plus importantes à remplir. Les autres peuvent garder leur configuration par défaut. Une fois terminé, cliquez sur « Insérer la balise ». De la même manière, si vous désirez récolter les numéros de visiteurs, vous pouvez ajouter la balise « tel ». Et la façon de les ajouter reste la même. Dans tous les cas, vous devez suivre les étapes nécessaires pour rendre votre balise opérationnelle.

Après avoir effectué toutes les modifications, cliquez sur le bouton « Enregistrer » pour appliquer ces changements.

Configurer l’onglet E-mail

Cet onglet permet de personnaliser le modèle de messages qui seront envoyés. Il vous permet de renseigner l’adresse e-mail du destinataire qui va recevoir les messages qui seront envoyés via le formulaire de contact.

Modifier le formulaire de contact

Les configurations que vous remarquez quand vous accédez à l’onglet e-mail le sont par défaut.

  • Pour : ce champ vous permet de déterminer l’adresse e-mail du destinataire, vous pouvez modifier cette configuration par défaut et ajouter votre propre adresse.
  • De : définissez l’e-mail de l’expéditeur
  • Objet : vous pouvez aussi modifier cette configuration par défaut et en ajouter une nouvelle.
  • Corps du message : cette section vous présente un exemple des e-mails que vous allez recevoir selon les configurations actuelles de Contact Form 7…

Après toutes les modifications, vous devez cliquer sur le bouton « Enregistrer », afin d’appliquer ces changements. Par ailleurs, cette extension permet de configurer une livraison de réponses automatiques.

Modifier le formulaire de contact

L’option « E-mail (2) » possède en pratique les mêmes éléments à configurer que l’e-mail principal. Vous pouvez utiliser cette section si vous souhaitez que vos visiteurs reçoivent une réponse personnalisée après la soumission de leurs messages. Ceci est idéal si, votre site reçoit beaucoup de visites et que vous recevez beaucoup de messages à la fois.

Dans tous les cas, faites la personnalisation selon vos choix et cliquez sur le bouton « Enregistrer ».

Personnaliser l’onglet message

Cet onglet vous permet de configurer des réponses que le visiteur reçoit après avoir envoyé le formulaire. Vous avez toute une liste de réponses à personnaliser.configurer la reponse aprés l'envoi du formulaire

Voici quelques cas de figure où il est nécessaire de configurer ces messages qui apparaissent après remplissage du formulaire de contact :

  • Le formulaire n’a pas été correctement rempli : vous pouvez personnaliser le message indiquant au visiteur de recommencer le remplissage ou ajouter ce qui manque
  • Le visiteur a oublié de renseigner un champ obligatoire : vous pouvez aussi configurer un message qui indiquera à ce visiteur qu’il doit obligatoirement remplir ce champ pour envoyer son formulaire
  • Le visiteur a oublié de cocher les cases nécessaires : il pourra recevoir un message lui indiquant de cocher les cases correspondantes avant d’envoyer son formulaire
  • Le message est envoyé avec succès : le visiteur verra à la place du formulaire un message lui indiquant que tout s’est déroulé avec succès. De cette façon, il est sûr que sa communication a été envoyée

Pour une meilleure utilisation du formulaire de contact, prenez votre temps pour configurer ces différents types de messages. Gardez à l’esprit que le visiteur est seul devant le formulaire. Parfois, il s’agit d’une communication très importante et que le visiteur a fait une erreur mineure, son message est bloqué. Il y a donc là une nécessité de ne pas négliger ce côté. Après avoir fait toutes vos modifications, n’oubliez pas d’enregistrer.

Configurer l’onglet réglages additionnels

reglages additionnels

Cet onglet sera utile si vous souhaitez faire des personnalisations avancées de votre formulaire de contact. De plus, la manipulation de cette section requiert une expérience avérée dans l’utilisation de codes.

Dans tous les cas, les trois premiers onglets sont ceux dont il faut passer son temps à configurer. Que l’onglet « réglages additionnels » soit personnalisé ou pas, votre formulaire de contact est déjà fonctionnel.

Comme pour les autres onglets, n’oubliez pas de cliquer sur « enregistrer », pour appliquer les modifications. Bravo, votre formulaire est désormais opérationnel et il ne vous reste qu’à l’intégrer.

Intégrer un formulaire de contact

Quel que soit votre thème visuel, WordPress vous donne la possibilité d’intégrer votre formulaire à n’importe quelle section. Vous pouvez par exemple vous servir des widgets que comporte votre thème pour publier ce formulaire sur votre site.

Mais idéalement, il est recommandé de créer une page dédiée au contact. Cela a l’air d’être plus professionnel, mais permet aussi à vos visiteurs de vous contacter rapidement.

À cet instant, il est évident que vous avez déjà créé une page de contact destinée à contenir ce formulaire. Pour faire l’intégration, vous aurez besoin d’utiliser un code qui accompagne le formulaire.

Pour cela, rendez-vous dans votre tableau de bord WordPress et défilez jusqu’à la section « pages ». Ensuite, appuyez sur la sous-option « Toutes les pages ». Une fois cela fait, vous serez redirigé vers une nouvelle interface vous présentant toutes les pages de votre site.

integrer le formulaire de conatct à votre site

Vous devez maintenant vous rendre sur la page de contact et cliquer sur le bouton « Modifier ». Une fois cela fait, vous serez redirigé sur l’interface d’édition de la page.

Publier le formulaire de contact

Dès que vous êtes sur l’interface d’édition, copiez et collez le code court du formulaire de contact sur cette page. Vous devez idéalement ajouter ce code au début de la page. De cette façon, il n’y aura des espaces inutiles entre le titre de la page et le formulaire.

Une fois terminé, cliquez sur le bouton « mettre à jour ». C’est terminé, vous pouvez désormais retrouver le formulaire sur la page de contact.

page de contact

Mais avant d’achever, testez vous-même ce formulaire ou demandez à quelqu’un de le faire pour vous. Si vous avez suivi tous les étapes avec attention, votre formulaire sera fonctionnel.

Toutes nos félicitations, désormais, vous êtes en mesure de créer un formulaire de contact simple dans WordPress. Notez que toutes les étapes sont importantes afin que votre formulaire soit opérationnel. Si vous avez des questions, utilisez la section commentaires pour les partager avec nous.

Avatar de l'auteur

Auteur de l'article

Joseph

Joseph est rédacteur web depuis quatre ans. Ses thématiques préférées sont le digital et le web marketing et l’e-commerce. La persévérance, l’assiduité et le courage font partie de sa méthode de travail. C'est ce qui lui permet d'affronter n’importe quel sujet.

Avis client de l'hébergeur LWS

Nos avis Trustpilot Nos avis Hostadvice Nos avis sur avis.lws.fr
Avis trustpilot 30/04/2022

LWS l'hébergeur par excellence !

LWS est pour moi l'hébergeur par excellence, que cela soit au niveau de l'hébergement qui est très performant, les mails qui sont d'une qualité professionnelle et de la gestion du domaine facile à comprendre.

PauseGreen

Avis hostadvice 27/04/2022

Super, au top !

Au top, prix attractif. Service très rapide et réactif. Je l'ai même personnellement recommandé à des proches. La vie est bien plus facile avec LWS

Masset Eliot

Avis avislws 26/04/2022

Support

Clair, efficace, rapide et à tarif abordable. J'ai maintenant un site superbe à mon image, puisque je le fais moi-même. L'équipe technique est au top, j'ai une réponse en 20 minutes, cela change d'autres hébergeurs pourtant plus connu.

Lady Whip

Avis hostadvice 24/04/2022

Bravo et merci

Bravo et merci aux équipes techniques pour leur réactivité et leur professionnalisme depuis plus de 10 ans chez eux et de nombreux sites !!! Merci

Olivier Delmas

Avis trustpilot 23/04/2022

Je suis très satisfait.

J'ai commandé un hébergement pour le site d'une association. Tout s'est passé très rapidement et sans la moindre embuche. La tarification est attractive et me parait très claire. Le panneau d'administration de l'hébergement est facile à utiliser et à comprendre. Je n'ai pas encore installé Wordpress car le contenu n'est pas prêt mais ce sera la prochaine étape et je suis très confiant. Merci !

Pierre-André Liné

Avis avislws 20/04/2022

Un service technique excellent

Je suis client chez LWS depuis 2011 avec une boutique OSCommerce qui tourne comme une horloge depuis cette date sur un hébergement mutualisé. La disponibilité de la boutique est très proche de 100%. Concernant les rares problèmes rencontrés en huit ans, j’ai eu à chaque fois un technicien compétent qui a résolu le problème très rapidement et efficacement. Je suis en train de migrer sur une plateforme Pretashop sur un VPS, avec l’offre LWS Debian 9 et Prestashop. Un technicien m’a grandement aidé pour finaliser l’installation de la boutique lors de la mise à jour vers la dernière version de Prestashop 1.7 qui posait problème. Je suis très satisfait de LWS, et ce sur la durée : réponses et réactions rapides et efficaces. Je recommande cet hébergeur et encore merci.

Alain

Avis trustpilot 16/04/2022

Une expérience jamais égalée !

Étant Développeur Web & Mobile Full-Stack depuis plus de 5 ans déjà, j'ai rarement eu un service client aussi rapide et efficace. Sans compter la qualité du service en ligne. Je recommande VIVEMENT LWS !

Chris KOUAKAM

Avis hostadvice 12/04/2022

Très bon hébergeur

J'ai un serveur VPS chez eux et je n'ai aucun problème, dès qu'il y a un problème le service technique est la pour vous aider et répond assez rapidement à votre demande. Je recommande vivement cet hébergeur.

Vanden Cruyce

Avis avislws 09/04/2022

Je suis ravie

Je suis ravie d'être avec LWS sur tous les plans, je remercie les Techniciens (Fabrice, Omar, Sandy-Mahitsison) depuis plus de 8 ans j'ai évolué avec LWS et toujours soutenue. Une véritable relation humaine même si les questions ou nos inquiétudes ne correspondent pas à leurs missions, ils sont là pour nous répondent et nous rassurent. Mon site c'est mon travail ma source de revenue donc il sont mes partenaires ! les travailleurs de l'ombre merci à eux ! Merci LWS

L'atelier-and-Co

Commentaires (0)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.