Comment ajouter un formulaire d'abonnement en utilisant le générateur de formulaires d'Elementor Pro

Le constructeur visuel de formulaires Elementor est un outil puissant pour construire des formulaires en ligne complets et esthétiques sans utiliser de code.

Glisser-déposer des widgets de formulaire

tout d'abordWidget de formulaireFaites-le glisser sur la page. Le widget Form crée immédiatement un formulaire de base qui contient déjà les éléments suivantsChamp de nom, champ d'adresse électronique, zone de texte du messagerépondre en chantantBouton de soumission.

Contenu > Champs de formulaire

existentPanneau d'options du formulaireenchamp du formulaireCommencez à nommer le formulaire par une section telle que "Formulaire d'abonnement".

Ensuite, nous voyons les 3 champs qui sont automatiquement générés lorsque le widget est inséré :Nom complet, e-mailrépondre en chantantmessages.

Pour un formulaire de génération de prospects classique, le champ message n'est pas obligatoire. Il peut donc être utilisé en cliquant sur l'option la plus à droite du champ dans le formulaire de génération de prospects.X le supprime, ne laissant que les champs du nom et de l'adresse électronique. Si vous souhaitez ajouter un nouveau champ, il vous suffit de cliquer sur le bouton"Ajouter un projet"est suffisant, mais pour cet exemple particulier, nous n'avons besoin que de deux champs.

Examinons maintenant de plus près les options disponibles pour chaque champ.

Contenu de l'onglet des champs

typologie: le champ d'action de l'Union européenneélémentSous l'onglet, vous pouvez sélectionner les champstypologie. Par exemple, le champ nom estcopiesqui ne permet à l'utilisateur que de saisir un texte standard dans un champ d'une seule ligne. En revanche, le champ courriel est de typecourrielIl n'accepte que le texte avec le formatage approprié, y compris les @ et les points.

onglet (d'une fenêtre) (informatique): Prochaine étape.onglet (d'une fenêtre) (informatique)Options. Ce n'est pas obligatoire, mais nous recommandons de fournir le libellé, même si vous décidez de le masquer pour l'affichage, car ce texte sera affiché dans l'e-mail reçu lorsque quelqu'un soumet le formulaire.

espace réservé: Prochaine étape.espace réservéOptions. Il s'agit d'un texte facultatif qui aide les visiteurs à comprendre ce qu'il faut mettre dans ce champ.

