Formulaires Elementor : comment créer un formulaire de contact Elementor

Publié: 2022-06-07

Elementor est l'un des constructeurs de pages les plus populaires avec des fonctionnalités élevées et de vastes fonctionnalités. Mais cela pourrait vous surprendre qu'ils n'aient pas de générateur de formulaire multifonctionnel dans leur tableau de bord. Ce que propose Elementor Form est très simple et direct. Si vous souhaitez utiliser des options plus avancées telles que l'acceptation de paiements ou la réalisation d'enquêtes, vous avez toujours besoin d'un plugin de création de formulaire dédié. De plus, pour gérer les soumissions de formulaires, vous devez installer un plugin supplémentaire pour gérer vos entrées avec Elementor. Dans cet article, nous apprendrons comment créer le meilleur formulaire de contact Elementor et gérer les données avec le même plugin.

Fluent Forms est le créateur de formulaires le plus convivial pour les débutants. Téléchargez maintenant et commencez à créer de belles formes GRATUITEMENT !!!

Comment créer un formulaire Elementor

Nous vous montrerons deux méthodes de création d'un formulaire de contact Elementor pour vous aider à choisir en fonction de vos besoins.

Créer un formulaire de contact avec Elementor Pro
Meilleure façon de créer un formulaire de contact Elementor (gratuitement)

Créer un formulaire de contact avec Elementor Pro

Si vous souhaitez créer un formulaire avec Elementor, vous devrez acheter Elementor pro. Avec la licence pro, vous pouvez accéder au widget de formulaire et concevoir votre formulaire dans le générateur de pages Elementor. Vous aurez également accès à un nombre impressionnant de modèles de formulaires. De plus, vous disposerez d'un certain nombre de fonctionnalités intéressantes qui peuvent transformer votre site Web.

Étapes de création d'un formulaire de contact avec Elementor -

1. Ajouter le formulaire Elementor à votre page

Pour ajouter un formulaire à la page, vous devez ouvrir une page ou en ajouter une nouvelle, puis cliquer sur modifier avec Elementor. Recherchez maintenant les formulaires dans la barre de widgets sur le côté gauche. Si vous n'avez pas la licence pro, vous ne pouvez pas profiter de cette fonctionnalité.

Faites maintenant glisser et déposez le widget sur la page sur laquelle vous souhaitez créer votre formulaire Elementor. Vous verrez un formulaire de contact de base apparaître sur votre page.

2. Ajouter différents champs à votre formulaire Elementor

Vous pouvez voir que le formulaire Elementor a un tas de fonctionnalités sur sa manche. Il vous suffit d'explorer et de créer les formulaires souhaités en quelques minutes. Maintenant, qu'en est-il de vous avez besoin de différents champs et options plutôt que ceux pré-remplis. Vous pouvez ajouter plus de 18 champs à vos formulaires Elementor et ceux-ci sont -

Texte
E-mail
Zone de texte
URL
Tél
Radio
Sélectionner
Case à cocher
Acceptation
Numéro
Date
Temps
Téléchargement de fichiers
Mot de passe
HTML
Caché
reCAPTCHA
Pot de miel

C'est un bon nombre de types de champs avec lesquels jouer. Vous pouvez créer différents formulaires avec ce générateur de formulaires. Vous devez maintenant personnaliser les paramètres et concevoir votre formulaire pour le rendre attrayant.

3. Configuration de la soumission du formulaire

Après la soumission du formulaire, vous pouvez configurer le répertoire de messagerie et les données que vous souhaitez obtenir à partir de la soumission du formulaire. Ce n'est pas sorcier. Vous pouvez configurer toutes les options comme -

À
Matière
Message
De l'email
De Nom
Répondre à
CC
Cci

Toutes les options pour envoyer un e-mail.

4. Concevez votre formulaire Elementor

Il existe une poignée d'options pour concevoir votre formulaire. De la modification de la largeur des colonnes à la modification de la couleur d'arrière-plan de votre formulaire, de la configuration de l'espace réservé à la modification de la typographie, vous pouvez faire ce que vous voulez avec votre formulaire.

