Comment styliser les formulaires Mailchimp dans WordPress [2 méthodes !]

Publié: 2023-03-02

Vous cherchez à styliser les formulaires Mailchimp dans WordPress ? Ce guide vous montrera que le style d'un formulaire d'inscription Mailchimp peut être facile ! Voici comment procéder.

Temps de lecture approximatif : 5,5 minutes

Vous en avez assez d'essayer de trouver un moyen simple de styliser votre formulaire Mailchimp dans WordPress ?

Nous comprenons. Vous cherchez et cherchez mais ne trouvez pas beaucoup d'options. Surtout ceux qui ne s'attendent pas à ce que vous sachiez coder.

Et c'est frustrant.

Formidable Forms est le meilleur plugin WordPress Form Builder. Achetez le gratuitement!

Mais ce n'est pas obligé. En fait, concevoir le style de votre formulaire Mailchimp peut être amusant .

Ainsi, cet article vous montrera deux façons de styliser votre formulaire d'intégration Mailchimp : avec Mailchimp et Formidable Forms.

Commençons.

Comment styliser les formulaires avec Mailchimp
- 1. Comment styliser les formulaires avec Mailchimp
- 2. Donnez du style à vos formulaires avec un générateur de formulaires

Comment styliser les formulaires Mailchimp dans WordPress

Les formulaires de Mailchimp ont fière allure mais sont un peu basiques.

Et les personnaliser en fonction de votre site est un excellent moyen de les faire ressortir.

Ainsi, il existe trois façons de styliser votre formulaire Mailchimp dans WordPress :

Utilisation du style Mailchimp
Utiliser un générateur de formulaire

Puisque les deux fonctionnent, nous allons vous montrer comment faire chacun.

1. Comment styliser les formulaires avec Mailchimp

Styliser les formulaires de Mailchimp à l'aide de leur méthode peut être compliqué.

Et c'est parce que vous aurez besoin de connaître au moins un peu de code pour commencer. Si vous ne le faites pas, les choses peuvent devenir confuses très rapidement. Nous recommandons donc cette méthode aux personnes confiantes dans leurs capacités de codage.

Pour commencer à personnaliser votre formulaire, rendez-vous sur votre compte Mailchimp et accédez à Audience → Formulaires d'inscription → Formulaires intégrés .

N'hésitez pas à personnaliser les champs de votre formulaire en ajoutant un champ d'adresse e-mail, de prénom ou de nom de famille.

Une fois que vous avez terminé, cliquez sur Continuer .

Ensuite, vous verrez un morceau de code HTML que vous pouvez copier et coller sur votre site pour afficher votre formulaire.

Si vous souhaitez personnaliser l'apparence de ce formulaire, cela signifie personnaliser le code de votre formulaire.

Mais, parfois, vous devez utiliser les hooks CSS de Mailchimp. Et Mailchimp en a plus de 30, comme mc-embedded-subscribe-form ou mc-embed signup.

Si vous êtes suffisamment à l'aise avec CSS et utilisez ces hooks, vous pouvez faire beaucoup de choses avec vos formulaires.

Personnalisez les champs de saisie, votre bouton de soumission et toutes les actions de formulaire sont possibles en collant ce code dans un éditeur et en le modifiant.

Modifier la couleur de fond de votre formulaire

Pour modifier l'arrière-plan de votre formulaire, vous devez cibler le code <div id="mc_embed_signup">.

Ainsi, dans votre section style, vous verrez un morceau de code :

Vous pouvez modifier ce code pour ajuster l'arrière-plan de votre formulaire. Par exemple, vous pouvez changer l' arrière-plan : #fff en arrière-plan : #000 pour changer l'arrière-plan en noir.

Mais maintenant, le texte n'est plus visible. Vous pouvez donc ajouter de la couleur : #fff pour le changer en blanc.

Maintenant, votre formulaire est encore meilleur !

N'hésitez pas à jouer avec la personnalisation pour voir si vous pouvez correspondre à votre site WordPress !

Personnaliser votre bouton d'envoi

Voyons maintenant comment modifier votre bouton d'envoi.

Donc, vous devez cibler le <input type="submit">. Mais nous devrons le faire différemment de l'arrière-plan de votre formulaire.

Rendez-vous dans votre section <style> et ajoutez du code pour vos remplacements de style de formulaire Mailchimp :

Code du bouton du formulaire d'inscription

Cela définira l'arrière-plan de votre bouton sur blanc et votre texte sur noir.

Et maintenant, votre forme commence à se rassembler !

Vous pouvez continuer à personnaliser votre formulaire en ciblant des hooks CSS comme mc-field-groups et le code <input type="email">.

Mais si vous voulez un moyen plus simple de styliser vos formulaires Mailchimp, consultez la méthode ci-dessous.

2. Donnez du style à vos formulaires avec un générateur de formulaires

L'utilisation de CSS personnalisés est idéale pour vous donner le contrôle sur la conception de votre formulaire.

Si vous savez coder.

Mais si vous voulez une option beaucoup plus simple, nous vous suggérons Formidable Forms .

Formidable est le générateur de formulaires le plus avancé de WordPress, ce qui facilite la personnalisation de votre formulaire. Qu'il s'agisse d'un formulaire de contact ou d'une fenêtre contextuelle Mailchimp, Formidable vous couvre.

De plus, avec son intégration Mailchimp et un excellent Visual Form Styler, c'est le parfait constructeur de formulaires de contact Mailchimp.