champ obligatoireSi vous souhaitez que le champ soit obligatoire, définissez la valeur de l'attributchamp obligatoireL'interrupteur à bascule est réglé surOui.si ce n'est pas le casPour la plupart des formulaires d'inscription, les champs nom et adresse électronique sont généralement obligatoires. Dans la plupart des formulaires d'abonnement, les champs "nom" et "adresse électronique" sont généralement obligatoires.être. Au bas de la section des champs du formulaire, vous pouvez choisir d'afficher ou de masquer la sectionchamp obligatoire. Si vous souhaitez que l'astérisque rouge typique apparaisse à côté de l'étiquette du champ, réglez-le surAfficher. Au-dessus du marquage obligatoire, les options sont afficher ou masqueronglet (d'une fenêtre) (informatique)en tant qu'option. Bien entendu, si l'étiquette est cachée, les balises requises seront également cachées, puisqu'elles sont attachées à l'étiquette.

largeur de la colonneDans de nombreux cas, un formulaire d'abonnement plus étroit est idéal. Au lieu d'occuper trop d'espace vertical, placez les champs du nom et de l'adresse électronique sur la même ligne. Pour ce faire, cliquez sur le champ du nom(math.) genreLes options du champ s'ouvrent alors. Définissez la valeurLa largeur de la colonne est passée de 100% à 50%.courrielLes champs effectuent la même opération. Après avoir fixé la largeur de colonne des deux champs à 50%, les deux champs doivent être placés côte à côte sur une seule ligne.

Onglet avancé pour les champs

Jetons maintenant un coup d'œil rapide au champ "niveau élevé" de l'onglet. Dans la plupart des cas, aucun ajustement n'est nécessaire à ce niveau.

Il convient toutefois de noter que, dans ce cas, leIDLe champ ne doit jamais être vide. Si, pour une raison quelconque, il est vide, saisissez le nom de l'identifiant manuellement. Sans l'ID, le formulaire ne fonctionnera pas correctement. On notera que le shortcodeincorporerNom de l'identifiant. Si vous souhaitez envoyer les données d'un champ spécifique, vous pouvez copier/coller ce code court dans l'e-mail envoyé. Par défaut, les courriels utilisent le code court généré automatiquement.[tous les domaines]Envoyer toutes les données des champs. Toutefois, dans certains cas, il n'est pas souhaitable d'envoyer les données de chaque champ dans un e-mail. Dans ce cas, vous pouvez saisir manuellement les codes courts des champs que vous souhaitez inclure.

Pour les formulaires d'abonnement ordinaires, ces options avancées peuvent être conservées, à condition qu'un identifiant soit attribué à chaque option.

Contenu > Boutons

Définissez maintenant les options des boutons du formulaire. La plupart des formulaires simples (comme celui-ci) n'ont qu'un seul bouton - le boutonsoumettre (un rapport, etc.)Boutons. Toutefois, si vous souhaitez créer un formulaire à plusieurs étapes, chaque étape doit également comporter un bouton. 

Tout d'abord, sélectionnez le bouton de soumission du formulaire pour leampleur. Cette option permet de "prédisposer"Style, qui définit principalement la taille de la police et le remplissage du bouton. Ces paramètres peuvent être ajustés ultérieurement dans l'onglet Styles du widget, mais pour une configuration rapide, c'est ici que vous devez faire vos choix.

Ensuite, définissez la valeurampleur. Pour les petits formulaires, l'option 20% est généralement un bon choix, mais il est préférable d'utiliser la largeur qui convient le mieux à votre style particulier.

Comme ce formulaire n'est pas un formulaire à plusieurs étapes, nous pouvons ignorer l'option du bouton à plusieurs étapes. Dans le formulairesoumettre (un rapport, etc.)pour saisir le texte du bouton. La valeur par défaut est Envoyer, mais d'autres options courantes peuvent être S'abonner, Démarrer, S'inscrire, etc.

Ensuite, si vous le souhaitez, choisissez unicône (informatique)Affiché sur le bouton "soumettre (un rapport, etc.)"à côté du texte. Si vous choisissez d'afficher l'icône, deux nouvelles options apparaissent.Emplacement de l'icônePermet de placer l'icône dans l'espace "soumettre (un rapport, etc.)"Avant ou après le texte.Espacement des icônesPermet de régler l'espacement entre l'icône et le texte "Soumettre".

Dans certains cas, si vous souhaitez ajouter unID du boutonà utiliser dans le code personnalisé en cas de besoin. Normalement, cet élément est laissé vide, et dans l'étude de cas de cette démo, il sera laissé vide.

Table des matières > Fonctionnement après la soumission

Cette section permet d'ajouter des actions qui seront exécutées après qu'un visiteur a soumis un formulaire. La principale action par défaut est l'envoi d'un courriel contenant les données du formulaire. D'autres actions typiques peuvent consister à rediriger l'utilisateur vers une page spécifique ou à le connecter à une plateforme marketing tierce (par exemple Mailchimp). Dans cet exemple, nous allons effectuer chacune de ces actions.

Action par courriel

Comme nous l'avons mentionné plus haut, la valeur par défaut a été ajoutée pour que nous puissionsOpérations par courrier électronique. Cela peut être fait dans le"Ajouter une opération"pour le voir. Si vous ne souhaitez pas envoyer les données du formulaire par courrier électronique à qui que ce soit, vous pouvez le faire en cliquant sur le bouton "Email" dans la zone de saisie des données.Xpour supprimer cette action. Bien entendu, nous souhaitons généralement envoyer les données par courrier électronique, c'est pourquoi nous vous invitons à laisser cette action en place. Remarquez maintenant qu'il existe un onglet Email sous l'onglet Actions après soumission. Chaque action ajoutée créera son propre onglet d'options sous cet onglet. 

L'onglet Email comporte plusieurs options.

Actions MailChimp

Une fois que vous vous êtes assuré que ces paramètres sont corrects, il est temps d'ajouter une autre action. Cette fois, ouvrez la fenêtre"Opérations postérieures à la soumission"puis cliquez sur le champ situé à côté de Email pour ouvrir le menu déroulant. Dans cet exemple, sélectionnez Mailchimp, ce qui ajoutera un nouveau champ sous l'onglet Email appeléMailChimpLe nouvel onglet de la page d'accueil Cliquez sur l'onglet pour l'ouvrir.

Ce message est reçu si l'intégration de MailChimp n'a pas été configurée :

Définissez votre clé API MailChimp dans les paramètres d'intégration. Vous pouvez également définir une clé API MailChimp différente en sélectionnant Personnalisé.

Il suffit de cliquer sur l'icône"Paramètres d'intégration"Le lien ouvre un nouvel onglet de navigateur dans lequel vous pouvez saisir votre clé API MailChimp. 

Une fois la clé définie, il sera possible d'en sélectionner une dans la liste déroulante de l'onglet MailChimp du formulaire.publicListes. Cela ajoutera automatiquement le nom et l'adresse électronique de l'utilisateur à votre liste MailChimp lorsque l'utilisateur soumettra le formulaire.

opération de réacheminement

Enfin, ajoutons un dernier "Opérations postérieures à la soumission" Ouvrir"Opérations postérieures à la soumission"Cliquez sur le champ et sélectionnez-le dans la liste déroulante."Redirection". Un nouvel onglet "Redirection" s'ajoute alors en dessous.

cliquer (à l'aide d'une souris ou d'un autre dispositif de pointage)"redirections"pour activer ses options, puis entrez la page vers laquelle vous souhaitez rediriger l'utilisateur après l'envoi du formulaire en tant que paramètreURL. Il peut s'agir de n'importe quelle page créée au préalable à cette fin. Dans cet exemple, il s'agirait d'une page remerciant l'utilisateur de s'être inscrit et lui fournissant le cadeau offert ou des informations sur la manière de le télécharger.

Sommaire > Options supplémentaires

Comme il ne s'agit pas d'un formulaire en plusieurs étapes, il est possible de passer directement à l'étape suivante."Étape de configuration"et ouvrez l'onglet"Autres options"Tab.ID du formulaireest facultatif, mais si vous devez utiliser l'identifiant d'un code personnalisé pour localiser ce formulaire, vous pouvez saisir un identifiant unique ici ; sinon, laissez-le vide.

Placez le message personnaliséfixé àêtreAfin de pouvoir introduire la formulation spécifique requise pour chaque message qui peut être envoyé à l'utilisateur. Si vous souhaitez remplacer "Une erreur s'est produite" par "Désolé, mais une erreur s'est produite".
prenez noteLes messages personnalisés sont des messages de secours pour les cas où le navigateur n'affiche pas ses propres erreurs. Souvent, l'utilisateur ne verra jamais ces messages spécifiques.

coiffure

Maintenant que le formulaire fonctionne correctement, vous pouvez lui ajouter quelques styles. Cliquez sur le bouton"type"Tab.

Chaque section du formulaire peut être stylisée, y compris la sectionformulaire (document)même,champ du formulaireetsoumettre (un rapport, etc.)répondre en chantantBoutons à plusieurs niveauxetmessagesrépondre en chantantdéplacer(si utilisé).

Testez votre forme !

Une fois que vous avez configuré le style du formulaire à votre convenance, vous avez terminé. Publiez ou mettez à jour la page et remplissez le formulaire pour vous assurer qu'il fonctionne comme prévu.

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.