Chaque site Web doit inclure un formulaire de contact ! Les formulaires de contact sont utiles à diverses fins, quel que soit le type de site Web dont vous disposez. Ils peuvent générer des prospects, établir des connexions et des relations, permettre aux utilisateurs de signaler des problèmes avec votre site, et tout le reste.
Il n’est pas nécessaire d’être un expert technique pour créer des formulaires de contact dans WordPress. Le constructeur de pages Elementor facilite plus que jamais la création de beaux sites Web.
Pour montrer comment créer des formulaires de contact avec Elementor, nous passerons en revue les différentes options et tout ce qu'il y a à savoir sur les formulaires de contact dans Elementor.
Elementor inclut depuis un certain temps déjà un widget Form, ce qui signifie que vous n'avez plus besoin d'aller ailleurs pour créer des formulaires pour votre site WordPress, ce qui est une bénédiction !
Par le passé, vous avez peut-être rencontré des difficultés lors de la création de formulaires avec certains plugin disponibles. Le processus de conception et de configuration des formulaires peut être long et frustrant. Heureusement pour nous tous, le widget Elementor Form est simple à utiliser.
Avant de commencer avec le générateur de formulaires Elementor, jetons un coup d'œil rapide à certaines de ses fonctionnalités les plus essentielles.
L'une des caractéristiques les plus distinctives, pour commencer, est qu'elle est entièrement intégrée à l'interface Elementor, ce qui signifie que vous avez accès à de nombreuses options de conception/style/mise en page disponibles dans Elementor. Je ne pense pas que vous trouverez un plugin de formulaire autonome avec un système de conception aussi robuste que celui-ci.
À partir de là, vous pouvez créer jusqu'à 18 types de champs différents :
Vous pouvez également diviser vos formulaires en plusieurs pages pour créer des formulaires en plusieurs étapes, utiles pour les candidatures longues.
Elementor Pro propose plus de 12 intégrations avec des services de marketing par e-mail et des systèmes de gestion de la relation client populaires pour vous aider à tirer le meilleur parti de vos formulaires. Il existe également une intégration fourre-tout Zapier qui vous permet de vous connecter à l'un des milliers d'outils disponibles sur la plateforme Zapier si votre outil n'est pas répertorié.
Il existe également quelques autres alternatives intéressantes. Par amp , lorsque quelqu'un remplit votre formulaire, vous pouvez recevoir des notifications via Slack ou Discord.
En parlant de notifications, vous pouvez également personnaliser les notifications par e-mail que vous recevez et les notifications par e-mail que reçoivent les auteurs du formulaire. Après avoir soumis le formulaire, vous pouvez les rediriger vers une page de remerciement personnalisée que vous créez.
Nous commencerons par ouvrir l'éditeur Elementor, puis glisser-déposer le widget Formulaire à l'emplacement où nous souhaitons créer notre formulaire.
Comme tout le reste dans Elementor, le processus de création de formulaires est effectué visuellement. Il n'est pas nécessaire d'utiliser un plugin supplémentaire, ni qu'il n'est essentiel de faire office de backend de votre site Web.
Une fois votre formulaire en place, la première étape consiste à organiser les informations qu'il contient. De quels champs avez-vous besoin et de quels types de champs devraient-ils être ? Qu'est-ce que tu cherches?
Lorsque vous travaillez dans l'éditeur Elementor, les champs de formulaire sont ajoutés et modifiés à partir de l'onglet Contenu. Comme vous pouvez le voir dans l' amp ci-dessous, les formulaires incluent quelques champs par défaut. En sélectionnant Ajouter un élément dans le menu déroulant, vous pouvez créer de nouveaux champs.
La duplication d'un Champ est également possible en sélectionnant l'icône qui ressemble à deux documents l'un devant l'autre et en cliquant dessus.
De nombreux types de champs de formulaire sont disponibles, allant des simples champs de texte aux champs de mots de passe, ReCaptcha et honeypot.
Pour modifier le comportement d'un champ de formulaire, sélectionnez d'abord le champ, puis aimez le menu déroulant Type pour voir les différents types de champs disponibles.
Cette fonctionnalité vous permet d'utiliser deux champs de formulaire sur la même ligne en ajustant le paramètre Largeur de colonne. Modifiez la largeur de la fenêtre en la sélectionnant dans le sélecteur déroulant et en sélectionnant 50 pour cent. Il convient de noter que si vous faites cela avec deux champs de formulaire consécutifs, vous remarquerez qu’ils apparaissent ensemble sur la même ligne.
Stylisez vos formulaires dans Elementor de la même manière que vous stylisez d’autres widgets en accédant au panneau Style situé dans l’interface d’édition d’Elementor.
Le formulaire lui-même, les champs, les boutons, les étapes, les messages d'erreur et les messages de confirmation peuvent tous être personnalisés.
Pour ceux qui sont déjà familiers avec Elementor, il n’y a pas grand-chose de plus à apprendre sur le style des formulaires Elementor.
Suite à notre discussion sur la création d'un formulaire dans Elementor, examinons la configuration de ce qui se passe après la soumission de votre formulaire ; ceci est accompli via des actions de formulaire, ou comme on les appelle dans Elementor, Actions après soumission.
Lorsqu'un formulaire est soumis, il est courant que le système envoie un e-mail et redirige l'utilisateur vers une autre page Web. Vous pouvez bien entendu inclure autant d’actions que vous le souhaitez sur vos formulaires et les combiner comme vous le souhaitez. Comme vous vous en doutez, il existe un champ de sélection spécifique sans aucun codage impliqué.
Chacune des actions que vous ajoutez apparaîtra sous la forme d'une option d'onglet distincte dans le menu principal. Nous avons actuellement une option d'onglet pour le courrier électronique, mais si je devais inclure une redirection dans le champ Ajouter une action, je verrais également Redirection dans les options de mon onglet, comme indiqué dans l' amp ci-dessous.
Pour conclure, je vais vous montrer comment configurer le formulaire pour accepter les soumissions par courrier électronique, la question la plus fréquemment posée à propos des formulaires.
Lorsque vous sélectionnez E-mail dans l'onglet Contenu de l'éditeur, l'écran ci-dessous vous sera présenté ; c'est ici que vous pouvez personnaliser l'e-mail d'envoi et l'e-mail de réponse, et vous pouvez également ajouter un CC ou un BCC à toute personne qui doit recevoir une copie des soumissions du formulaire.
De nombreuses personnes sont surprises d'apprendre que l'éditeur de formulaires d'Elementor est plus puissant qu'il n'y paraît à première vue, et que l'une des fonctionnalités les plus avancées est la possibilité de personnaliser la messagerie pour chaque formulaire.
Il est possible de personnaliser les messages du formulaire afin de fournir un processus de feedback plus personnalisé à l'utilisateur final qui a rempli votre formulaire, plutôt que de ressembler à un robot ennuyeux. Mais plus précisément, les messages que vous pouvez personnaliser pour votre formulaire de contact Elementor sont les suivants :
Pour commencer, vous devez d'abord activer la messagerie personnalisée en sélectionnant « Options supplémentaires » dans le menu déroulant, puis en basculant le commutateur à bascule de « Messagerie personnalisée » sur « Oui ».
Personnalisation du widget de formulaire de contact Elementor en ajoutant des messages personnalisés
Comme vous pouvez le constater, vous pouvez personnaliser quatre messages différents, dont ceux répertoriés ci-dessous :
Un message de réussite est affiché à l'utilisateur final après avoir soumis le formulaire et vérifié que le formulaire a été correctement rempli (par exemple, aucun champ obligatoire manquant, etc.).
Message d'erreur : un message qui s'affiche à l'utilisateur final lorsqu'une erreur inconnue se produit lors de la soumission du formulaire.
Message requis : apparaît lorsqu'un champ obligatoire du formulaire n'est pas rempli, que le formulaire est soumis et que le formulaire n'est pas rempli.
Lorsque quelque chose dans la soumission du formulaire est incorrect et ne peut pas être envoyé, le message Message invalide s'affiche à l'utilisateur final.
Être capable de modifier les messages vous permet d'être créatif et original, ou plus formel et professionnel si vous gérez un site d'entreprise. Le meilleur, c'est qu'ils sont entièrement modifiables, vous pouvez donc faire ce que vous voulez !
Widget de formulaire Elementor, il est facile de créer un formulaire de contact. Il est livré avec un générateur de formulaire de contact intuitif par glisser-déposer et une multitude d'options de personnalisation qui le distinguent des autres plugin de formulaire de contact disponibles sur le marché. Vous pouvez facilement personnaliser son style et sa palette de couleurs pour qu'ils correspondent à l'apparence et à l'ambiance de votre entreprise. Sont également inclus divers autres widgets attrayants, plus de 300 modèles professionnels et un générateur de fenêtres contextuelles dans un package pratique. Ce constructeur de pages WordPress complet comprend tous les widgets et fonctionnalités nécessaires, vous n'aurez donc pas besoin d'acheter des constructeurs de pages supplémentaires pour personnaliser davantage votre site Web. De plus, il permet l’intégration de plus de 30 services marketing, c’est pourquoi il est l’un des plugin les plus achetés sur le marché aujourd’hui.
Les en-têtes et pieds de page d’un site Web sont des éléments essentiels. Dans la plupart des cas, l'en-tête fournit la navigation…
Astra et OceanWP sont deux des thèmes WordPress les plus populaires sur le marché. Professionnel…
Créer un excellent site Web d'actualités ne nécessite pas que vous deveniez un concepteur de sites Web. Nous…
Le thème Newspaper est l'un des thèmes WordPress les plus importants conçus par tagDiv, un…
Lorsqu'il s'agit de créer une boutique en ligne, WooCommerce est le plugin incontournable. Il…
Un en-tête est généralement la première chose qu’une personne voit lorsqu’elle visite votre site Web,…