Un Formulaire Elementor Mailchimp est l'un des moyens les plus rapides de transformer un visiteur en abonné Le Mailchimp widget dans Modules complémentaires principaux pour Elementor dépose un formulaire d'inscription directement dans votre mise en page, et il vous donne deux façons de l'exécuter : choisissez un formulaire par défaut enregistré ou écrivez votre propre balisage HTML personnalisé. Ci-dessous, je couvre les deux, du panneau Élémenteur jusqu'à la page en direct.
Comment fonctionne le widget de formulaire Elementor Mailchimp #
Le widget rend a Formulaire d'inscription Mailchimp dans Elementor sans plugin de formulaire séparé Connectez-le à un public Mailchimp existant en choisissant un formulaire enregistré, ou créez un formulaire personnalisé avec vos propres champs, étiquettes et cases à cocher Une fois la clé API en place, le formulaire collecte les données des abonnés et les transmet à Mailchimp.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif Si vous ne l'avez pas encore installé, suivez le guide d'installation.
- Le widget Mailchimp activé dans le panneau d'options Master Addons.
- Un compte Mailchimp et une clé API Le widget affiche un avertissement jusqu'à ce que la clé soit enregistrée dans les paramètres des modules complémentaires principaux.
Ajoutez le widget à votre page #
Ouvrir le Editeur d'éléments et recherchez dans le panneau des widgets “Mailchimp.” Faites glisser les modules complémentaires principaux Mailchimp widget dans la section où vous voulez le formulaire Il tombe avec un champ de courriel, une case à cocher de termes, et un bouton “Sign up”, plus un avis rouge que la clé de l'API Mailchimp doit encore être configurée Cet avis est attendu sur une nouvelle installation, alors ne le laissez pas vous jeter.
Utilisez un formulaire d'inscription Mailchimp par défaut #
Dans l'onglet Contenu, laisser Formulaire Type sur Défauts. Le Formulaire d'inscription MailChimp dropdown répertorie les formulaires déjà enregistrés dans votre compte Mailchimp, comme“opt in.” Choisissez celui que vous voulez Le widget tire la structure du champ de Mailchimp et le rend directement sur le canevas.
C'est le moyen le plus rapide d'obtenir un Formulaire d'inscription Mailchimp dans Elementor en direct, puisque Mailchimp gère le mappage de champ Il ne reste plus qu'à styliser le formulaire pour qu'il corresponde à votre page.
Construire un formulaire Mailchimp personnalisé #
Définir le Formulaire Type déposer à Personnalisé. UN Formulaire personnalisé textarea apparaît à l'endroit où vous collez votre propre balisage HTML. Atteignez-le lorsque vous avez besoin de champs supplémentaires, d'étiquettes personnalisées ou d'une disposition de case à cocher particulière.
Le balisage de démonstration dans la vidéo utilise une structure simple que vous pouvez adapter :
<p>
<label for="email">Email address:</label>
<input type="email" id="email" name="EMAIL" placeholder="Your email address">
</p>
<p>
<label>
<input type="checkbox" name="AGREE_TO_TERMS" value="1" required>
I have read and agree to the terms & conditions
</label>
</p>
<p>
<input type="submit" value="Sign up">
</p>Si vous préférez écrire et prévisualiser le balisage en dehors d'Elementor, cet éditeur de code côte à côte avec l'aperçu en direct provient du gratuit Mailchimp pour WordPress (MC4WP) plugin, pas Master Addons lui-même Marquage à gauche, aperçu en direct à droite, afin que vous puissiez obtenir la mise en page juste avant de la coller dans le widget.
Une chose qui fait trébucher les gens avec un balisage personnalisé : votre name les attributs doivent correspondre à vos balises de fusion d'audience Mailchimp. Le champ de messagerie en particulier doit être utilisé name="EMAIL"(ou Mailchimp ne reconnaîtra pas l'adresse de l'abonné et l'inscription échoue silencieusement.
Configurez votre clé API Mailchimp #
Le widget continue d'afficher cet avertissement jusqu'à ce que la clé API soit enregistrée Dans l'administrateur WordPress, ouvrez Additions maîtres et trouvez la zone Paramètres Mailchimp Collez votre clé, enregistrez, et retournez à l'éditeur Elementor L'avertissement s'efface et le formulaire est prêt à prendre les abonnés.
Générez une clé à partir de votre Paramètres du compte Mailchimp. Gardez-le privé et ne le collez jamais dans le balisage du formulaire personnalisé lui-même, car ce balisage est visible par toute personne qui consulte la source de la page.
Style le formulaire #
Le Style tab vous remet les contrôles Elementor habituels pour les champs de formulaire, les étiquettes, les cases à cocher et le bouton Soumettre : couleurs, typographie, espacement, bordures et alignement, donc le Formulaire d'inscription par e-mail Elementor alignez-vous avec le reste de votre design Il récupère vos polices de thème par défaut, donc sur la plupart des sites, vous ne toucherez que la couleur du bouton et un peu d'espacement des champs.
Le résultat sur la page live #
Sur le front-end, le formulaire affiche le champ de messagerie, la case à cocher des termes et le bouton de soumission exactement comme vous les avez définis. Avec la clé API active, les soumissions vont directement dans l'audience Mailchimp que vous avez choisie.
Cas d'utilisation courants #
- Bulletins d'information du blog : déposez un simple champ de messagerie dans le pied de page ou la barre latérale d'un blog.
- Aimants en plomb : associez le formulaire à un bouton de téléchargement pour que les visiteurs s'abonnent avant d'obtenir le guide.
- Pages de lancement de produits : collectez des e-mails d’accès anticipé sur une page de destination.
- Inscriptions à l'événement : utilisez le balisage personnalisé pour ajouter des cases à cocher nom, entreprise ou consentement.
- Abonnements aux pieds : intégrer un compact Widget Mailchimp pour Elementor dans le pied de page du site.
Pour plus d'options de formulaire, consultez le Widget Formulaire de contact 7. Pour qu'une barre d'annonce soit assise à côté d'un formulaire d'inscription, essayez le Widget News Ticker.
Tutoriel Vidéo #
Préférez regarder ? cette procédure pas à pas met en place le widget Mailchimp bout à bout, du choix d'un type de formulaire au formulaire d'inscription sur la page en direct :
Foire aux questions #
Puis-je ajouter un formulaire Mailchimp dans Elementor sans codage ?
Oui. Définissez le type de formulaire sur Par défaut et choisissez un formulaire Mailchimp enregistré dans la liste déroulante Le widget restitue les champs pour vous, donc tout ce que vous faites est de les styliser.
Comment puis-je créer un formulaire Mailchimp personnalisé dans Elementor ?
Définissez le type de formulaire sur Personnaliser et collez votre balisage HTML dans la zone de texte Formulaire personnalisé Assurez-vous que l'entrée de messagerie utilise name=”MAIL et que votre clé API Mailchimp est enregistrée dans les paramètres des modules complémentaires principaux.
Pourquoi le widget dit-il que je dois configurer une clé API Mailchimp ?
Le widget a besoin d'une clé API Mailchimp valide pour envoyer les données des abonnés à votre public Ajoutez la clé dans les paramètres Mailchimp de Master Addons à l'intérieur de l'administrateur WordPress.
Puis-je ajouter des champs supplémentaires comme le nom ou le téléphone au formulaire ?
Oui, mais uniquement en mode personnalisé Ajoutez des champs de saisie HTML standard avec des attributs de nom qui correspondent à vos balises de fusion d'audience Mailchimp, telles que FNAME pour le prénom.
Le widget Mailchimp est-il disponible dans la version gratuite de Master Addons ?
Cela dépend de votre plan Master Addons Vérifiez le page de tarification pour voir quels widgets sont en Free versus Pro.
Envelopper #
Les modules principaux Widget Mailchimp est un moyen direct d'ajouter un Formulaire Elementor Mailchimp vers n'importe quelle page. Accédez à un formulaire par défaut pour la vitesse, ou passez en mode personnalisé lorsque vous souhaitez un contrôle total sur le balisage et les champs. Quoi qu'il en soit, il se connecte à votre audience Mailchimp une fois la clé API définie. Parcourir l'ensemble complet de Widgets et extensions Master Addons pour plus d'outils pour faire croître votre liste.
