Comment créer des formulaires avec Elementor Pro : Contact, Inscription et Multi-étapes

Les formulaires sont essentiels pour tout site web, des simples formulaires de contact aux flux d'inscription complexes en plusieurs étapes. Elementor Pro comprend un widget de formulaire intégré qui élimine le besoin d'un plugin de formulaire séparé dans de nombreux cas. Dans ce guide, nous couvrons comment créer des formulaires de contact, des formulaires d'inscription et des formulaires en plusieurs étapes en utilisant Elementor Pro, ainsi que les options d'intégration pour le marketing par e-mail et les services CRM.

Ce tutoriel nécessite Elementor Pro. La version gratuite d'Elementor n'inclut pas le widget de formulaire.

Aperçu du Widget de Formulaire Elementor

Le widget de formulaire Elementor prend en charge ces types de champs :

Créer un Formulaire de Contact

Étape 1 : Ajouter le Widget de Formulaire

1. Ouvrez n'importe quelle page dans l'éditeur Elementor
2. Recherchez "Formulaire" dans le panneau des widgets
3. Faites glisser le widget de formulaire dans votre mise en page
4. Le formulaire par défaut comprend les champs Nom, Email et Message

Étape 2 : Configurer les Champs du Formulaire

Pour un formulaire de contact standard, cette configuration de champs fonctionne bien :

1. Nom (Champ de texte, requis) – Texte d'espace réservé : "Votre nom"
2. Email (Champ e-mail, requis) – Texte d'espace réservé : "[email protected]"
3. Objet (Champ de texte, optionnel) – Texte d'espace réservé : "Comment pouvons-nous vous aider ?"
4. Message (Champ de zone de texte, requis) – Texte d'espace réservé : "Parlez-nous de votre projet...", Lignes : 5
5. reCAPTCHA ou Honeypot pour la protection contre le spam

Étape 3 : Configurer les Actions Après Soumission

Sous la section "Actions Après Soumission", configurez ce qui se passe lorsqu'un utilisateur soumet le formulaire : For related information, see our guide on Elementor complete guide.

• Email : Envoyer les données du formulaire à votre adresse e-mail (ou à plusieurs adresses)
• Redirection : Envoyer l'utilisateur vers une page de remerciement après la soumission
• Popup : Afficher une popup de confirmation
• Webhook : Envoyer les données du formulaire à une URL externe (Zapier, Make, API personnalisée)
• Mailchimp / ConvertKit / Drip : Ajouter des abonnés aux listes de marketing par e-mail
• Slack : Envoyer des notifications à un canal Slack
• Discord : Envoyer des notifications à un webhook Discord

Étape 4 : Styliser le Formulaire

Dans l'onglet Style, personnalisez l'apparence visuelle : For related information, see our guide on Elementor templates and kits.

• Mise en page du formulaireChamps empilés (pleine largeur) ou en ligne (côte à côte)
• Style des champs : Bordure, couleur de fond, remplissage, rayon de bordure, couleur de l'état de focus
• Style des étiquettes : Famille de polices, taille, couleur, espacement
• Style des boutons : Couleur de fond, couleur du texte, bordure, effets au survol, option pleine largeur
• Messages : Couleurs et typographie des messages de succès et d'erreur

Créer un Formulaire Multi-Étapes

Les formulaires multi-étapes sont utiles pour les longs formulaires (inscriptions, candidatures, enquêtes) où afficher tous les champs à la fois peut submerger les utilisateurs. Elementor Pro prend en charge les formulaires multi-étapes nativement. For related information, see our guide on creating landing pages with Elementor.

Comment Configurer les Étapes

1. Ajoutez un widget Formulaire à votre page
2. Dans la liste des champs du formulaire, ajoutez un type de champ "Étape" entre les groupes de champs
3. Chaque champ Étape crée une nouvelle étape avec un bouton "Suivant" et "Précédent"
4. Exemple de structure :
   • Étape 1 : Nom, Email, Téléphone (Informations personnelles)
   • Étape 2 : Société, Budget, Calendrier (Détails du projet)
   • Étape 3 : Message, Téléchargement de fichier (Informations supplémentaires)

Les formulaires multi-étapes affichent un indicateur de progression montrant à quelle étape se trouve l'utilisateur. Cela réduit la complexité perçue et améliore les taux de complétion par rapport à l'affichage de tous les champs à la fois.

Créer un Formulaire d'Inscription Utilisateur

Elementor Pro peut créer des formulaires d'inscription d'utilisateur WordPress sans plugin séparé :