Accédez à l'option Style pour donner un aspect unique à votre formulaire.

Pourquoi le formulaire Elementor ne vous suffit pas

Tout d'abord, vous ne pouvez pas utiliser toutes les options d'un plugin de création de formulaire normal dans les formulaires Elementor. Cependant, il ne propose que les bases. Si vous essayez de créer différents formulaires et d'analyser les données, vous aurez besoin d'un autre générateur de formulaires dans votre pile technologique WordPress.

Deuxièmement, aucune fonctionnalité intégrée pour la gestion des soumissions. Vous devez installer un autre plugin pour le faire. Ce qui n'est pas une étape optimale pour votre site Web. Vous devez choisir un plugin de création de formulaires qui propose divers champs, fonctionnalités et intégrations ainsi qu'un service de gestion de données pour analyser vos prospects.

Troisièmement, Elementor est livré avec un widget de code court qui aide à intégrer tous les plugins WordPress qui ont une option de code court. Bien que vous puissiez utiliser le widget de code court d'Elementor pour ajouter vos formulaires, vous ne pouvez pas personnaliser votre formulaire à l'aide d'Elementor. C'est pourquoi vous devez choisir un générateur de formulaires qui peut être modifié dans la mise en page Elementor car ils offrent des addons essentiels pour le faire.

Meilleure façon de créer un formulaire de contact Elementor (gratuitement)

Les formulaires sont l'un des éléments clés de tout site Web. De la capture de prospects à la réalisation d'enquêtes, de la prise de paiements à la réalisation de quiz, un créateur de formulaires moderne devrait avoir ces options dans son package.

En outre, vous devriez pouvoir personnaliser le formulaire dans la disposition Elementor pour lui donner un aspect dynamique et attrayant. De nombreux constructeurs de formulaires ont la fonction de shortcode mais vous ne pouvez pas les modifier sans le pack Elementor.

Fluent Forms vous offre toute la flexibilité nécessaire pour modifier et personnaliser vos formulaires dans le générateur de pages Elementor. Le widget Formulaires pour Elementor comprend plusieurs options pour modifier la couleur et la typographie de chaque champ de votre formulaire. Vous pouvez styliser le contenu global du texte du formulaire selon votre choix.

Vous pouvez choisir la couleur, la taille, le type de police et bien d'autres options pour le formulaire de votre site Web qui correspondent parfaitement à l'apparence de votre site Web.
Vous pouvez avoir accès à des options de typographie pour chaque contenu textuel du formulaire.
Les options de couleur pour tous les champs de formulaire sont également disponibles.
De plus, des options de couleur et de typographie particulières pour les étiquettes de formulaire, les messages d'erreur et les messages de réussite

Vous pouvez également accéder à toutes ces fonctionnalités de base de Fluent Forms -

Plus de 50 champs de saisie et plus de 70 modèles prédéfinis avec lesquels jouer
Saisie automatique des adresses et saisie semi-automatique par glisser-déposer
Protection anti-spam multicouche
Visualisation et analyse des données selon les besoins
Téléchargement de fichiers et gestion des données
Formulaires conversationnels
Module de questionnaire
Logique conditionnelle
Fonction de page de destination

Maintenant que vous connaissez les avantages de l'utilisation de Fluent Forms, créons les formulaires de contact Elementor en un tournemain.

Comment ajouter un formulaire de contact Elementor

Le moyen le plus simple de configurer un formulaire de contact Elementor est avec Fluent Forms. Vous n'avez pas besoin d'installer différents modules complémentaires séparément comme les autres générateurs de formulaires ni de personnaliser le formulaire en dehors d'Elementor.

Voici les étapes pour créer des formulaires de contact Elementor avec Fluent Forms

Installer et activer Fluent Forms Pro

L'installation de Fluent Form est similaire à l'installation de tout autre plugin WordPress. Vous pouvez l'installer et l'activer à partir de votre tableau de bord WordPress ou le télécharger à partir de WordPress.org si vous le souhaitez.

