Envie d’afficher un formulaire dans une jolie popup sur votre site WordPress ? Que ce soit pour collecter des emails, proposer une offre spéciale, ou simplement rendre votre formulaire plus visible, c’est super simple à mettre en place avec Contact Form 7 et Popup Maker ! 🎉
Pas besoin d’être un développeur expert (on aime ça, pas vrai ? 😉). Suivez ce guide pas à pas pour obtenir un bouton de popup avec formulaire comme celui-ci:
Étape 1 : Installer les plugins nécessaires
Pour commencer, installez et activez les deux plugins suivants sur votre site WordPress :
- Contact Form 7 : pour créer le formulaire.
C’est gratuit, léger et efficace ! - Popup Maker : pour afficher ce formulaire dans une popup.
Encore un outil gratuit et facile à utiliser.
Cliquez directement sur ces liens ou rendez-vous dans votre tableau de bord WordPress, section Extensions > Ajouter, recherchez les plugins, puis cliquez sur Installer et Activer. ✅
Étape 2 : Créez votre formulaire avec Contact Form 7
- Allez dans Contact > Ajouter.
- Donnez un nom à votre formulaire (par exemple : Formulaire Newsletter).
- Configurez les champs selon vos besoins. Exemple :
<label> Votre nom
[text* votre-nom]
</label>
<label> Votre email
[email* votre-email]
</label>
<label> Message
[textarea votre-message]
</label>
[submit "Envoyer"]
4. Enregistrez votre formulaire.
Une fois enregistré, vous verrez un shortcode comme (contact-form-7 id= »123″ title= »Formulaire Newsletter »). Copiez-le, on en aura besoin tout de suite !
Étape 3 : Configurez la popup avec Popup Maker
Maintenant que votre formulaire est prêt, il est temps de le transformer en une popup élégante et fonctionnelle grâce à Popup Maker. Suivez ces étapes pour configurer votre popup et en peaufiner le design :
1. Créer la popup
- Allez dans Popup Maker > Ajouter une popup.
- Donnez un titre à votre popup (par exemple : Popup Newsletter). Ce titre est uniquement pour vous, vos visiteurs ne le verront pas.
2. Ajouter le formulaire
Dans l’éditeur de contenu, collez le shortcode de votre formulaire Contact Form 7 : exemple : (contact-form-7 id= »123″ title= »Formulaire Newsletter »).
Si vous le souhaitez, ajoutez un texte d’introduction au-dessus du formulaire pour encourager vos visiteurs à remplir le formulaire.
Exemple de texte : “Inscrivez-vous à notre newsletter et recevez 10% de réduction sur votre première commande !”
3. Configurer les paramètres de la popup
Sous l’éditeur, vous trouverez la section Paramètres de la Popup. Voici comment les configurer :
Déclencheur
- Cliquez sur Ajouter un déclencheur.
- Sélectionnez Au clic sur un élément. Cela signifie que la popup s’ouvrira lorsqu’un visiteur cliquera sur un bouton ou un lien.
- Donnez un nom à ce déclencheur (exemple : Bouton Newsletter).
Ciblage
- Dans l’onglet Ciblage, choisissez où afficher la popup. Vous pouvez :
- La faire apparaître sur toutes les pages de votre site.
- La limiter à certaines pages ou catégories spécifiques.
Vous pouvez laisser cet onglet vide si vous souhaitez déclencher la popup uniquement au clic sur certains boutons.
Personnaliser le design avec les thèmes de Popup Maker
Popup Maker inclut un éditeur de thèmes très pratique pour ajuster l’apparence de votre popup. Voici comment personnaliser votre design :
Accéder à l’éditeur de thème
- Allez dans Popup Maker > Thèmes.
- Cliquez sur Ajouter un thème pour créer un style unique, ou modifiez un thème existant.
Personnalisation visuelle
Dans l’éditeur, vous pouvez ajuster plusieurs éléments :
- Couleur de fond : choisissez une couleur ou une image d’arrière-plan.
Astuce : pour une newsletter, optez pour un fond clair avec des touches de couleur qui reflètent votre branding. - Bordure et ombre : ajoutez une bordure subtile ou une ombre pour faire ressortir la popup.
- Police et texte : personnalisez la taille, la couleur et la famille de police du texte pour qu’il soit lisible et attractif.
Astuce : restez cohérent avec les polices utilisées sur votre site. - Bouton de fermeture : ajustez la position, la taille et la couleur du bouton de fermeture (la petite croix).
Aperçu et ajustements
- Une fois les modifications terminées, cliquez sur Aperçu pour voir à quoi ressemble votre popup.
- Faites des ajustements si nécessaire pour obtenir un design qui correspond à votre site.
Appliquer le thème
Retournez à votre popup dans Popup Maker > Toutes les popups.
Dans la section Thème, appliquez le thème que vous venez de créer ou personnaliser.
Étape 4 : Ajoutez un bouton pour ouvrir la popup
Pour permettre à vos visiteurs d’ouvrir la popup, vous pouvez simplement ajouter un bouton classique à l’aide de l’éditeur WordPress ou d’un builder comme Elementor. Pas besoin de coder ! 🎉
1.Ajoutez un bouton : insérez un bouton ou un lien à l’endroit où vous souhaitez qu’il s’affiche. Vous pouvez utiliser :
- L’éditeur de blocs WordPress (Gutenberg).
- Un builder comme Elementor pour plus de flexibilité.
2.Appliquez la classe CSS de Popup Maker : dans les paramètres avancés du bouton, ajoutez la classe suivante : popmake-ID.
Cela permettra au bouton de déclencher votre popup.
3.Associez l’ID de la popup : dans Popup Maker, chaque popup a un identifiant unique. Assurez-vous d’indiquer cet ID dans les réglages de Popup Maker pour que la popup soit liée au bouton.
Une fois enregistré, le bouton sera prêt, et au clic, votre formulaire s’affichera dans une superbe popup. 💡
Bonus : Testez le bouton sur desktop et mobile pour garantir une expérience fluide. 😊
Quelques conseils bonus
- Optimisez l’apparence : utilisez un peu de CSS pour styliser votre formulaire et rendre votre popup plus attractive.
- Testez sur mobile : vérifiez que tout fonctionne bien sur smartphones et tablettes. Une popup qui bug sur mobile ? Non merci !
- Ajoutez un suivi : connectez votre formulaire à Google Analytics ou une autre plateforme pour mesurer vos conversions.
En conclusion
Créer une popup formulaire sur WordPress avec Contact Form 7 et Popup Maker, c’est un jeu d’enfant. Et le meilleur ? Vous n’avez rien dépensé (on aime tous les solutions gratuites, non ? ).
