Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment créer un formulaire de contact dans WordPress (étape par étape)

L’un de nos amis a récemment raconté comment, lorsqu’il a lancé son premier site WordPress, il a publié son e-mail sur la page de contact pour rester en contact avec les internautes. Grosse erreur. Les indésirables étaient interminables, et il a manqué des messages importants enfouis dans sa boîte réception.

C’est alors qu’il s’est rendu compte qu’il était temps de créer un formulaire de contact digne de ce nom.

Et il n’est pas le seul – nous entendons cela tout le temps chez WPBeginner. L’une des questions les plus courantes que nous recevons est la suivante : “Comment ajouter un formulaire de contact à mon site ?”.

Bien que WordPress soit puissant, il n’inclut pas de formulaires de contact dans sa version standard. De nombreux propriétaires de sites se débattent donc avec une configuration complexe ou abandonnent complètement.

Nous avons testé de nombreuses extensions de formulaires au fil des ans, et WPForms s’impose systématiquement comme la solution la plus simple et la plus fiable. Dans ce guide, nous allons vous afficher exactement comment créer un formulaire de contact professionnel sur WordPress – aucun codage n’est nécessaire. 🚀

How to create a contact form in WordPress (step by step)

Pourquoi avez-vous besoin d’un formulaire de contact WordPress ?

Vous vous demandez peut-être pourquoi vous avez besoin d’un formulaire de contact ; ne puis-je pas simplement ajouter mon adresse e-mail sur mon site pour que les gens puissent m’envoyer un e-mail ?

C’est une question très fréquente chez les débutants, car ils craignent que l’ajout d’un formulaire de contact nécessite des connaissances en codage.

Heureusement, vous pouvez utiliser une extension WordPress pour ajouter simplement un formulaire de contact à votre site sans aucune connaissance en codage.

Vous trouverez ci-dessous les trois principales raisons pour lesquelles un formulaire de contact est préférable au fait de coller votre adresse e-mail sur une page.

  • Protection contre le spam – Les robots anti-spam parcourent régulièrement les sites web à la recherche de l’adresse e-mail identifiée mailto :. Lorsque vous publiez votre adresse e-mail sur le site, vous commencez à recevoir un grand nombre d’e-mails indésirables. En revanche, votre formulaire de contact peut bloquer les spams de formulaire de contact et arrêter presque tous les e-mails indésirables.
  • Des informations cohérentes – Lors de l’envoi d’un e-mail, les gens ne vous envoient pas toujours toutes les informations dont vous avez besoin. Avec un formulaire de contact, vous pouvez indiquer à l’utilisateur exactement les informations dont vous avez besoin, comme son numéro de téléphone, son budget, les détails de son projet, et bien plus encore.
  • Gagner du temps – Les formulaires de contact vous aident à enregistrer plus de temps que vous ne pouvez l’imaginer. Outre la cohérence des informations, vous pouvez également utiliser les confirmations de formulaire pour indiquer aux utilisateurs/utilisatrices les prochaines étapes à suivre. Par exemple, il peut regarder une vidéo ou attendre jusqu’à 24 heures pour obtenir une responsive, afin qu’ils ne vous envoient pas plusieurs demandes.

Dans cette optique, nous allons vous montrer étape par étape comment créer facilement un formulaire de contact sur WordPress. Voici toutes les étapes par lesquelles nous allons passer dans ce guide :

Entrons dans le vif du sujet !

Étape par étape. Choisir la meilleure extension de formulaire de contact WordPress

La première chose à faire est de choisir une extension de formulaire de contact WordPress.

Bien qu’il existe plusieurs extensions de formulaires de contact WordPress gratuites et payantes parmi lesquelles vous pouvez choisir, nous utilisons WPForms sur notre site et pensons qu’il s’agit de la meilleure option sur le marché.