Pour installer à partir du tableau de bord WordPress, accédez au panneau d'administration WordPress et cliquez sur Plugins → Ajouter un nouveau. Maintenant, recherchez Fluent Forms, cliquez sur Installer, puis sur Activer le plugin.

Pour télécharger depuis WordPress.org, cliquez sur ce lien Fluent Forms et téléchargez. Allez maintenant dans votre panneau d'administration WordPress et cliquez sur l'option Ajouter un nouveau à partir des plugins. Téléchargez maintenant le fichier .zip et recherchez Fluent Forms dans la liste de vos plugins installés, cliquez sur Activer.

Bien que Fluent Forms ait un nombre énorme de champs et de fonctionnalités dans la version gratuite, vous devez passer à la version pro pour accéder à toutes les fonctionnalités de Fluent Forms. Voir les fonctionnalités de Fluent Forms Pro par rapport aux fonctionnalités gratuites ici.

La mise à niveau vers la version Pro est assez simple, cliquez sur le lien pour savoir comment mettre à niveau vers Fluent Forms Pro.

Créer un formulaire de contact Elementor

Avec Fluent Forms, vous créez des formulaires magnifiques et créatifs en quelques minutes. Pour créer un formulaire de contact Elementot, accédez à votre tableau de bord WordPress et survolez Fluent Forms à gauche. Cliquez sur l'option Nouveau formulaire.

Une nouvelle page apparaîtra, cliquez sur Nouveau formulaire vierge et vous serez redirigé vers l'interface de l'éditeur de formulaire.

Ajoutez des champs selon votre choix pour créer un formulaire de contact pour votre site Web. Nous avons ajouté les options Nom, E-mail, Objet et Votre message pour notre simple formulaire de contact Elementor.

La personnalisation comme le maintien et le positionnement de l'étiquette est très simple dans Fluent Forms. Vous pouvez également configurer une logique conditionnelle dans vos champs pour créer un formulaire plus avancé. Mais comme nous gardons les choses simples, nous n'avons pas besoin d'autres champs pour remplir le formulaire. Les longs formulaires peuvent être accablants pour les utilisateurs, vous pouvez utiliser le formulaire en plusieurs étapes ou le formulaire conversationnel pour éviter l'abandon du formulaire.

Enregistrez maintenant le formulaire et copiez le shortcode. Vous pouvez utiliser la fonction de shortcode de Fluent Forms qui fonctionne avec tous les constructeurs de pages disponibles, y compris Elementor, Oxygen, Divi, Visual Composer, etc. Et cette fonctionnalité vous offre une prise en charge directe du widget Elementor dans votre formulaire, afin d'utiliser un plugin de moins.

Personnalisez les formulaires à votre guise et vous pourrez accéder à de nombreuses options d'Elemetor. De l'alignement du texte d'entrée au redimensionnement et au remodelage des champs de saisie, de l'ajout de couleurs d'arrière-plan classiques et dégradées à la modification de la typographie. Vous pouvez faire ce que vous voulez avec vos formulaires Elementor.

Dernières pensées

Peu importe que vous utilisiez des formulaires pour le plaisir ou pour les affaires, un formulaire agréable et soigné attire toujours les gens. Le générateur de pages Elementor est livré avec tout sauf un générateur de formulaire natif multifonctionnel. Avec Fluent Forms, vous pouvez tout avoir et concevoir le contact Elementor souhaité.

De plus, vous pouvez publier votre formulaire sur une autre page ou dans un blog, où vous le souhaitez. Essayez différentes mises en page et conceptions, essayez différentes options de champ et créez vos formulaires Elementor selon votre choix. Nous espérons que cet article vous a donné la direction pour créer un formulaire de contact Elementor pour votre site WordPress.

Obtenir Fluent Forms Pro

Si vous avez des questions, commentez ci-dessous. Faites-nous savoir comment pouvons-nous améliorer notre plugin et suivez-nous sur nos plateformes de médias sociaux.