Tutoriel complet sur les formulaires d'abonnement d'Elementor Pro

Elementor Visual Form Builder est un outil puissant qui vous aide à créer des formulaires en ligne complets et esthétiques en quelques minutes sans aucun codage.

Cet article présente un formulaire d'abonnement simple avec les trois fonctions suivantes :

Les visiteurs peuvent saisir des informations pour s'inscrire à des listes de diffusion.
Les informations sur les utilisateurs seront synchronisées avec MailChimp et d'autres systèmes de courrier électronique de tiers
Une soumission réussie permet d'accéder à une page permettant de bénéficier d'un cadeau, tel qu'un livre électronique, une feuille de travail ou un livre blanc.

Widget de formulaire à glisser-déposer

Tout d'abord, définissez le "Formulaire formulaire (document)Le widget "Widget" est glissé dans la page. Le widget génère par défaut un formulaire de base comprenant le nom, l'adresse électronique, le message et un bouton d'envoi.

Contenu > Champs de formulaire

Dans le panneau Formulaires, la section Champs de formulaire vous permet de définir le nom du formulaire, par exemple "Formulaire d'abonnement".

Trois champs sont générés par défaut : le nom complet, l'adresse électronique et le message.

Ce formulaire ne nécessite pas de champ de message. Cliquez sur le X à droite du champ pour le supprimer et ne conserver que le nom et l'adresse électronique. Si vous devez ajouter des champs, cliquez sur Ajouter un élément. Dans cet exemple, il ne restera que deux champs.

L'onglet "Contenu" du champ

Chaque champ peut être configuré individuellement avec un contenu inclus :

TypeLe champ Nom est de type Texte, le champ Boîte aux lettres est de type Email, et le champ Boîte aux lettres n'accepte que les formats avec "@" et "." et ".".
Label LabelIl est recommandé de mettre en place des étiquettes, même si elles ne sont pas affichées sur la page. Les étiquettes apparaîtront dans les courriels de notification que vous recevrez.
Placeholder: sert de texte d'invite dans le champ, invitant l'utilisateur à remplir le contenu.
ExigéeIl est recommandé de régler le nom et l'adresse électronique sur "Oui".

En bas de la page "Champs de formulaire", vous pouvez choisir d'afficher des astérisques pour marquer les champs obligatoires et d'afficher des étiquettes. Lorsque vous masquez les étiquettes, les astérisques sont également masqués.

Largeur de la colonneSi vous souhaitez que le formulaire soit plus compact, vous pouvez définir les champs Nom et Email sur 50% afin qu'ils soient affichés côte à côte.

Onglet avancé du champ

En général, aucune modification n'est nécessaire. Il convient toutefois d'être prudent :

L'identifiant du champ ne peut pas être laissé vide. S'il est vide, veuillez le remplir manuellement. Dans le cas contraire, le formulaire peut générer une erreur.
Le code court contient un identifiant qui peut être inséré dans le message pour appeler le contenu du champ correspondant. Par défaut, le code [tous les domaines] Insérer toutes les informations du champ. Si vous ne souhaitez pas insérer le contenu de tous les champs, vous pouvez appeler manuellement le code court du champ souhaité.

En général, il suffit de laisser les paramètres par défaut pour ces formulaires d'abonnement.

Sommaire > Réglage des boutons

La plupart des formulaires de base ne comportent qu'un seul bouton, le bouton de soumission. S'il s'agit d'un formulaire à plusieurs étapes, il y aura d'autres boutons d'étape.

TailleLes polices de caractères et l'espacement des boutons peuvent être réglés rapidement.
LargeurLa valeur commune est 20%. Le réglage réel est déterminé par le style de la page.
texte du boutonLa valeur par défaut est Envoyer, mais elle peut être remplacée par S'abonner, Commencer, S'inscrire, etc.
Paramètres des icônesSi vous souhaitez ajouter des icônes à gauche ou à droite des boutons, vous pouvez les sélectionner ici et ajuster l'espacement.

ID du bouton Peut être utilisé pour des appels de code personnalisés, généralement laissé vide.

Contenu > Actions après soumission

Cette section définit ce que fait le visiteur après avoir envoyé le formulaire. Les exemples incluent l'envoi d'un courrier électronique, la connexion MailChimp ou de sauter des pages.

Courriel Notification par courriel (ajouté par défaut)

Les actions par courrier électronique sont ajoutées par défaut. Il est généralement recommandé de les conserver. Cliquez sur l'onglet Email pour le définir :

Boîte aux lettres entrante
Titre de l'e-mail
Quelles sont les informations de terrain incluses ?
Formatage du contenu des courriels, etc.

Accès à Mailchimp

Allez-y et ajoutez une action : Mailchimp.

Cliquez sur la liste déroulante "Actions après soumission" et sélectionnez Mailchimp.
L'onglet Mailchimp apparaît.
Si l'accès à Mailchimp n'a pas encore été configuré, vous serez invité à saisir les informations suivantes API Cliquez sur l'invite pour passer à l'étape suivante. Elementor sur la page des paramètres, indiquez votre clé d'API.

Une fois la configuration terminée, revenez à l'onglet Mailchimp pour sélectionner une liste d'audience. Lorsqu'un utilisateur soumet un formulaire, ses informations sont automatiquement ajoutées à la liste.

Redirection du saut de page

Ajouter une autre action : Redirect.

Sélectionnez Redirect dans "Actions After Submit".
Après avoir ajouté l'onglet Redirect, entrez l'adresse de saut

Cette page est généralement une page de remerciement qui fournit des instructions ou des liens de téléchargement pour que les utilisateurs puissent récupérer le matériel.

Sommaire > Options supplémentaires

Ce formulaire n'est pas un formulaire à plusieurs étapes, vous pouvez donc sauter l'étape "Paramètres" et passer directement aux "Options supplémentaires".

ID du formulaireSi vous souhaitez identifier ce formulaire à l'aide d'un code personnalisé, vous pouvez définir un identifiant unique, qui n'est généralement pas nécessaire.
Messages personnalisésTexte d'invite personnalisé : Lorsque cette option est activée, vous pouvez définir un texte d'invite personnalisé. Par exemple, vous pouvez remplacer le message par défaut par "Désolé, la soumission a échoué, veuillez réessayer plus tard".

Ces textes d'alerte apparaissent généralement lorsque le navigateur n'affiche pas son propre message d'erreur.

Styles > Paramètres de style de formulaire

Une fois la fonction définie, vous pouvez ajuster le style dans l'onglet "Style".

Les sections suivantes peuvent être personnalisées :

Zone de formulaire (Formulaire)
Champs de saisie (champs de formulaire)
Bouton de soumission
Messages
Style des marches (le cas échéant)

Testez vos formulaires

Après avoir effectué les ajustements de style, publiez ou mettez à jour la page. Il est recommandé de remplir le formulaire une fois par vous-même pour vous assurer qu'il se soumet correctement. Cet abonnementformulaire (document)Il comprend la collecte d'informations, l'accès de tiers et les fonctions de reciblage, et fait partie intégrante du système de marketing.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.