Lorsque vous avez un site web commercial, les formulaires sont un élément de base. Ils permettent aux clients d’entrer plus facilement en contact avec vous et de fournir des informations importantes et des commentaires. Cependant, il peut être difficile de savoir comment les créer.
Si vous recherchez une stratégie simple et directe, nous vous recommandons d’utiliser les formulaires Elementor. Ce constructeur de pages populaire offre des solutions pour créer une variété de formulaires qui sont à la fois esthétiques et faciles à utiliser.
Dans cet article, nous commencerons par discuter des raisons pour lesquelles vous pourriez vouloir créer des formulaires Elementor. Ensuite, nous vous guiderons à travers le processus de création de formulaires, et nous aborderons quelques modules complémentaires et conseils de dépannage utiles. C’est parti !
Pourquoi créer des formulaires Elementor
Il y a de nombreux avantages à créer des formulaires pour votre site WordPress. Pour commencer, vous pouvez fournir à vos visiteurs une méthode rapide et simple pour communiquer avec vous. En outre, vous pouvez les utiliser pour générer des prospects et acquérir des informations importantes auprès de votre public.
Les formulaires peuvent également être des outils utiles pour enregistrer vos utilisateurs et accepter des paiements. Cependant, si vous souhaitez ajouter un formulaire à votre site WordPress, vous devrez utiliser une extension. Sinon, vous pouvez utiliser un constructeur de pages comme Elementor.
Elementor vous permet de créer des formulaires étonnants sans toucher une ligne de code. Vous pouvez utiliser l’éditeur par glisser-déposer pour créer des formulaires réactifs qui correspondent à votre image de marque et à l’esthétique de votre site web.
Vous pouvez également choisir parmi plusieurs types de formulaires, notamment :
- Formulaires de contact Elementor : vous pouvez utiliser cette fonctionnalité pour créer un formulaire simple permettant aux utilisateurs de vous contacter.
- Elementor Gravity Forms: ce widget Gravity Forms vous offre plus de flexibilité en termes de personnalisation et de style de vos formulaires.
- Formulaires d’enregistrements Elementor : cette fonctionnalité vous permet de mettre en place des formulaires d’enregistrement des utilisateurs sur votre site web.
Comme vous pouvez le constater, chacun de ces formulaires a son propre cas d’utilisation spécifique et peut contribuer à améliorer la fonctionnalité de votre site. Ensuite, nous allons vous montrer comment construire un formulaire de contact à l’aide d’Elementor.
Comment créer un formulaire de contact Elementor dans WordPress (en 6 étapes)
Maintenant que nous comprenons mieux pourquoi vous pourriez vouloir utiliser les formulaires Elementor, regardons comment vous pouvez en créer un en quelques étapes simples. Notez que pour ce tutoriel, nous supposerons que vous avez déjà installé et activé Elementor sur votre site web.
Il existe un outil gratuit et une extension payante. Pour accéder aux fonctionnalités du formulaire, vous aurez besoin de la version premium.
Étape 1 : Ajouter le widget de contact Elementor
Pour commencer, allez jusqu’à la page ou l’article où vous souhaitez insérer votre formulaire de contact. Ensuite, cliquez sur le bouton Modifier avec Elementor en haut de l’écran :
Ceci lancera l’interface de l’éditeur Elementor. Dans les widgets sur la gauche, recherchez et sélectionnez le widget Formulaire:
Ensuite, vous pouvez faire glisser et déposer le widget sur votre page. Cela permettra d’insérer un formulaire de contact standard.
Étape 2 : Configurez les champs de votre formulaire de contact
Une fois que vous avez placé votre formulaire de contact sur la page, il y a quelques réglages que vous pouvez configurer. Pour l’instant, nous allons nous concentrer sur la configuration des champs du formulaire.
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éfaut). Si vous souhaitez ajouter des champs supplémentaires, vous pouvez le faire en sélectionnant Ajouter un élément:
Vous pouvez sélectionner le type de champ que vous souhaitez ajouter dans la liste déroulante. Ensuite, vous pouvez ajouter un libellé, qui est le nom du champ du formulaire. Cela montre à vos visiteurs quelle entrée est attendue.
Pour l’option Texte indicatif, vous pouvez personnaliser le texte qui apparaît 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ées que vous souhaitez qu’ils fournissent.
En outre, vous pouvez choisir d’activer le paramètre Nécessaire et modifier la largeur de la colonne. Vous pouvez également cliquer sur le panneau Boutons pour personnaliser l’apparence des boutons de votre formulaire. Vous pouvez modifier la taille ainsi que la police et les couleurs.
Étape 3 : Configurez vos envois de formulaire
Une fois que vous avez terminé de créer les champs du formulaire, l’étape suivante consiste à configurer les réglages d’envoi du formulaire. Vous pouvez aller vers E-mail dans l’éditeur Elementor pour accéder à la variété d’options.
Par exemple, vous pouvez saisir votre adresse e-mail dans le champ Pour où vous voulez que les envois soient livrés. Vous pouvez saisir plusieurs adresses e-mail si vous le souhaitez :
Vous pouvez également personnaliser l’objet de l’e-mail et le message. Lorsque vous avez terminé de configurer toutes les options, assurez-vous d’enregistrer vos modifications.
Étape 4 : Personnalisez le message de votre formulaire de contact
Si vous souhaitez personnaliser davantage votre formulaire de contact, vous pouvez le faire en activant un message personnalisé. Sélectionnez Options supplémentaires, puis mettez le commutateur à bascule de la message personnalisée sur Oui:
Il existe quatre types de messages que vous pouvez modifier :
- Message de réussite : celui-ci apparaît une fois qu’un utilisateur envoie le formulaire
- Message d’erreur : il s’affiche en cas de problème pendant le processus d’envoi
- Message nécessaire : pour informer les utilisateurs qu’un champ particulier n’a pas été rempli
- Message non valide : pour informer les utilisateurs qu’un élément de l’envoi du formulaire ne fonctionne pas
Vous pouvez personnaliser ces messages pour qu’ils correspondent au style de votre marque. Par exemple, vous pouvez modifier le libellé pour ajouter un peu de personnalité.
Étape 5 : Stylisation de votre formulaire de contact Elementor
Une fois que vous vous êtes occupé du texte et des champs de base de votre formulaire, vous pouvez commencer à styliser le design de votre formulaire de contact Elementor. Par exemple, vous pouvez vous assurer qu’il correspond à votre image de marque.
Pour commencer, vous pouvez cliquer sur l’onglet Style en haut de l’éditeur de widgets :
Ici, vous trouverez une grande variété d’options et de paramètres que vous pouvez utiliser pour personnaliser le design de votre formulaire de contact. Par exemple, vous pouvez ajuster l’espacement et la marge intérieure, ainsi que modifier les couleurs, la taille, les libellés et les boutons.
Étape 6 : Enregistrez et publiez votre formulaire
Lorsque vous êtes satisfait de l’aspect et du contenu de votre formulaire de contact Elementor, il ne vous reste plus qu’à l’enregistrer et à le publier. Vous pouvez le faire en sélectionnant le bouton Publier en bas à gauche de l’écran.
Le tour est joué ! Vous pouvez ensuite prévisualiser votre formulaire de contact sur l’interface publique pour confirmer qu’il se présente comme vous le souhaitez.
Principaux modules complémentaires pour les formulaires Elementor
Le constructeur de pages Elementor est livré avec de nombreuses options pour créer des formulaires pour votre site web WordPress. Cependant, vous pouvez également envisager d’ajouter des extensions pour aider à étendre la fonctionnalité de vos formulaires. Jetons un coup d’œil à quelques options.
Master Addons for Elementor
L’extension Master Addons for Elementor est un outil freemium qui fournit une collection d’outils utiles pour améliorer le constructeur de pages et, à son tour, votre site web. Il comprend les fonctionnalités suivantes :
- Créateur d’en-tête, de pied de page et de formulaire de commentaire
- Constructeur de méga-menu
- Effets de survol des images
- Conditions d’affichage
Il est également compatible avec une grande variété d’extensions de formulaire. Cela inclut Contact Form 7, Ninja Forms, WP Forms et Caldera Forms. Pour accéder à toutes les fonctionnalités de l’extension, vous devrez acheter la version pro, qui est disponible pour 39 $ par an.
The Plus Addons
Un autre outil pratique que vous pouvez utiliser avec Elementor est Plus Addons. Cette extension contient plus de 8.000 options de personnalisation et plus de 300 blocs d’interface utilisateur (IU) qui peuvent vous aider à créer et à concevoir vos pages et formulaires en toute simplicité.
Ses fonctionnalités comprennent :
- Boîtes d’icônes
- Sections de carte
- Formulaires
- Tableaux de prix
Il y a également plus de 18 modèles parmi lesquels vous pouvez choisir. Ceux-ci ont été conçus spécifiquement pour certains types d’entreprises, notamment les agences, les restaurants, les salons, etc.
Une version gratuite est disponible. Cependant, pour profiter de l’ensemble des fonctionnalités utiles, nous vous recommandons d’acheter une licence premium, disponible pour 39 $ par an.
Conseils et astuces supplémentaires pour la création de formulaires Elementor
Si vous souhaitez créer des formulaires de contact Elementor pour votre site WordPress sans payer une licence premium, vous pouvez le faire de différentes manières. Pour ce faire, vous devrez coupler le constructeur de pages avec une autre extension WordPress de formulaire, telle que WPForms ou Formidable Forms.
Disons que vous optez pour Formidable Forms. Une fois que vous avez installé et activé l’extension sur votre site, vous pouvez aller dans Formidable > Formulaires > Ajouter:
Ensuite, vous pouvez sélectionner Formulaire de contact dans la liste des options, et choisir parmi quelques modèles préfabriqués. Lorsque vous avez terminé de construire votre formulaire, allez jusqu’à la page sur laquelle vous souhaitez le placer et lancez l’interface de l’éditeur Elementor.
Dans le panneau de gauche, recherchez et sélectionnez le widget Formidable Forms. Vous pouvez ajuster le format, les couleurs, les boutons, le texte, etc :
Lorsque vous avez terminé, vous pouvez enregistrer et publier vos modifications. Cette méthode demande un peu plus de temps et d’efforts que ce qui serait nécessaire avec l’extension Elementor Pro. Cependant, elle peut vous permettre d’économiser un peu d’argent si vous ne souhaitez pas acheter un plan premium.
Dépannage des formulaires Elementor
Les formulaires de contact Elementor sont assez simples et faciles à utiliser. Cependant, vous pouvez rencontrer des problèmes lors de leur utilisation. L’un des problèmes les plus courants que les gens signalent est la non-délivrance des e-mails.
Elementor utilise la fonction wp_mail pour distribuer ses e-mails. Cela signifie que votre fournisseur d’hébergement prend l’e-mail envoyé et le distribue.
Cependant, certains hébergeurs désactivent la fonction PHP qui est généralement utilisée pour l’envoi des e-mails, ce qui explique pourquoi ce problème peut se produire. Pour résoudre cette erreur, nous vous recommandons de prendre contact avec votre hébergeur et de lui demander d’activer la fonction send_mail.
Sinon, vous pouvez utiliser un serveur SMTP (Simple Mail Transfer Protocol). Il s’agit d’un serveur de messagerie qui acheminera vos e-mails sous forme de formulaires vers la boîte de réception de vos clients, en utilisant une source externe comme Gmail. Cela peut réduire 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.
Résumé
Les formulaires jouent un rôle central dans les sites web. Ils permettent aux clients d’entrer en contact avec vous, de s’inscrire à un compte, d’envoyer des informations de paiement, et bien plus encore. Cependant, il n’est pas toujours facile de concevoir des formulaires esthétiques pour votre site. Heureusement, Elementor vous facilite la tâche.
Une fois que vous avez ajouté le widget de formulaire Elementor à votre page, vous pouvez définir vos champs et configurer les réglages du formulaire. Vous pouvez également personnaliser le design de votre formulaire afin qu’il s’aligne sur votre image de marque.
Vous avez des questions sur la création de formulaires Elementor dans WordPress ? Faites-nous en part dans la section des commentaires ci-dessous !
Salman Ravoof est un développeur web autodidacte, un écrivain, un créateur et un grand admirateur des logiciels libres. Outre la technologie, il est passionné par la science, la philosophie, la photographie, les arts, les chats et la nourriture. Apprenez-en plus sur son site web, et connectez-vous avec Salman sur X.
Laisser un commentaire