Comment styliser et personnaliser le formulaire de contact Elementor

Avec Elementor, créer des formulaires de contact est désormais plus facile que jamais. Tout ce dont vous avez besoin est de glisser-déposer certains widgets, de personnaliser les paramètres selon vos besoins, et vous avez terminé.

Cependant, personnaliser ou styliser efficacement un formulaire de contact Elementor peut changer considérablement l'apparence de vos formulaires de contact. Un formulaire de contact simple et facile à comprendre obtiendra toujours plus de réponses que des formulaires obscurs et désordonnés. C'est pourquoi le formulaire personnalisé Elementor est si important.

Vous pouvez simplement créer, styliser et personnaliser Elementor à partir de. Cependant, dans cet article, vous apprendrez comment personnaliser un formulaire de contact elementor avec le générateur de formulaire MetForm.

Pourquoi devriez-vous utiliser un formulaire de contact Elementor

Augmenter le taux de conversion
Lorsqu'un utilisateur trouve un moyen de rester en contact avec vous et de poser des questions pertinentes concernant les produits ou services que vous proposez, la possibilité de conversion augmente dans une large mesure. Cela diminue également le taux de rebond. 

Avoir un retour: Un formulaire de contact personnalisé Elementor peut être un excellent moyen d’entendre les utilisateurs de votre site. Si vous souhaitez améliorer votre service ou enrichir l'expérience utilisateur, pensez à ajouter un formulaire de commentaires à votre site Web.

Gardez une trace des demandes de renseignements : Lorsqu'un visiteur de votre site Web vous envoie une demande via un formulaire de contact personnalisé WordPress, celle-ci est dirigée soit vers un e-mail que vous avez fourni, soit vers la liste des entrées de votre tableau de bord WordPress. Il vous aide à suivre facilement les demandes de renseignements. 

Filtrer le spam : Un formulaire de contact Elementor vous évitera les spammeurs. Si vous publiez votre adresse e-mail sur votre site Web, vous risquez de recevoir d'innombrables messages de spam.
Par conséquent, vous risquez de ne pas trouver les messages importants lorsque vous en avez besoin. Un formulaire de contact dans Elementor doté d'une fonction de protection anti-spam ne transmettra que les messages provenant de vrais humains, et non de robots ou de spammeurs. 

Utilisation multiple : Vous pouvez utiliser un formulaire de contact pour diverses raisons. Qu'il s'agisse de recevoir des commentaires, des candidatures à un emploi, des demandes de vente ou des demandes d'assistance, un formulaire de contact est tout ce dont vous avez besoin sur votre site Web. 

De quoi avez-vous besoin pour concevoir un formulaire personnalisé Elementor ?

Vous n’avez besoin que de deux plugins sur votre site WordPress pour commencer à créer des formulaires de contact Elementor :

1. Générateur de pages Elementor
2. Générateur de formulaires MetForm

Dans ce guide pratique, je vais vous expliquer comment créer un formulaire de contact Elementor à l'aide du générateur de pages Elementor et MetForm.

MetForm, qui est un plugin de formulaire de contact personnalisé, a à la fois une version professionnelle et gratuite. Bien que la version gratuite possède toutes les fonctionnalités de base dont vous avez besoin pour créer un formulaire de contact Elementor, la version professionnelle vous permettra d'explorer certains champs et fonctionnalités avancés. En outre, vous ne trouverez guère ces fonctionnalités avancées dans aucun autre formulaire de contact Elementor gratuit ou professionnel, par exemple Elementor Contact Form 7, wpfroms, Ninja Forms, etc.

En ce qui concerne Elementor, vous pouvez utiliser Elementor Pro ou la version gratuite. 

 Sans plus tarder, allons-y :

Installez le plugin de formulaire de contact personnalisé MetForm

Si Elementor est installé, tout ce dont vous avez besoin est d'installer le générateur de formulaires MetForm sur votre site WordPress. Il s'agit d'un plugin de création de formulaires WordPress freemium qui présente les fonctionnalités de base et avancées d'un générateur de formulaires standard. Voici le processus d'installation de MetForm : 

1. Depuis votre tableau de bord d'administration WordPress, accédez à Plugins ➜ Ajouter un nouveau 
2. Rechercher "MoiForm» dans le champ des plugins de recherche en haut à droite.
3. Recherchez MetForm dans le résultat recherché et cliquez sur «Installer maintenant» 
4. Activer MetForm.

Créer et personnaliser un formulaire de contact Elementor à partir de zéro

Maintenant que vous avez tout ce dont vous avez besoin pour créer des formulaires de contact personnalisés WordPress avec Elementor, allons-y et créons un formulaire de contact à partir de zéro.