Voici les trois raisons pour lesquelles nous pensons que WPForms est le meilleur :

  1. C’est l’extension de formulaire de contact la plus conviviale pour les débutants. Vous pouvez utiliser le constructeur drag-and-drop pour créer facilement un formulaire de contact en quelques clics.
  2. WPForms Lite est 100 % gratuit, et vous pouvez l’utiliser pour créer un simple formulaire de contact (plus de 6 millions de sites l’utilisent).
  3. Lorsque vous êtes prêt pour des fonctionnalités plus puissantes, alors vous pouvez mettre à niveau vers WPForms Pro.

Pour en savoir plus, vous pouvez consulter notre Avis détaillé sur WPForms.

Maintenant que nous avons opté pour l’extension de formulaire de contact, allons-y et installons-la sur votre site.

Étape par étape. Installer une extension de formulaire de contact sur WordPress

Pour ce tutoriel, nous utiliserons WPForms Lite car il est gratuit et facile à utiliser.

Vous pouvez installer ce plugin sur votre site en vous connectant à votre Tableau de bord WordPress et en allant dans Plugins ” Ajouter un nouveau module.

Ensuite, dans le champ de recherche, tapez “WPForms” et cliquez sur le bouton “Installer maintenant”.

Install the WPForms plugin

Cela installera automatiquement l’extension sur votre site.

Ensuite, vous devez activer l’extension en cliquant sur le bouton ” Activer “.

Activate the WPForms plugin

Si vous ne voyez pas le menu des extensions ou si vous souhaitez des instructions plus détaillées, vous pouvez consulter notre guide sur l’installation d’un plugin WordPress.

Étape par étape. Créer un formulaire de contact dans WordPress

Maintenant que vous avez activé WPForms, vous êtes prêt à créer un formulaire de contact dans WordPress.

Pour ce faire, naviguez vers WPForms ” Tous les formulaires dans votre panneau d’administration WordPress, puis cliquez sur le bouton ” Ajouter une nouvelle “.

Add a new WPForms form

Cela ouvrira la bibliothèque de modèles de constructeurs de formulaires par glisser-déposer de WPForms. Commencez par donner un nom à votre formulaire de contact, puis sélectionnez la façon dont vous allez créer votre formulaire : en utilisant un canevas vierge, un constructeur de formulaires IA, ou un modèle prédéfini.

Si vous souhaitez utiliser WPForms IA, vous pouvez survoler la case “Generate With IA” et cliquer sur le bouton “Generate Form”.

Generate form with AI

Sur l’écran suivant, vous pouvez soit sélectionner l’un des exemples de prompt disponibles, soit ajouter votre propre prompt personnalisé pour l’IA.

Il génère alors le formulaire pour vous, que vous pouvez voir dans la zone de prévisualisation.

WPForms AI forms in action

Pour choisir un modèle, il suffit de survoler celui que vous souhaitez utiliser et de cliquer sur le bouton “Utiliser le modèle”.

WPForms Lite est livré avec plus de 60+ modèles de formulaires gratuits à choisir. Vous pouvez utiliser la barre de recherche pour réduire vos choix si nécessaire.

Pour cet exemple, nous allons sélectionner le modèle “Formulaire de contact simple”. Il ajoutera automatiquement les champs Nom, E-mail et Message.

Choose a WPForms form template

Vous pouvez cliquer sur n’importe quel champ du formulaire pour le modifier.

Lorsque vous cliquez sur un champ de formulaire, un panneau “Options du champ” s’affiche sur la gauche, dans lequel vous pouvez apporter des modifications.

Make edits in the field options panel

Vous pouvez également utiliser votre souris pour faire glisser les champs et en modifier l’ordre.

Voici un exemple :

Change form fields order

Si vous souhaitez ajouter un nouveau champ, il vous suffit de sélectionner l’un des champs disponibles dans la colonne latérale gauche.

Vous pouvez le faire glisser sur votre formulaire ou cliquer dessus, et il sera automatiquement ajouté à votre formulaire.

Drag and drop new form fields

🧑‍💻 Astuce d’initié : En plus du Constructeur de formulaires alimenté par l’IA, WPForms a également :

  • Choix IA : Générez automatiquement des options pour des champs tels que les choix multiples, les boutons radio, les cases à cocher et les menus déroulants.
  • Calculs IA : Générez instantanément des formules de calcul alimentées par l’IA pour des champs tels que la taxe sur les ventes, éliminant ainsi le besoin de calculs manuels.

