{"id":5833,"date":"2022-08-06T09:36:00","date_gmt":"2022-08-06T09:36:00","guid":{"rendered":"https:\/\/blog.hostinger.io\/fr-tutoriels\/?p=5833"},"modified":"2023-07-10T21:10:20","modified_gmt":"2023-07-10T21:10:20","slug":"formulaire-contact-wordpress","status":"publish","type":"post","link":"\/fr\/tutoriels\/formulaire-contact-wordpress","title":{"rendered":"Comment ajouter un formulaire de contact sur WordPress"},"content":{"rendered":"<p>Saviez-vous que les formulaires de contact peut vous permettre d&rsquo;am&eacute;liorer l&rsquo;engagement des clients ? Les utilisateurs y trouveront un endroit pratique pour communiquer avec vous en ligne et demander de l&rsquo;aide.<\/p><p>Un formulaire de contact wordpress est un espace d&eacute;di&eacute; sur votre site web, qui permet &agrave; vos visiteurs de vous joindre facilement &agrave; tout moment.<\/p><p>Dans cet article, nous allons apprendre comment ajouter un formulaire de contact dans <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/ajouter-plugin-wordpress\">WordPress<\/a> &agrave; l&rsquo;aide de <a href=\"https:\/\/wordpress.org\/plugins\/wpforms-lite\/\" target=\"_blank\" rel=\"noopener\">WP Forms<\/a> et <a href=\"https:\/\/wordpress.org\/plugins\/contact-form-7\/\" target=\"_blank\" rel=\"noopener\">Contact Form 7. <\/a><\/p><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Mega-WordPress-Cheat-FR.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/public\" alt=\"\" class=\"wp-image-41459\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-tutoriel-video-sur-comment-ajouter-une-page-de-contact\">Tutoriel vid&eacute;o sur comment ajouter une page de contact  <\/h2><p>Suivez notre tutoriel vid&eacute;o (en anglais) pour apprendre comment cr&eacute;er une page de contact sur WordPress et utilisez l&rsquo;extension Ninja Forms pour ajouter un formulaire de contact. <\/p><figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Create a WordPress Contact Us Page\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/PDGdAjmgN3Y?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure><p>\n\n\n\n  <div class=\"youtube-shortcode\">\n    <div class=\"row\">\n      <div class=\"col-7 col-sm-8 d-flex align-items-center\">\n        <img decoding=\"async\" class=\"channel-logo\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/youtube-channels\/hostinger-france.jpg\" alt=\"youtube channel logo\">\n        <div class=\"d-flex flex-column justify-content-between\">\n          <span class=\"slogan d-none d-sm-block\">S'abonner Pour plus de vid\u00e9os \u00e9ducatives\u202f!<\/span>\n          <span class=\"channel-name\">L'Acad\u00e9mie Hostinger<\/span>\n                    <\/div>\n      <\/div>\n      <div class=\"col-5 col-sm-4 d-flex align-items-center justify-content-end\">\n        <a class=\"subscribe-button\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" href=\"http:\/\/www.youtube.com\/channel\/UCnJh2FCpNj7xUbl1PKsmi6g?sub_confirmation=1\">\n          <img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/icons\/youtube.svg\" alt=\"subscribe\">\n          <span>S'abonner<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n\n    \n\n\n\n<\/p><p>Si vous pr&eacute;ferez la lecture, vous trouveres les instructions &eacute;crites ici-bas. <\/p><h2 class=\"wp-block-heading\" id=\"h-pourquoi-avez-vous-besoin-d-un-formulaire-de-contact-sur-votre-site-web\">Pourquoi avez-vous besoin d&rsquo;un formulaire de contact sur votre site web ? <\/h2><p>Le formulaire de contact est util pour le propri&eacute;taire du site ainsi qu&rsquo;&agrave; ses visiteurs. Voici quelques uns de ses avantages : <\/p><ul class=\"wp-block-list\">\n<li><strong>Une communication efficace <\/strong>&ndash; un formulaire de contact permet aux utilisateurs de vous joindre facilement. Le formulaire est accessible en permanence et les clients n&rsquo;ont qu&rsquo;&agrave; remplir les champs pr&eacute;vus &agrave; cet effet.<\/li>\n\n\n\n<li><strong>Source d&rsquo;information &ndash; <\/strong>vous pouvez demander aux utilisateurs de saisir des informations qui pourraient &ecirc;tre utiles &agrave; l&rsquo;avenir, telles qu&rsquo;une adresse &eacute;lectronique, un nom d&rsquo;utilisateur de m&eacute;dia social, etc. Cela dit, certains champs comme l&rsquo;&acirc;ge ou le sexe doivent &ecirc;tre facultatifs, si vous en avez vraiment besoin.<\/li>\n\n\n\n<li><strong>Pr&eacute;vention des spams<\/strong> &ndash; si vous disposez d&rsquo;un formulaire de contact, vous n&rsquo;avez pas besoin d&rsquo;exposer votre adresse &eacute;lectronique sur le site web. Ainsi, les spammeurs ne pourront pas la trouver facilement et vous recevrez beaucoup moins de pourriels.<\/li>\n\n\n\n<li><strong>Donne &agrave; votre site une apparence professionnelle <\/strong>&ndash; votre site Web peut para&icirc;tre plus professionnel et attrayant s&rsquo;il contient un formulaire de contact. Les lecteurs savent que vous les &eacute;couterez et, en retour, ils vous feront davantage confiance.<\/li>\n<\/ul><p>Tr&egrave;s prometteur, non? Sans plus attendre, apprenons comment ajouter un formulaire de contact dans WordPress ! <\/p><h2 class=\"wp-block-heading\" id=\"h-comment-ajouter-un-formulaire-de-contact-dans-wordpress\">Comment ajouter un formulaire de contact dans WordPress ? <\/h2><p>Nous pouvons ajouter un formulaire de contact dans WordPress en utilisant une extension de formulaire de contact, qui est tr&egrave;s facile &agrave; installer.<\/p><p>Pour commencer, vous devez acc&eacute;der &agrave; votre tableau de bord WordPress, ouvrir le menu <strong>extensions<\/strong> , et cliquer sur <strong>Ajouter<\/strong>. Recherchez le nom de l&rsquo;extension, puis s&eacute;lectionnez Installer. Une fois termin&eacute;, choisissez <strong>Activer.<\/strong><\/p><p>Pour ce tutoriel, nous allons travailler avec deux des extensions de formulaire de contact WordPress les plus populaires &ndash; <strong>WPForms<\/strong> et <strong>Contact Form 7<\/strong>. Elles sont fiables, puissantes et personnalisables.<\/p><h3 class=\"wp-block-heading\" id=\"h-wpforms\"><a href=\"https:\/\/wpforms.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">WPForms<\/a><\/h3><figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/WpForms.jpeg\/public\" alt=\"Page d'accueil de Wpforms\" class=\"wp-image-12142\" width=\"840\" height=\"369\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/WpForms.jpeg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/WpForms.jpeg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/WpForms.jpeg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/WpForms.jpeg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><\/figure><p>WPForms est une extension de formulaire de contact WordPress super conviviale. Ne vous inqui&eacute;tez pas si c&rsquo;est la premi&egrave;re fois que vous utilisez un tel outil car vous pourrez facilement le ma&icirc;triser en un rien de temps. Il dispose d&rsquo;un &eacute;diteur drag-and-drop et vous fournit de nombreux mod&egrave;les de formulaires pr&eacute;con&ccedil;us.<\/p><p>Ce qui est g&eacute;nial, c&rsquo;est que cette extension vous permet &eacute;galement de cr&eacute;er un formulaire d&rsquo;abonnement, d&rsquo;inscription et de paiement. Vous pouvez les construire en quelques minutes et l&rsquo;int&eacute;grer avec des plateformes populaires comme PayPal, Stripe, MailChimp, et ainsi de suite.<\/p><p>WPForms vous offre quatre options de plan premium, Basic <strong>(79,00 $)<\/strong>, Plus <strong>(199,00 $)<\/strong>, Pro <strong>(399,00 $)<\/strong>, et Elite <strong>(599,00 $)<\/strong> par an. Il existe &eacute;galement une version gratuite qui n&rsquo;inclut pas plusieurs fonctionnalit&eacute;s de base comme les addons tiers et les formulaires d&rsquo;enregistrement des utilisateurs.<\/p><h4 class=\"wp-block-heading\" id=\"h-etape-1-creez-un-formulaire-de-contact-wordpress-en-utilisant-wpforms\">&Eacute;tape 1 &ndash; Cr&eacute;ez un formulaire de contact WordPress en utilisant WPForms <\/h4><ol class=\"wp-block-list\">\n<li>Apr&egrave;s avoir activ&eacute; l&rsquo;extension, allez dans le menu <strong>WPForms<\/strong>. Il y a une instruction pratique pour vous aider &agrave; remplir le formulaire en moins de 5 minutes. Si vous ne souhaitez pas la suivre, cliquez simplement sur <strong>Add New.<\/strong><\/li>\n\n\n\n<li>Saisissez le nom de votre formulaire et choisissez parmi plusieurs mod&egrave;les pour acc&eacute;l&eacute;rer le processus. Vous pouvez &eacute;galement choisir un formulaire vierge pour b&eacute;n&eacute;ficier d&rsquo;une plus grande libert&eacute; de cr&eacute;ation au d&eacute;part.<\/li>\n\n\n\n<li>Vous pouvez maintenant ajouter des champs en fonction de vos besoins. Faites simplement glisser l&rsquo;option souhait&eacute;e de la colonne de gauche vers l&rsquo;&eacute;diteur en direct.<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"427\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/ajouter-des-forumulaires-de-contact.jpeg\/public\" alt=\"Ajout d'un formulaire de contact simple\" class=\"wp-image-12146\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/ajouter-des-forumulaires-de-contact.jpeg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/ajouter-des-forumulaires-de-contact.jpeg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/ajouter-des-forumulaires-de-contact.jpeg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/ajouter-des-forumulaires-de-contact.jpeg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><ol class=\"wp-block-list\">\n<li>Quand vous aurez termin&eacute;, cliquez sur <strong>Save <\/strong>en haut de la page.<\/li>\n<\/ol><h4 class=\"wp-block-heading\" id=\"h-etape-2-configurez-les-les-parametres-de-notifications-et-de-confirmation-de-wpforms\"> &Eacute;tape 2 &ndash; Configurez les les param&egrave;tres de notifications et de confirmation de WPForms <\/h4><p>Pour que vous et vos utilisateurs soyez notifier &agrave; chaque fois q&rsquo;un formulaire est soumis, vous devriez configurer les param&egrave;tres de notification et de confirmation.<\/p><ol class=\"wp-block-list\">\n<li>Dans le m&ecirc;me menu WPForms, s&eacute;lectionnez<strong> Settings <\/strong>et allez dans <strong>Notifications<\/strong>. L&agrave;, vous devez configurer votre adresse e-mail, le sujet, et d&rsquo;autres informations. Si tout est pr&ecirc;t, choisissez <strong>Add New Notifications.<\/strong><\/li>\n\n\n\n<li>En ce qui concerne la confirmation, vous pouvez ajouter une note de remerciement pour les utilisateurs ainsi que de les rediriger vers une certaine URL. C&rsquo;est &eacute;galement une excellente occasion d&rsquo;informer les clients du d&eacute;lai dans lequel ils doivent s&rsquo;attendre &agrave; recevoir une r&eacute;ponse de votre part.<br><br><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2019\/09\/confirmation-settings-2.webp\"><\/a><\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/param%C3%A8tres-de-confirmation-wpforms.jpeg\/public\" alt=\"Param&egrave;tres de confirmation de Wpforms\" class=\"wp-image-12151\"><\/figure><h4 class=\"wp-block-heading\" id=\"h-etape-3-ajouter-un-formulaire-de-contact-dans-une-page-un-article-et-une-barre-laterale\">&Eacute;tape 3 &ndash; Ajouter un formulaire de contact dans une page, un article et une barre lat&eacute;rale<\/h4><p><span style=\"color: initial;, sans-serif\">Sur une page ou un article en utilisant le bouton WPForm &ndash; dans l&rsquo;&eacute;diteur de page ou d&rsquo;article, appuyez sur l&rsquo;<\/span><strong style=\"color: initial;, sans-serif\">ic&ocirc;ne plus<\/strong><span style=\"color: initial;, sans-serif\">. D&eacute;veloppez la zone <\/span><strong style=\"color: initial;, sans-serif\">Widgets<\/strong><span style=\"color: initial;, sans-serif\"> et choisissez le bloc <\/span><strong style=\"color: initial;, sans-serif\">WPForms<\/strong>s<\/p><p>Sur une page ou un article utilisant le shortcode WordPress &ndash; copiez le shortcode depuis le menu WPForms et collez-le dans le bloc <strong>Shortcode (Code Court)<\/strong> de l&rsquo;&eacute;diteur d&rsquo;article.<br><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2019\/09\/installing-wpforms-on-page-shortcode-2.webp\"><\/a><\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"112\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/installation-wordpressforms-avec-code-court.jpeg\/public\" alt=\"Ajouter Wpforms avec un code court \" class=\"wp-image-12153\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/installation-wordpressforms-avec-code-court.jpeg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/installation-wordpressforms-avec-code-court.jpeg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/installation-wordpressforms-avec-code-court.jpeg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/installation-wordpressforms-avec-code-court.jpeg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2019\/09\/example-contact-form-post-page.webp\" alt=\"Un exemple de formulaire de contact \"><\/figure><p>Voici un exemple lorsqu&rsquo;un formulaire de contact est affich&eacute; sur une page ou un article.<\/p><figure class=\"wp-block-image\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2019\/09\/wpforms-on-sidebar-1.webp\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2019\/09\/wpforms-on-sidebar-1.webp\" alt=\"Choisissez la barre lat&eacute;rale pour afficher les WPForms dans la barre lat&eacute;rale.\" class=\"wp-image-18834\"><\/a><\/figure><p>Sur la barre lat&eacute;rale &ndash; Allez dans<strong> Apparence -&gt; Widgets.<\/strong> Localisez et cliquez sur le <strong>widget WPforms. <\/strong>Apr&egrave;s cela, choisissez <strong>Sidebar.<\/strong><\/p><p>Voil&agrave; &agrave; quoi &ccedil;a va ressembler dans votre barre lat&eacute;rale.<\/p><figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2019\/09\/example-contact-form-sidebar.webp\" alt=\"exemple de formulaire de contact dans la barre lat&eacute;rale\"><\/figure><h3 class=\"wp-block-heading\" id=\"h-contact-form-7\"><a href=\"https:\/\/contactform7.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Contact Form 7<\/a><\/h3><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"986\" height=\"426\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/page-de-telechargement-contact-form-7-1.png\/public\" alt=\"page de t&eacute;l&eacute;chargement contact form 7\" class=\"wp-image-12239\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/page-de-telechargement-contact-form-7-1.png\/w=986,fit=scale-down 986w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/page-de-telechargement-contact-form-7-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/page-de-telechargement-contact-form-7-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/page-de-telechargement-contact-form-7-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 986px) 100vw, 986px\" \/><\/figure><p>Contact Form 7 a une courbe d&rsquo;apprentissage plus profonde puisque vous devez d&rsquo;abord apprendre les balises et la syntaxe. Heureusement, le d&eacute;veloppeur a pr&eacute;par&eacute; un guide complet sur la fa&ccedil;on de le faire. Une fois que vous vous &ecirc;tes habitu&eacute; &agrave; l&rsquo;interface, il peut s&rsquo;av&eacute;rer &ecirc;tre un outil tr&egrave;s puissant.<\/p><p>Ce qui est g&eacute;nial, c&rsquo;est qu&rsquo;il offre une poign&eacute;e de fonctionnalit&eacute;s qui ne sont g&eacute;n&eacute;ralement fournies qu&rsquo;avec une extension payante, comme des extensions tierces, des formulaires multiples, etc. Parmi les autres fonctions notables, citons reCAPTCHA, le quiz, ainsi que le t&eacute;l&eacute;chargement et l&rsquo;attachement de fichiers.<\/p><p>Plus important encore, vous n&rsquo;avez rien &agrave; payer pour ce plugin. Nous allons vous montrer comment ajouter un formulaire de contact sur WordPress en utilisant Contact Form 7.<\/p><h4 class=\"wp-block-heading\" id=\"h-methode-1-afficher-le-formulaire-de-contact-par-defaut-de-contact-form-7\">M&eacute;thode 1 &ndash; Afficher le formulaire de contact par d&eacute;faut de Contact Form 7<\/h4><p>Si vous souhaitez afficher le formulaire de contact de mani&egrave;re simple, Contact Form 7 propose un formulaire pr&eacute;construit qui devrait &ecirc;tre pr&ecirc;t &agrave; &ecirc;tre utilis&eacute;. Il contient tous les champs essentiels comme le nom, l&rsquo;adresse &eacute;lectronique, l&rsquo;objet et le message.<\/p><ol class=\"wp-block-list\">\n<li>Tout d&rsquo;abord, vous devez acc&eacute;der au menu <strong>Contact<\/strong> de la page d&rsquo;administration de WordPress. Ensuite, copiez le shortcode disponible &agrave; c&ocirc;t&eacute; du nom du formulaire de contact. Ensuite, vous devez copier le <strong>code court<\/strong>  du menu de r&eacute;glage du formulaire de contact 7.<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"212\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/shortcode-wpforms.jpeg\/public\" alt=\"\nIl vous suffit de copier le code court du menu de param&egrave;tres de form 7 \" class=\"wp-image-12158\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/shortcode-wpforms.jpeg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/shortcode-wpforms.jpeg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/shortcode-wpforms.jpeg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/shortcode-wpforms.jpeg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>2. Collez-le dans le bloc<strong> Shortcode <\/strong>de l&rsquo;&eacute;diteur d&rsquo;article ou de page.<\/p><h4 class=\"wp-block-heading\" id=\"h-methode-2-creer-un-nouveau-formulaire-de-contact-avec-contact-form-7\">M&eacute;thode 2 &ndash; Cr&eacute;er un nouveau formulaire de contact avec Contact Form 7<\/h4><p>Vous pouvez &eacute;galement cr&eacute;er le formulaire de contact &agrave; partir de z&eacute;ro. Ainsi, vous pouvez le personnaliser &agrave; votre guise. Voici comment proc&eacute;der.<\/p><ol class=\"wp-block-list\">\n<li>Cliquez sur <strong>Add new <\/strong>dans le menu Contact. La bo&icirc;te d&rsquo;&eacute;dition vous propose de nombreuses balises de champ.<\/li>\n\n\n\n<li>Disons que nous voulons ajouter un champ de num&eacute;ro de t&eacute;l&eacute;phone. Pour ce faire, choisissez tel et compl&eacute;tez toutes les informations requises.<\/li>\n\n\n\n<li>R&eacute;digez le mod&egrave;le dans cette syntaxe pour donner une &eacute;tiquette au champ apr&egrave;s avoir ins&eacute;r&eacute; la balise.<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">&lt;label&gt; Phone Number     \n[tel* PhoneNumber] &lt;\/label&gt;<\/pre><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"678\" height=\"384\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/image-1.png\/public\" alt=\"\" class=\"wp-image-12066\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/image-1.png\/w=678,fit=scale-down 678w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/image-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/image-1.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 678px) 100vw, 678px\" \/><\/figure><p id=\"block-36dd2cb7-86a0-45e7-a602-7401792325d1\">F&eacute;licitations, vous avez r&eacute;ussi &agrave; ajouter un nouveau champ !<br>Maintenant que vous avez termin&eacute; avec les champs de contact, vous pouvez continuer &agrave; ajuster la notification dans les param&egrave;tres de la messagerie. Vous &ecirc;tes libre de modifier votre e-mail et les en-t&ecirc;tes, entre autres informations.<\/p><p id=\"block-36dd2cb7-86a0-45e7-a602-7401792325d1\">Enfin, si vous souhaitez modifier la r&eacute;ponse automatique, rendez-vous dans l&rsquo;onglet Messages. Contact Form 7 vous permet de modifier la note de remerciement, les messages d&rsquo;erreur et de nombreuses autres r&eacute;ponses.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"411\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/image-2.png\/public\" alt=\"\" class=\"wp-image-12067\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/image-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/image-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/image-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/08\/image-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>N&rsquo;oubliez pas de cliquer sur<strong> Enregistrer (save)<\/strong> chaque fois que vous modifiez les param&egrave;tres.<br>Comme pour le formulaire par d&eacute;faut, vous devez &eacute;galement copier et coller le shortcode dans l&rsquo;article ou la page souhait&eacute;e afin d&rsquo;afficher le nouveau formulaire de contact.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-41453\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>Si vous souhaitez &eacute;tablir un contact avec les visiteurs de votre site Web et recueillir leurs pr&eacute;cieux commentaires, vous devriez ajouter un formulaire de contact sur votre <a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-wordpress\">site Web WordPress<\/a>. Ceci vous permettra &eacute;galement de renforcer la confiance et &eacute;viter de recevoir des spams.<\/p><p>Ce qui est g&eacute;nial, c&rsquo;est que la cr&eacute;ation d&rsquo;un formulaire de contact n&rsquo;est pas aussi difficile qu&rsquo;il n&rsquo;y para&icirc;t, gr&acirc;ce &agrave; ces deux excellentes plugins &ndash; WPForms et Contact Form 7. Voici un r&eacute;sum&eacute; pour y parvenir.<\/p><ol class=\"wp-block-list\">\n<li>Tout d&rsquo;abord, recherchez WPForms ou Contact Form 7 dans le r&eacute;pertoire des plugins de WordPress.<\/li>\n\n\n\n<li>Une fois qu&rsquo;elles sont install&eacute;es et activ&eacute;es, naviguez jusqu&rsquo;&agrave; leur page de param&eacute;trage.<\/li>\n\n\n\n<li>Personnalisez votre formulaire de contact en modifiant les champs, les notifications et les r&eacute;ponses en fonction de vos besoins.<\/li>\n\n\n\n<li>Ins&eacute;rez le formulaire de contact sur une page\/post\/sidebar en utilisant un bouton d&eacute;di&eacute; ou le shortcode.<\/li>\n<\/ol><p>Bonne chance et laissez un commentaire ci-dessous si vous rencontrez des difficult&eacute;s !<\/p><h2 class=\"wp-block-heading\" id=\"h-formulaire-de-contact-wordpress-faq\">Formulaire de Contact WordPress &ndash; FAQ<\/h2><p>Trouvez les r&eacute;ponses aux questions les plus fr&eacute;quemment pos&eacute;es sur le formulaire de contact WordPress.<\/p><div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1685957240556\"><h3 class=\"schema-faq-question\">Comment ajouter un formulaire de contact sur WordPress ?<\/h3> <p class=\"schema-faq-answer\">Pour cr&eacute;er un formulaire de contact sur WordPress, vous devrez :<br><strong>1. <\/strong>T&eacute;l&eacute;charger et activer le plugin WordPress de votre choix, <br><strong>2.<\/strong> Cr&eacute;er votre formulaire en utilisant l&rsquo;interface de conception fournie par le plugin. Vous pourrez ajouter des champs pour recueillir des informations telles que le nom, l&rsquo;adresse e-mail et les commentaires des visiteurs. <br><strong>3.<\/strong> Une fois le formulaire cr&eacute;&eacute;, vous devrez l&rsquo;ajouter &agrave; votre site.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1685957468993\"><h3 class=\"schema-faq-question\">Quel formulaire de contact pour WordPress ?<\/h3> <p class=\"schema-faq-answer\">Pour cr&eacute;er un formulaire de contact sur WordPress vous pouvez utiliser 2 des plugins les plus populaires pour cette t&acirc;che &agrave; savoir Contact Form 7 et WPforms. Il existe cependant d&rsquo;autres plugins tr&egrave;s utiles que vous pouvez envisager comme Ninja Forms ou Formidable Form Builder<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1685957493810\"><h3 class=\"schema-faq-question\">Comment configurer Contact Form 7 sur WordPress ?<\/h3> <p class=\"schema-faq-answer\">Vous pouvez installer Contact Form 7 directement depuis le r&eacute;pertoires des extensions WordPress.<br>Contact Form 7 propose un formulaire pr&eacute;construit qui devrait &ecirc;tre pr&ecirc;t &agrave; &ecirc;tre utilis&eacute;. Il contient tous les champs essentiels comme le nom, l&rsquo;adresse &eacute;lectronique, l&rsquo;objet et le message.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1660152415904\"><h3 class=\"schema-faq-question\">Quels champs mettre dans un formulaire de contact ?<\/h3> <p class=\"schema-faq-answer\">Pour cr&eacute;er un formulaire de contact simple vous pouvez vous contenter du nom, pr&eacute;nom et email. Vous pouvez ajouter d&rsquo;autres champs selon votre besoin comme le num&eacute;ro de t&eacute;l&eacute;phone ou encore le site web du contact. Vous pouvez aussi marquer les champs comme &eacute;tant obligatoires ou facultatifs<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Saviez-vous que les formulaires de contact peut vous permettre d&rsquo;am&eacute;liorer l&rsquo;engagement des clients ? Les utilisateurs y trouveront un endroit pratique pour communiquer avec vous en ligne et demander de l&rsquo;aide. Un formulaire de contact wordpress est un espace d&eacute;di&eacute; sur votre site web, qui permet &agrave; vos visiteurs de vous joindre facilement &agrave; tout [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/formulaire-contact-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":189,"featured_media":11691,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"%title% %page%","rank_math_description":"Vous voulez apprendre \u00e0 cr\u00e9er des formulaires sur WordPress ? Faites le facilement avec Contact Form 7 ou WPforms","rank_math_focus_keyword":"formulaire de contact wordpress","footnotes":""},"categories":[4777],"tags":[5163,5162],"class_list":["post-5833","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-contact-form-7","tag-contact-form-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-create-a-contact-form-on-wordpress","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/formulario-de-contato-wordpress","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/formulaire-contact-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/crear-formulario-contacto-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-membuat-form-kontak-di-wordpress","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/wordpress-contactformulier","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/how-to-create-a-contact-form-on-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-create-a-contact-form-on-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-create-a-contact-form-on-wordpress","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-create-a-contact-form-on-wordpress","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/joomla-vs-wordpress-cms-utilizar-5","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/joomla-vs-wordpress-cms-utilizar-5","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/crear-formulario-contacto-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/formulario-de-contato-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-create-a-contact-form-on-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-create-a-contact-form-on-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-create-a-contact-form-on-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-create-a-contact-form-on-wordpress","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/5833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/189"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=5833"}],"version-history":[{"count":35,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/5833\/revisions"}],"predecessor-version":[{"id":24842,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/5833\/revisions\/24842"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media\/11691"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=5833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=5833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=5833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}