Dans cet article, nous commencerons par discuter des raisons pour lesquelles vous pourriez vouloir cr\u00e9er des formulaires Elementor. Ensuite, nous vous guiderons \u00e0 travers le processus de cr\u00e9ation de formulaires, et nous aborderons quelques modules compl\u00e9mentaires et conseils de d\u00e9pannage utiles. C’est parti !<\/p>\n
Pourquoi cr\u00e9er des formulaires Elementor<\/h2>\n
Il y a de nombreux avantages \u00e0 cr\u00e9er des formulaires pour votre site WordPress<\/a>. Pour commencer, vous pouvez fournir \u00e0 vos visiteurs une m\u00e9thode rapide et simple pour communiquer avec vous. En outre, vous pouvez les utiliser pour g\u00e9n\u00e9rer des prospects et acqu\u00e9rir des informations importantes aupr\u00e8s de votre public.<\/p>\n Les formulaires peuvent \u00e9galement \u00eatre des outils utiles pour enregistrer vos utilisateurs et accepter des paiements. Cependant, si vous souhaitez ajouter un formulaire \u00e0 votre site WordPress, vous devrez utiliser une extension<\/a>. Sinon, vous pouvez utiliser un constructeur de pages comme Elementor.<\/p>\n Elementor vous permet de cr\u00e9er des formulaires \u00e9tonnants sans toucher une ligne de code<\/a>. Vous pouvez utiliser l’\u00e9diteur par glisser-d\u00e9poser pour cr\u00e9er des formulaires r\u00e9actifs qui correspondent \u00e0 votre image de marque et \u00e0 l’esth\u00e9tique de votre site web.<\/p>\n Vous pouvez \u00e9galement choisir parmi plusieurs types de formulaires<\/a>, notamment :<\/p>\n Comme vous pouvez le constater, chacun de ces formulaires a son propre cas d’utilisation sp\u00e9cifique et peut contribuer \u00e0 am\u00e9liorer la fonctionnalit\u00e9 de votre site. Ensuite, nous allons vous montrer comment construire un formulaire de contact \u00e0 l’aide d’Elementor.<\/p>\n\n Maintenant que nous comprenons mieux pourquoi vous pourriez vouloir utiliser les formulaires Elementor, regardons comment vous pouvez en cr\u00e9er un en quelques \u00e9tapes simples. Notez que pour ce tutoriel, nous supposerons que vous avez d\u00e9j\u00e0 install\u00e9 et activ\u00e9 Elementor sur votre site web.<\/p>\n Il existe un outil gratuit<\/a> et une extension payante<\/a>. Pour acc\u00e9der aux fonctionnalit\u00e9s du formulaire, vous aurez besoin de la version premium.<\/p>\n Pour commencer, allez jusqu’\u00e0 la page ou l’article o\u00f9 vous souhaitez ins\u00e9rer votre formulaire de contact. Ensuite, cliquez sur le bouton Modifier avec Elementor<\/strong> en haut de l’\u00e9cran :<\/p>\n Ceci lancera l’interface de l’\u00e9diteur Elementor. Dans les widgets sur la gauche, recherchez et s\u00e9lectionnez le widget Formulaire<\/strong>:<\/p>\n Ensuite, vous pouvez faire glisser et d\u00e9poser le widget sur votre page. Cela permettra d’ins\u00e9rer un formulaire de contact standard.<\/p>\n Une fois que vous avez plac\u00e9 votre formulaire de contact sur la page, il y a quelques r\u00e9glages que vous pouvez configurer. Pour l’instant, nous allons nous concentrer sur la configuration des champs du formulaire.<\/p>\n Vous pouvez modifier les champs de base du formulaire en cliquant sur le widget et en personnalisant le texte (si vous souhaitez modifier l’une des options par d\u00e9faut). Si vous souhaitez ajouter des champs suppl\u00e9mentaires, vous pouvez le faire en s\u00e9lectionnant Ajouter un \u00e9l\u00e9ment<\/strong>:<\/p>\n Vous pouvez s\u00e9lectionner le type de champ que vous souhaitez ajouter dans la liste d\u00e9roulante. Ensuite, vous pouvez ajouter un libell\u00e9, qui est le nom du champ du formulaire. Cela montre \u00e0 vos visiteurs quelle entr\u00e9e est attendue.<\/p>\n Pour l’option Texte indicatif<\/strong>, vous pouvez personnaliser le texte qui appara\u00eet dans le champ du formulaire avant que l’utilisateur ne saisisse ses informations. Vous pouvez l’utiliser pour donner aux visiteurs des exemples des donn\u00e9es que vous souhaitez qu’ils fournissent.<\/p>\n En outre, vous pouvez choisir d’activer le param\u00e8tre N\u00e9cessaire<\/strong>\u00a0et modifier la largeur de la colonne. Vous pouvez \u00e9galement cliquer sur le panneau Boutons <\/strong>pour personnaliser l’apparence des boutons de votre formulaire. Vous pouvez modifier la taille ainsi que la police et les couleurs.<\/p>\n Une fois que vous avez termin\u00e9 de cr\u00e9er les champs du formulaire, l’\u00e9tape suivante consiste \u00e0 configurer les r\u00e9glages d’envoi du formulaire. Vous pouvez aller vers E-mail <\/strong>dans l’\u00e9diteur Elementor pour acc\u00e9der \u00e0 la vari\u00e9t\u00e9 d’options.<\/p>\n Par exemple, vous pouvez saisir votre adresse e-mail dans le champ Pour<\/strong> o\u00f9 vous voulez que les envois soient livr\u00e9s. Vous pouvez saisir plusieurs adresses e-mail si vous le souhaitez :<\/p>\n Vous pouvez \u00e9galement personnaliser l’objet de l’e-mail et le message. Lorsque vous avez termin\u00e9 de configurer toutes les options, assurez-vous d’enregistrer vos modifications.<\/p>\n Si vous souhaitez personnaliser davantage votre formulaire de contact, vous pouvez le faire en activant un message personnalis\u00e9. S\u00e9lectionnez Options suppl\u00e9mentaires<\/strong>, puis mettez le commutateur \u00e0 bascule de la message personnalis\u00e9e <\/strong>sur Oui<\/strong>:<\/p>\n Il existe quatre types de messages que vous pouvez modifier :<\/p>\n Vous pouvez personnaliser ces messages pour qu’ils correspondent au style de votre marque. Par exemple, vous pouvez modifier le libell\u00e9 pour ajouter un peu de personnalit\u00e9.<\/p>\n Une fois que vous vous \u00eates occup\u00e9 du texte et des champs de base de votre formulaire, vous pouvez commencer \u00e0 styliser le design<\/a> de votre formulaire de contact Elementor. Par exemple, vous pouvez vous assurer qu’il correspond \u00e0 votre image de marque.<\/p>\n Pour commencer, vous pouvez cliquer sur l’onglet Style <\/strong>en haut de l’\u00e9diteur de widgets :<\/p>\n Ici, vous trouverez une grande vari\u00e9t\u00e9 d’options et de param\u00e8tres que vous pouvez utiliser pour personnaliser le design de votre formulaire de contact. Par exemple, vous pouvez ajuster l’espacement et la marge int\u00e9rieure, ainsi que modifier les couleurs, la taille, les libell\u00e9s et les boutons.<\/p>\n Lorsque vous \u00eates satisfait de l’aspect et du contenu de votre formulaire de contact Elementor, il ne vous reste plus qu’\u00e0 l’enregistrer et \u00e0 le publier. Vous pouvez le faire en s\u00e9lectionnant le bouton Publier <\/strong>en bas \u00e0 gauche de l’\u00e9cran.<\/p>\n Le tour est jou\u00e9 ! Vous pouvez ensuite pr\u00e9visualiser votre formulaire de contact sur l’interface publique pour confirmer qu’il se pr\u00e9sente comme vous le souhaitez.<\/p>\n Le constructeur de pages Elementor est livr\u00e9 avec de nombreuses options pour cr\u00e9er des formulaires pour votre site web WordPress. Cependant, vous pouvez \u00e9galement envisager d’ajouter des extensions pour aider \u00e0 \u00e9tendre la fonctionnalit\u00e9 de vos formulaires. Jetons un coup d’\u0153il \u00e0 quelques options.<\/p>\n L’extension Master Addons for Elementor<\/a> est un outil freemium qui fournit une collection d’outils utiles pour am\u00e9liorer le constructeur de pages et, \u00e0 son tour, votre site web. Il comprend les fonctionnalit\u00e9s suivantes :<\/p>\n Il est \u00e9galement compatible avec une grande vari\u00e9t\u00e9 d’extensions de formulaire. Cela inclut Contact Form 7, Ninja Forms, WP Forms et Caldera Forms. Pour acc\u00e9der \u00e0 toutes les fonctionnalit\u00e9s de l’extension, vous devrez acheter la version pro<\/a>, qui est disponible pour 39 $ par an.<\/p>\n Un autre outil pratique que vous pouvez utiliser avec Elementor est Plus Addons<\/a>. Cette extension contient plus de 8.000 options de personnalisation et plus de 300 blocs d’interface utilisateur (IU) qui peuvent vous aider \u00e0 cr\u00e9er et \u00e0 concevoir vos pages et formulaires en toute simplicit\u00e9.<\/p>\n Ses fonctionnalit\u00e9s comprennent :<\/p>\n Il y a \u00e9galement plus de 18 mod\u00e8les parmi lesquels vous pouvez choisir. Ceux-ci ont \u00e9t\u00e9 con\u00e7us sp\u00e9cifiquement pour certains types d’entreprises, notamment les agences, les restaurants, les salons, etc.<\/p>\n Une version gratuite est disponible. Cependant, pour profiter de l’ensemble des fonctionnalit\u00e9s utiles, nous vous recommandons d’acheter une licence premium<\/a>, disponible pour 39 $ par an.<\/p>\n Si vous souhaitez cr\u00e9er des formulaires de contact Elementor pour votre site WordPress sans payer une licence premium, vous pouvez le faire de diff\u00e9rentes mani\u00e8res. Pour ce faire, vous devrez coupler le constructeur de pages avec une autre extension WordPress de formulaire, telle que WPForms<\/a> ou Formidable Forms<\/a>.<\/p>\n Disons que vous optez pour Formidable Forms. Une fois que vous avez install\u00e9 et activ\u00e9 l’extension sur votre site, vous pouvez aller dans Formidable<\/strong> > Formulaires <\/strong>> Ajouter<\/strong>:<\/p>\n Ensuite, vous pouvez s\u00e9lectionner Formulaire de contact<\/strong> dans la liste des options, et choisir parmi quelques mod\u00e8les pr\u00e9fabriqu\u00e9s. Lorsque vous avez termin\u00e9 de construire votre formulaire, allez jusqu’\u00e0 la page sur laquelle vous souhaitez le placer et lancez l’interface de l’\u00e9diteur Elementor.<\/p>\n Dans le panneau de gauche, recherchez et s\u00e9lectionnez le widget Formidable Forms<\/strong>. Vous pouvez ajuster le format, les couleurs, les boutons, le texte, etc :<\/p>\n Lorsque vous avez termin\u00e9, vous pouvez enregistrer et publier vos modifications. Cette m\u00e9thode demande un peu plus de temps et d’efforts que ce qui serait n\u00e9cessaire avec l’extension Elementor Pro. Cependant, elle peut vous permettre d’\u00e9conomiser un peu d’argent si vous ne souhaitez pas acheter un plan premium.<\/p>\n Les formulaires de contact Elementor sont assez simples et faciles \u00e0 utiliser. Cependant, vous pouvez rencontrer des probl\u00e8mes lors de leur utilisation. L’un des probl\u00e8mes les plus courants que les gens signalent est la non-d\u00e9livrance des e-mails.<\/p>\n Elementor utilise la fonction wp_mail pour distribuer ses e-mails. Cela signifie que votre fournisseur d’h\u00e9bergement<\/a> prend l’e-mail envoy\u00e9 et le distribue.<\/p>\n Cependant, certains h\u00e9bergeurs d\u00e9sactivent la fonction PHP qui est g\u00e9n\u00e9ralement utilis\u00e9e pour l’envoi des e-mails, ce qui explique pourquoi ce probl\u00e8me peut se produire. Pour r\u00e9soudre cette erreur, nous vous recommandons de prendre contact avec votre h\u00e9bergeur et de lui demander d’activer la fonction send_mail.<\/p>\n Sinon, vous pouvez utiliser un serveur SMTP (Simple Mail Transfer Protocol). Il s’agit d’un serveur de messagerie<\/a> qui acheminera vos e-mails sous forme de formulaires vers la bo\u00eete de r\u00e9ception de vos clients, en utilisant une source externe comme Gmail. Cela peut r\u00e9duire les chances que vos e-mails finissent dans les dossiers de spam. Pour configurer le SMTP, vous pouvez utiliser une extension telle que WP MAIL SMTP<\/a>.<\/p>\n\n Les formulaires jouent un r\u00f4le central dans les sites web. Ils permettent aux clients d’entrer en contact avec vous, de s’inscrire \u00e0 un compte, d’envoyer des informations de paiement, et bien plus encore. Cependant, il n’est pas toujours facile de concevoir des formulaires esth\u00e9tiques pour votre site. Heureusement, Elementor vous facilite la t\u00e2che.<\/p>\n Une fois que vous avez ajout\u00e9 le widget de formulaire Elementor \u00e0 votre page, vous pouvez d\u00e9finir vos champs et configurer les r\u00e9glages du formulaire. Vous pouvez \u00e9galement personnaliser le design de votre formulaire afin qu’il s’aligne sur votre image de marque.<\/p>\n Vous avez des questions sur la cr\u00e9ation de formulaires Elementor dans WordPress ? Faites-nous en part dans la section des commentaires ci-dessous !<\/em><\/p>\n","protected":false},"excerpt":{"rendered":" Lorsque vous avez un site web commercial, les formulaires sont un \u00e9l\u00e9ment de base. Ils permettent aux clients d’entrer plus facilement en contact avec vous et …<\/p>\n","protected":false},"author":117,"featured_media":55578,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[464,701],"topic":[1028],"class_list":["post-55513","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-elementor","tag-forms","topic-developpement-wordpress"],"yoast_head":"\n\n
Comment cr\u00e9er un formulaire de contact Elementor dans WordPress (en 6 \u00e9tapes)<\/h2>\n
\u00c9tape 1 : Ajouter le widget de contact Elementor<\/h3>\n
![\"Cliquez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/edit-with-elementor.png\")
![\"Faites](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-form-widget.jpg\")
\u00c9tape 2 : Configurez les champs de votre formulaire de contact<\/h3>\n
![\"Personnalisez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/add-item.jpg\")
\u00c9tape 3 : Configurez vos envois de formulaire<\/h3>\n
![\"Configurez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/email-settings-elementor.png\")
\u00c9tape 4 : Personnalisez le message de votre formulaire de contact<\/h3>\n
![\"Personnaliser](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/form-messages.png\")
\n
\u00c9tape 5 : Stylisation de votre formulaire de contact Elementor<\/h3>\n
![\"Styliser](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-form-style.jpg\")
\u00c9tape 6 : Enregistrez et publiez votre formulaire<\/h3>\n
Principaux modules compl\u00e9mentaires pour les formulaires Elementor<\/h2>\n
Master Addons for Elementor<\/h3>\n
![\"Master](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/master-addons.png\")
\n
The Plus Addons<\/h3>\n
![\"The](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/plus-addons.png\")
\n
Conseils et astuces suppl\u00e9mentaires pour la cr\u00e9ation de formulaires Elementor<\/h2>\n
![\"Formidable](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/add-new-form.png\")
![\"Widget](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/formidable-forms-elementor.jpg\")
D\u00e9pannage des formulaires Elementor<\/h2>\n
R\u00e9sum\u00e9<\/h2>\n