Cela dit, notez qu’il s’agit de fonctionnalités Pro disponibles avec les offres payantes de WPForms.

Lorsque vous aurez fini de personnaliser votre formulaire, veillez à cliquer sur le bouton “Enregistrer”.

Étape par étape. Configurer les notifications et confirmations des formulaires WordPress

Maintenant que vous avez créé votre formulaire de contact, il est important que vous configuriez correctement les options de notification et de confirmation du formulaire.

La confirmation du formulaire est ce que l’internaute voit après avoir envoyé le formulaire. Il peut s’agir d’un simple message de remerciement, d’une page sur laquelle vous avez téléversé des PDF téléchargeables, ou de tout autre élément de votre choix.

La notification de formulaire est l’e-mail que vous recevez après que quelqu’un a soumis le formulaire de contact sur votre blog WordPress.

Pour personnaliser le message de confirmation, cliquez sur l’onglet “Paramètres”, puis sur l’onglet “Confirmations” dans le Constructeur de formulaires.

Il existe déjà un message de remerciement par défaut.

Toutefois, vous pouvez personnaliser ce message dans la case “Message de confirmation” si vous le souhaitez.

Go to form confirmation message

Si vous souhaitez rediriger les utilisateurs/utilisatrices après une entrée de formulaire réussie au lieu d’afficher un message, sélectionnez “Aller à l’URL” dans le menu déroulant “Type de confirmation”.

Vous saisirez ensuite l’URL où vous souhaitez rediriger les utilisateurs/utilisatrices.

Redirect to page after confirmation

Si vous apportez des modifications à ce niveau, n’oubliez pas de cliquer sur le bouton “Enregistrer”.

Confirmez ensuite que les Réglages des notifications du formulaire sont corrects. Il vous suffit de cliquer sur l’onglet “Notifications” dans le même menu “Réglages”.

La meilleure partie de WPForms est que les réglages par défaut sont idéaux pour les débutants. Lorsque vous allez dans les réglages de la notification, tous les champs seront pré-remplis dynamiquement.

Go to form notifications tab

Par défaut, les notifications sont envoyées à l’e-mail de l’administrateur que vous avez défini lors de la création de votre site.

Si vous souhaitez l’envoyer à une adresse e-mail personnalisée, vous pouvez la modifier. Si vous souhaitez envoyer la notification à plusieurs e-mails, séparez chaque adresse e-mail par une virgule.

Le champ “Nom de l’e-mail” est pré-rempli avec le nom de votre formulaire. Le champ “Nom de l’expéditeur” est automatiquement rempli avec le nom de votre compte.

Change form email notifications

Lorsque vous répondez à la demande du formulaire, la réponse est envoyée à l’adresse e-mail que l’utilisateur a utilisée pour remplir le formulaire de contact.

N’oubliez pas de cliquer sur le bouton “Enregistrer” si vous effectuez des modifications ici.

Si vous souhaitez envoyer l’e-mail de votre formulaire à plusieurs personnes ou à différents services, vous pouvez consulter notre guide sur la création d’un formulaire de contact avec plusieurs destinataires.

Si vous rencontrez des problèmes pour recevoir des e-mails de formulaire, vous pouvez consulter notre guide sur la façon de résoudre les problèmes de WordPress n’envoyant pas d’e-mail.

Étape par étape. Ajout d’un formulaire de contact WordPress sur une page

Il est maintenant temps d’ajouter votre formulaire à votre site WordPress.

Vous pouvez l’ajouter à une page de contact existante ou créer une nouvelle page dans WordPress.

Si vous souhaitez créer une nouvelle page de formulaire de contact, il vous suffit d’aller dans Pages ” Ajouter nouveau, puis de donner un nom à votre page.

Nous utiliserons le bloc WPForms pour ajouter le formulaire à une page. Il suffit de cliquer sur le bouton d’ajout de modules “Plus” et de rechercher “WPForms”.