Étape 1

Créez une page de formulaire de contact Elementor en accédant à Pages ➜ Ajouter un nouveau. Donnez au formulaire un titre approprié, puis cliquez sur «Modifier avec Elementor». 

Étape 2

Dans le champ de recherche du widget Elementor, recherchez MetForm. Faites-le glisser et déposez-le sur la zone de contenu Elementor. 

Étape 3

A gauche, cliquez sur «Modifier le formulaire». 

Si vous créez un formulaire pour la première fois ou si vous souhaitez créer un tout nouveau formulaire, cliquez sur «Nouveau« . 

Si vous avez enregistré les « de » que vous avez créés précédemment, vous pouvez les modifier en cliquant sur «Sélectionnez le formulaire« . 

Étape 4

Pour commencer à créer un formulaire à partir de zéro, cliquez simplement sur le modèle de formulaire de contact vierge. Si vous choisissez d'utiliser la bibliothèque de modèles de formulaires de contact prédéfinis proposée par MetForm, vous pouvez choisir n'importe quel formulaire dans la liste des modèles de formulaire.

Comme nous allons repartir de zéro, continuons avec le modèle vierge pour le formulaire de contact.

Étape 5

Maintenant, vous verrez une fenêtre contextuelle avec la zone de contenu Elementor et la zone de widget.

La zone des widgets Elementor comprend tous les widgets de MetForm et Elementor. 

Pour commencer à créer le formulaire, ajoutez de nouvelles sections de la zone de contenu Elementor selon les exigences du formulaire que vous allez créer.

Étape 6

Faites glisser et déposez les widgets dont vous avez besoin pour donner une forme à votre formulaire. 

Comment styliser et personnaliser les éléments du formulaire de contact Elementor

Maintenant que vous avez glissé et déposé tous les widgets dont vous avez besoin sur votre formulaire elementor, vous pouvez les modifier à votre guise. 

Pour personnaliser des champs ou des boutons de formulaire, il suffit cliquez sur le bouton ou le champ de la zone de contenu Elementor. 

Vous pouvez apporter des modifications au contenu et au style des champs du formulaire. En plus de cela, vous pouvez également explorer l'onglet avancé pour ajouter plus de fonctionnalités. Lorsque vous avez terminé, publiez la page du formulaire de contact. 

Personnalisation de l'intégralité du formulaire de contact dans Elementor

Si votre objectif est de personnaliser l'intégralité du formulaire que vous créez, explorez les paramètres de formulaire fournis par MetForm. 

Sous le réglages généraux, il existe des options pour personnaliser les paramètres de base suivants d'un formulaire : 

1. Titre du formulaire
2. Message de réussite 
3. Connexion requise (Oui/Non)
4. Capturer les données du navigateur utilisateur (Oui/Non)
5. Masquer le formulaire après la soumission (Oui/Non)
6. Stocker les entrées du formulaire dans la base de données (Oui/Non)
7. Titre de l'entrée
8. Limiter le nombre total d'entrées (définir le nombre)
9. Compter les vues (Oui/Non)
10. Arrêter le défilement vertical (activer/désactiver)
11. Redirection vers (où les utilisateurs seront redirigés après la soumission du formulaire)

Envoyer un e-mail de confirmation aux utilisateurs avec une copie de soumission

Si vous souhaitez envoyer un mail de confirmation aux personnes qui remplissent le formulaire de contact personnalisé WordPress, rendez-vous sur le formulaire MetForm. Paramètres ➜ Confirmation Languette. Basculer "E-mail de confirmation à l'utilisateur» sur Oui puis remplissez les champs suivants : 

1. Sujet du courriel
2. Email de
3. Répondre par e-mail à
4. message de remerciement

Comment informer l'administrateur d'une nouvelle soumission de formulaire ? 

Lorsqu'un nouveau formulaire de contact est soumis, il est généralement enregistré dans la base de données des entrées MetForm (si activé dans les paramètres généraux). 

Cependant, si vous souhaitez être informé des nouvelles soumissions, vous pouvez également le personnaliser à partir du Onglet Notification des paramètres du formulaire MetForm. L'onglet de notification comprend les champs suivants : 

1. E-mail de notification à l'administrateur (basculer sur)
2. Sujet du courriel
3. Envoyer à
4. Email de
5. Répondre par e-mail à
6. Remarque de l'administrateur

Quels champs de formulaire devez-vous utiliser sur votre formulaire de contact Elementor ?

Différents types de formulaires nécessitent différents champs de formulaire. Si vous créez un simple formulaire de contact dans Elementor, quelques widgets simples tels que des widgets de texte, d'e-mail, de téléphone, de captcha et de bouton de soumission vous suffisent. 