Alors, installez et activez Formidable, puis nous commencerons.

Obtenez votre styleur de formulaire Mailchimp !

Et il n'y a que quelques étapes pour y parvenir :

Connecter Mailchimp et Formidable
Créez votre formulaire
Personnalisez la conception
Affichez votre formulaire

1. Connectez Mailchimp et Formidable

Dans votre tableau de bord WordPress, accédez à Formidable → Add-Ons , recherchez le module complémentaire Mailchimp , installez-le et activez-le.

Ensuite, allez dans Formidable → Paramètres globaux → Mailchimp .

Vous pouvez saisir votre clé API Mailchimp pour vous connecter à votre compte Mailchimp.

Maintenant que votre compte Mailchimp est connecté, il est temps de créer votre formulaire !

2. Créez votre formulaire

Pour commencer à créer votre formulaire, rendez-vous dans Formidable → Formulaires , et cliquez sur Ajouter nouveau .

Ensuite, choisissez l'un des nombreux modèles de Formidable ou un formulaire vierge pour repartir de zéro.

Ensuite, nommez votre formulaire et cliquez sur Créer .

Le plugin vous amènera à son générateur de formulaires par glisser-déposer, où vous pourrez commencer à créer votre formulaire.

N'hésitez pas à personnaliser le formulaire en ajoutant des champs d'e-mail, de nom et de texte pour répondre à vos besoins.

Une fois terminé, cliquez sur Mettre à jour pour enregistrer vos modifications, accédez à Paramètres → Actions et notifications et cliquez sur Mailchimp .

Une action Mailchimp apparaîtra ci-dessous et vous pourrez personnaliser vos paramètres Mailchimp.

Une fois que vous les avez définis, cliquez sur Mettre à jour pour enregistrer vos modifications. Désormais, ajouter un abonné Mailchimp à votre liste de diffusion est aussi simple que de remplir votre formulaire.

Il est maintenant temps de personnaliser votre formulaire. Alors, dirigeons-nous vers l'onglet Style .

3. Personnalisez le design

Le Visual Form Styler de Formidable facilite la personnalisation d'un beau formulaire pour tout le monde .

Pas besoin de coder ou d'utiliser des crochets CSS. Cliquez simplement et ajustez les paramètres dans la barre latérale.

Ainsi, vous verrez quelques options dans l'onglet Style de Formidable.

Vous pouvez sélectionner l'un des modèles de conception prédéfinis de Formidable pour gagner du temps ou commencer à créer le vôtre.

Pour en personnaliser un, cliquez sur les trois points du modèle et cliquez sur Modifier .

Dans Formidable's Styler, vous pouvez personnaliser votre formulaire en fonction de vos besoins.

Modifiez les tailles de police, le rayon des bordures, les couleurs - tout ce que vous voyez, vous pouvez le personnaliser.

Styler de formulaire visuel de Formidable

Vous pouvez faire preuve de créativité avec votre formulaire et le rendre unique sur votre site Web.

Par exemple, voici un formulaire que nous avons créé pour un site Web de test que nous utilisons !

Le Styler de Formidable vous facilite la tâche, que vous soyez débutant ou expert.

Alors, jouez avec les paramètres et personnalisez le formulaire.

Assurez-vous simplement de cliquer sur Mettre à jour lorsque vous avez terminé pour enregistrer vos modifications.

Maintenant, affichons ce formulaire.

4. Affichez votre formulaire

Tout d'abord, dirigez-vous vers la publication ou la page où vous souhaitez ajouter votre formulaire Mailchimp.

Ensuite, ajoutez un nouveau bloc WordPress, puis recherchez le bloc Formidable Forms et ajoutez-le.

Ensuite, choisissez votre formulaire dans le menu déroulant et vous verrez votre formulaire.

Enfin, cliquez sur Mettre à jour pour enregistrer les modifications et votre formulaire est en ligne !

Nous vous avons dit que Formidable est le meilleur pour les formulaires faciles pour Mailchimp !

En quelques étapes simples, vous avez votre formulaire personnalisé prêt.

Pas de code, pas de tracas - juste une création de formulaire facile.

Obtenez votre styleur de formulaire Mailchimp !

Comment allez-vous styliser les formulaires Mailchimp dans WordPress ?

La personnalisation de votre formulaire d'inscription Mailchimp dans WordPress est le meilleur moyen de faire ressortir vos formulaires.

Et aujourd'hui, vous avez appris deux manières différentes de personnaliser les formulaires intégrés pour Mailchimp : en utilisant du code et en utilisant Formidable Forms. Celui que vous choisirez dépendra de votre confort avec le code, bien que nous vous recommandons Formidable même si vous êtes un codeur expérimenté.

Si vous vous demandez toujours pourquoi Formidable est le meilleur choix, consultez cet article expliquant pourquoi il s'agit du meilleur plugin WordPress de formulaire d'inscription Mailchimp.

Vous ne serez pas déçu.

Si vous êtes prêt à commencer, rendez-vous sur notre page de tarification et optez pour l'un de nos excellents forfaits.

Enfin, suivez-nous sur Facebook, Twitter et YouTube pour découvrir d'autres trucs et astuces Mailchimp !

En savoir plus sur Mailchimp et Formidable !

Saviez-vous que Formidable Forms est l'un des plugins de création de formulaires WordPress les plus rapides disponibles aujourd'hui ? Si vous ne l'utilisez pas déjà, lancez-vous avec notre plugin gratuit ou la version pro complète !