Ensuite, vous pouvez cliquer sur le bloc “WPForms”.

Create a new contact page and add the WPForms block

Le bloc WPForms apparaît désormais dans la zone de contenu de votre page.

Vous devez cliquer sur le menu déroulant pour sélectionner le formulaire que vous avez créé précédemment.

Select contact form from drop down

WPForms chargera la Prévisualisation de votre formulaire de contact à l’intérieur de l’éditeur. Vous pouvez maintenant cliquer sur le bouton “Publier” ou “Mettre à jour” pour enregistrer votre formulaire.

Pour plus de détails, vous pouvez consulter notre guide sur l’intégration des formulaires dans WordPress.

Maintenant, vous pouvez visiter votre site pour le voir en action. Voici à quoi ressemble le formulaire sur un exemple de page de contact WordPress:

WordPress contact form example

Si vous vouliez seulement ajouter le formulaire de contact à la page, vous avez terminé. Félicitations.

Cela dit, WPForms est également livré avec un shortcode de formulaire de contact WordPress. Vous pouvez l’utiliser en visitant WPForms ” All Forms et en copiant le shortcode à côté de votre formulaire.

Copying the form shortcode

Il vous suffit ensuite d’ouvrir la page où vous souhaitez l’ajouter, de cliquer sur le bouton d’ajout de blocs “Plus” et de rechercher “Shortcode”.

Cliquez ensuite sur le bloc “Shortcode”.

Add shortcode block

Ensuite, collez le code court que vous avez copié ci-dessus dans la boîte.

Ensuite, vous pouvez cliquer sur “Mettre à jour” ou “Publier”, et votre formulaire de contact sera en direct sur votre site, comme ci-dessus.

Paste form shortcode and save

Pour en savoir plus sur les shortcodes, vous pouvez consulter notre guide ultime sur l ‘ajout d’un shortcode dans WordPress.

Étape par étape. Ajout d’un formulaire de contact WordPress dans une colonne latérale

WPForms est également livré avec un widget de formulaire de contact WordPress que vous pouvez utiliser pour ajouter votre formulaire de contact à une colonne latérale ou à toute autre zone prête à recevoir des widgets dans votre thème WordPress.

Pour ce faire, vous devez vous rendre dans Apparence ” Widgets, puis cliquer sur l’icône du bloc d’ajout ” Plus ” dans la zone du widget où vous souhaitez ajouter votre formulaire.

Add new widget block

Ensuite, recherchons “WPForms”.

Ensuite, vous pouvez cliquer sur le bloc ” WPForms ” pour l’ajouter à votre barre latérale.

Add WPForms widget block

Ensuite, vous devez sélectionner votre formulaire de contact dans la liste déroulante.

Une prévisualisation de votre formulaire s’affichera automatiquement.

Select form from drop down

Cliquez ensuite sur le bouton “Mettre à jour” pour enregistrer vos modifications.

Maintenant, vous pouvez visiter votre site et voir votre formulaire de contact en direct dans votre colonne latérale ou dans une autre zone de widgets.

Sidebar contact form example

Pour en savoir plus sur les widgets, consultez notre guide sur l ‘ajout et l’utilisation de widgets dans WordPress.

Astuce Bonus 🌟 : Faire passer votre formulaire de contact WordPress au niveau supérieur

Outre la création de formulaires de contact simples, WPForms Pro est livré avec plus de 2 000+ modèles de formulaires prédéfinis que vous pouvez utiliser pour créer rapidement tout type de formulaire WordPress dont vous avez besoin.

Il existe des fonctionnalités puissantes telles que la logique conditionnelle, les enquêtes et les sondages, la collecte de signatures électroniques, l’abandon de formulaires, les données de géolocalisation, les codes de coupon personnalisables, et bien d’autres encore.

De plus, il vous permet d’accepter facilement les paiements en ligne via Stripe, PayPal, Authorize.Net et Square. Même la version gratuite de WPForms vous permet de collecter des paiements via Stripe.

Sans oublier qu’il s’intègre à des milliers d’outils marketing et commerciaux tels que Google Sheets, HubSpot et bien d’autres pour vous aider à rationaliser votre flux de travail.