D'un autre côté, si vous souhaitez créer des formulaires tels qu'un formulaire d'admission, un formulaire d'événement, un formulaire de réservation, etc., vous devrez peut-être utiliser différents champs de formulaire et les personnaliser en conséquence. 

Pour vous faciliter le processus de choix des champs de formulaire appropriés, MetForm propose des dizaines de modèles pour créer une grande variété de types de formulaires tels que le formulaire d'inscription, Formulaire d'enquête WordPress, formulaire de réservation, etc. Vérifiez le modèles de formulaires de démonstration ici. Dans cette liste, vous trouverez également des modèles de formulaires de contact Elementor gratuits pour créer des formulaires de contact en quelques secondes.

Comment intégrer les formulaires de contact personnalisés Elementor à n’importe quelle page ? 

Si vous ne souhaitez pas créer de page pour votre formulaire de contact Elementor, mais plutôt intégrer le formulaire sur n'importe quelle page, MetForm vous permet également de le faire. 

MetForm crée des codes courts individuels pour tous les formulaires que vous créez. En outre, vous disposerez également de codes courts de formulaire de contact personnalisés dans MetForm. Pour trouver le shortcode d'un formulaire de contact spécifique que vous avez créé, accédez au tableau de bord d'administration WordPress ➜ MetForm ➜ Formulaires.

Vous y trouverez des shortcodes de toute forme. Copiez simplement le shortcode, puis collez-le sur la page où vous souhaitez intégrer le formulaire de contact personnalisé WordPress. Bingo ! 

Intégrations que vous pouvez utiliser pour le formulaire de contact Elementor

Si vous utilisez MetForm, vous pouvez intégrer l'API REST pour envoyer des données à une API tierce. En dehors de cela, vous pouvez intégrer le formulaire avec Mailchimp, Google Sheet, MailPoet, Aweber, ConvertKit, GetResponse, ActiveCampaign, Zapier et Slack.

Définir si les utilisateurs doivent s'inscrire/se connecter pour remplir un formulaire

Habituellement, n'importe qui peut remplir un formulaire que vous créez, à moins que vous décidiez d'autoriser uniquement les utilisateurs enregistrés ou connectés à le remplir. 

Donc, si vous souhaitez que seuls les utilisateurs connectés remplissent le formulaire, activez le système de connexion. 

D'un autre côté, vous pouvez également laisser les utilisateurs s'inscrire puis remplir le formulaire. 

Pour activer la connexion et l'enregistrement de l'utilisateur, accédez aux paramètres du formulaire, puis cliquez sur l'onglet Auth. Vous aurez la possibilité d'activer et de désactiver la connexion et l'enregistrement de l'utilisateur pour votre formulaire elementor.

Comment ajouter des méthodes de paiement à un formulaire créé avec Elementor ? 

Si vous utilisez MetForm pour créer votre formulaire de contact Elementor, accédez à la page Paramètres des formulaires puis cliquez sur le Paiement languette. 

Vous trouverez ici des méthodes de paiement telles que Pay Pal et Bande que vous pouvez utiliser pour collecter les paiements de vos clients. Vous devez les configurer manuellement puis basculer le mode de paiement SUR pour les formulaires avec lesquels vous souhaitez recevoir des paiements. 

Comment intégrer les systèmes CRM aux formulaires de contact Elementor ?

Vous pouvez intégrer votre formulaire de contact elementor avec Contact HubSpot, Formulaires Hubspot, Contact Zoho, et Helpscout. 

Ce que vous devez tous faire est d'intégrer les CRM que vous aimez en les activant et en les configurant depuis le GRC languette.

Comment convertir les soumissions du formulaire de contact en publication

C'est l'une des meilleures fonctionnalités de MetForm. MetForm vous permet de convertir les soumissions de formulaires en publications individuelles. Allez simplement dans les paramètres du formulaire, puis cliquez sur l'onglet « Publier ». Activez le formulaire à publier et effectuez les réglages nécessaires. C'est aussi simple que ça.

Derniers mots

Vous connaissez désormais des dizaines de façons de créer un formulaire Elementor ou un formulaire personnalisé Elementor. Tout ce dont vous avez besoin est le générateur de pages Elementor et le générateur de formulaires MetForm. Alors n'attendez plus. Commencez à créer vos formulaires de contact Elementor personnalisés et personnalisez les formulaires Elementor à votre guise. Et enfin, vous pouvez également créer une page de contact complète en utilisant MetForm. 

Si vous avez une confusion ou si vous avez des questions, n'hésitez pas à nous le faire savoir via la zone de commentaires.