1. Ajoutez un widget Formulaire et configurez les champs (Nom d'utilisateur, Email, Mot de passe)
2. Sous "Actions Après Soumission", ajoutez l'action "S'inscrire"
3. Mappez chaque champ de formulaire au champ utilisateur WordPress correspondant
4. Définissez le rôle par défaut pour les nouvelles inscriptions
5. Redirigez éventuellement les utilisateurs vers leur page de compte après l'inscription

Remarque : WordPress nécessite qu'un administrateur approuve les nouveaux utilisateurs par défaut. Vous pouvez modifier cela sous Réglages → Général → Adhésion si vous souhaitez que les utilisateurs s'inscrivent librement.

Intégration avec les Services de Marketing par Email

Elementor Pro s'intègre directement avec des plateformes de marketing par email populaires :

Pour chaque intégration, le processus est le suivant : entrez la clé API de votre service dans les paramètres d'intégration d'Elementor, puis sélectionnez le service comme "Action Après Soumission" dans votre formulaire. Mappez vos champs de formulaire aux champs du service, et les abonnés seront ajoutés automatiquement lorsque le formulaire est soumis.

Stratégies de Protection contre le Spam

Les formulaires de contact attirent les bots de spam. Elementor Pro propose plusieurs options de prévention du spam :

• Google reCAPTCHA v3 : Détection de spam invisible qui évalue les soumissions sans interaction de l'utilisateur. Recommandé pour la plupart des formulaires
• reCAPTCHA v2 : La case à cocher "Je ne suis pas un robot". Plus visible mais peut réduire les complétions de formulaire
• Champ Honeypot : Un champ invisible que les bots remplissent. Si le champ contient des données, la soumission est rejetée. Aucune interaction de l'utilisateur requise
• Champ d'acceptation : Une case à cocher obligatoire (consentement RGPD, acceptation des conditions) qui agit également comme un moyen de dissuasion contre les bots

Nous recommandons d'utiliser reCAPTCHA v3 combiné avec un champ Honeypot. Cela fournit deux couches de protection contre le spam sans impact visible sur l'utilisateur.

dans l'expérience utilisateur.

Formulaires Elementor vs Plugins de Formulaire Dédiés

Les Formulaires Elementor sont suffisants pour les formulaires de contact, les inscriptions à des newsletters et les formulaires d'inscription simples. Pour des formulaires complexes nécessitant un traitement des paiements, une logique conditionnelle avancée ou une gestion sophistiquée des soumissions, des plugins de formulaire dédiés comme Gravity Forms ou WPForms sont plus appropriés.

Questions Fréquemment Posées

Puis-je utiliser les formulaires Elementor sans Elementor Pro ?

Non. Le widget Formulaire est exclusif à Elementor Pro. Si vous avez besoin de formulaires avec la version gratuite d'Elementor, utilisez un plugin de formulaire séparé comme Contact Form 7 (gratuit), WPForms Lite (gratuit) ou Gravity Forms (premium).

Où sont stockées les soumissions de formulaires Elementor ?

Les soumissions de formulaires sont stockées dans la base de données WordPress et accessibles sous Elementor → Soumissions dans le panneau d'administration. Vous pouvez visualiser, exporter (CSV) et supprimer les soumissions. Les soumissions sont également envoyées aux adresses e-mail que vous configurez dans l'action Email.

Les formulaires Elementor peuvent-ils accepter des téléchargements de fichiers ?

Oui. Ajoutez un champ de type Téléchargement de Fichiers à votre formulaire. Vous pouvez configurer les types de fichiers acceptés (PDF, JPG, PNG, DOCX, etc.) et la taille maximale des fichiers. Les fichiers téléchargés sont stockés dans la bibliothèque de médias WordPress et liés à la soumission du formulaire.

Comment ajouter une logique conditionnelle aux formulaires Elementor ?

Elementor Pro prend en charge une logique conditionnelle basique : afficher ou masquer des champs en fonction de la valeur d'un autre champ. Dans les paramètres du champ, activez "Conditionnelle" et définissez les conditions (par exemple, afficher le champ "Société" uniquement lorsque le bouton radio "Je suis une entreprise" est sélectionné). Pour une logique conditionnelle avancée (calculs, conditions multi-niveaux), un plugin de formulaire dédié peut être plus adapté.

Puis-je créer des formulaires popup avec Elementor ?

Oui. Créez un modèle popup dans Elementor, ajoutez un widget Formulaire à l'intérieur, et définissez les conditions de déclenchement (clic, pourcentage de défilement, intention de sortie, délai). Cela est utile pour les inscriptions à des newsletters, les aimants à prospects et les offres promotionnelles sans ajouter de formulaire à la mise en page principale.

Comment puis-je prévenir le spam sur les formulaires Elementor ?

Utilisez Google reCAPTCHA v3 (invisible) combiné avec un champ Honeypot pour une protection en deux couches. Cela bloque les bots automatisés sans ajouter de friction pour les vrais utilisateurs. Pour les formulaires à fort volume de spam, envisagez d'ajouter un champ d'Acceptation (case à cocher requise) comme troisième couche.