WPForms a également ajouté des outils de personnalisation de formulaire comme des pages d’atterrissage de formulaire, des formulaires conversationnels, des formulaires de prospects et des formulaires de calculatrices, qui vous permettent d’ajouter des formulaires interactifs à votre site sans les coûts élevés.

WPForms Full Page Conversational Forms Example

Pour plus de conseils, vous pouvez consulter notre guide sur la création de formulaires plus interactifs dans WordPress.

🧑‍💻 Astuce d’initié : Vous rencontrez des erreurs de formulaire de contact ? Laissez WPBeginner Pro Services vous aider ! Nous offrons un support WordPress d’urgence abordable pour dépanner et corriger rapidement les erreurs de formulaire de contact.

Gagnez du temps, bénéficiez d’une tranquillité d’esprit et assurez-vous que vos clients/clientes peuvent vous joindre. Planifiez des services de support WordPress dès aujourd’hui !

Tutoriel vidéo

Si vous apprenez en regardant, vous apprécierez notre tutoriel vidéo sur la création d’un formulaire de contact sur WordPress :

Subscribe to WPBeginner

Nous espérons que cet article vous a aidé à créer un formulaire de contact simple sur WordPress. Vous pouvez également consulter nos choix d’experts des meilleurs constructeurs de formulaires en ligne ou notre guide ultime pour utiliser les formulaires WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

159 commentairesLeave a Reply

  1. I use WP Forms since I won a full license in your giveaway. I’ve never won anything before, and then I received a full license for WP Forms from you for free. I have to say, it’s a great plugin.

  2. Hello, I followed the steps howevert he contact page does not appear on the webite. How should I proceed as I have attempted it numerous times now.

  3. Hello, thanks for the help. You mentioned that the email address can be changed. Can you please share how this is done and where?

    Thanks

  4. I followed all the steps but for whatever reason, this form doesn’t work. I uninstalled and installed it few times. I followed exactly as on video but when sending a test contact form I don’t receive any emails or notifications.

  5. I followed your video to put a contact form on my site and you made it easy and enjoyable. I noticed that you had your address and contact information on the side. How do I put my contact information there? Thank you in advance.

    Eric

    • It would depend on the form plugin you decide to use and there are different locations for that customization.

      Admin

  6. I fid all these but when I tried to test it, I didn’t get any notification in my mail from my website. Please what could be the cause?

    Thank you

  7. Wow! It sure doesn’t get any easier than that!

    Great instructions! Nice slow talking too, easy to understand.

    Keep up the GREAT work!

  8. I’ve installed WPForms Lite and activated it but it doesn’t show up in the side menu bar in WordPress. I can see it in the Plugins but I don’t have an option to select settings just deactivate.
    So I’m unable to access the plugin at all. Any suggestions?
    Cheers, Geoff

    • You may want to try reinstalling the plugin in case there was a hiccup with your download. Otherwise, please reach out directly to WPForms’ support and they would be able to assist.

      Admin

  9. I am getting very frustrated with your tutorials. They seem to be out of date because the view that I get is different than what you are showing. Please update these tutorials.

  10. I just installed WPForms and created a contact form for my website.

    When I visit the contact page, I see two contact forms; the one from WPForms and another one. I don’t have any other form plugin except WPForm.

    How can I resolve this?

    • By default, WordPress does not have a contact form tool, you would want to check through your plugins again for plugins that add a contact form tool.

      Admin

      • I later found out that the problem was from my theme. I contacted support and they gave me a code to disable it.

        Thanks for your feedback.

  11. I have my form set up but when I test it in my site and click the submit button nothing happens. I set it up using the block editor.

  12. Hi. I am unable to add the contact form in Pages. When I click on Pages in my dashboard, there is no Add Forms field. Is there another way? I am on localhost.

  13. I have installed the WPforms plugin. but where do i check my form entries from? I am unable to see the entries that my viewers are giving. Please help.

    • Under the WPForms menu item, there should be entires as an option. If you are unable to see the entires, you would want to reach out to WPForms’ support and they would assist with your specific issue.

      Admin

    • If you are editing a post/page with the block editor you would want to add the WPForms block instead of looking for a button :)

      Admin

  14. I need help, I have created a form and would like to know how I can receive the information once submit button is pressed, where does my information go.

    • It would depend on what form you are using but the default is to email the submissions to the email under Settings>General

      Admin

  15. I have made my contact form too many times to count. I have tried to upload it also several times. it will be in the preview. It will NOT publish.
    I have followed your directions every time. I have invested over ten hours on this one edit.
    What am I doing wrong?

    • It would depend on which plugin you’re using. If you reach out to your contact form plugin’s support they should be able to assist with what the issue could be.

      Admin

  16. The contact form is one of the must have elements of a website.
    This article is all you need to learn making the best and proffessional contact form.

    • That’s quite strange, you could start by disabling your other plugins to see if it is a plugin conflict. Otherwise, please reach out to WPForms’ support directly and they should be able to assist with the issue :)

      Admin

  17. I’ve installed WP forms Lite, but can’t see the configuration options anywhere in settings – there isn’t much at all there. Any clues?

    • It would depend on what specific option you’re looking for as some options are in the forms themselves. If you reach out to the plugin’s support they can help point you to what you’re looking for :)

      Admin

  18. I created the Simple contact form and the problem I am having is the email that is sent goes into the Junk Email folder. I have tried adding the domain and sender as safe but it still goes to Junk Email. How can I stop this?

  19. Hi there, thank you for your insightful articles, they have helped me a lot!
    I am wondering if you know how to insert a code that allows the user to remove a file that has been uploaded to a Contact 7 form? Say it was uploaded by mistake and they want to remove it and try again. At the moment my form doesn’t allow me to delete any uploaded files… Appreciate your help.

    • For a question specific to contact form 7, you would want to reach out to the plugin’s support and they should be able to assist.

      Admin

  20. Thanks for the wonderful article, I have been following it to create my site but I have problem with adding my Form to the contact page. When I click on add page it opens a bar to add title but I don’t see the add form option. I have not been able to add my contacts form to my contacts page.
    Please I need you to help me. Thanks

    • For the new blocks editor you would want to add a WPForms block and that would allow you to add the form :)

      Admin

  21. Thank you for your hard work and the videos. I learn a lot from your videos. However, one thing I noticed consistently is that often you skip some steps or zip past a simple action that confuses the newcomers, especially when you are ‘WPbeginner’ instructors. Example. While tutoring the making of a Contact Us form, before publishing/updating it, you zipped past the text We’d Love to Hear From You text. This is the text you entered but did not show and that confused me a lot as to how come that text did not show up in my form because I have been following you step by step to create the form on my new website while I am watching your video. I went back and forth and created 4 forms to no avail–the text just would not show up. Then I said to my self, what the heck! and entered it on my own and proceeded to remaining video. I noticed the same issue in your other videos as well. Could you be a little slower and specific? Please note, this is not a criticism; this is a constructive suggestion. You folks do a great job and without you, I would not have my website created on my own and I would not be writing to you here. Thanks a million for doing this

    • Hi Himanshu,

      Thank you for your kind feedback, we really appreciate it. We are aware of the issue you are referring to, and our team is continuously working on improving the videos. We will put more effort into it.

      Meanwhile, if you are unable to follow instructions shown in a video or one of our tutorials, then please do not hesitate to ask us. You can do so by leaving a comment or sending us a message using the contact form on our website. We try our best to answer all user questions.

      Admin

  22. The simple form is all I need and it looks good and is looking good on cell phone too.

    I set the reCaptcha up but it doesn’t show up on the contact page where the form code is.

    Is there a short code for that also? and if so where in the settings is it?

    Thanks…

  23. Hello,
    I followed al the steps, I see the contact form on my site. I can fill in a message, and after I submit the message I neatly see the ‘thank you’ message. Butt.. I do nog receive the mesage in my e-mail account. What am I doing wrong?
    Thank you very much for your answer on this.
    Regards, Michel

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.