Voulez-vous ajouter facilement un formulaire contextuel modal à votre site WordPress?
Les popups modaux sont la meilleure solution si vous souhaitez que les visiteurs interagissent avec le popup avant de revenir à leur navigateur d'origine.
Dans cet article, nous allons vous montrer la meilleure façon de créer un formulaire contextuel modal dans WordPress qui augmentera l'engagement et les conversions.
Les pop-ups aident à attirer l'attention d'un visiteur pour l'inciter à agir sur votre site. Cela peut être la création d'un compte, l'inion aux alertes par e-mail, l'achat d'un produit et d'autres actions similaires.
Cependant, parfois, vous voudrez peut-être que l'utilisateur interagisse avec la fenêtre contextuelle, puis laissez-les quitter la fenêtre contextuelle et continuer. C'est là que les formulaires contextuels modaux entrent en jeu.
Avec un popup modal, vous pouvez afficher des offres étonnantes lorsque l'arrière-plan s'estompe afin d'attirer l'attention de vos visiteurs. Le visiteur devra entrer les détails après quoi la fenêtre contextuelle se fermera et il pourra revenir à ce qu'il faisait.
Certaines des choses pour lesquelles vous pouvez utiliser le formulaire contextuel modal incluent:
Les possibilités sont nombreuses mais comme le formulaire contextuel modal ne peut être fermé sans action du visiteur, il doit être utilisé au bon endroit et au bon moment pour être réussit à atteindre son objectif.
Aujourd'hui, nous allons vous montrer comment créer un formulaire contextuel modal bien conçu et bien placé qui peut aider à augmenter les conversions et les ventes à des taux incroyables.
Pour les besoins de ce didacticiel, créons une fenêtre contextuelle Gravity Forms qui s'affiche lorsque quelqu'un clique sur un bouton ou un lien.
Il existe de nombreuses façons pour créer un formulaire contextuel modal, mais nous couvrons le moyen le plus simple de le faire. Pour commencer, vous devrez installer et activer deux plugins WordPress:
- Gravity Forms
Gravity Forms est l'un des meilleurs créateurs de formulaires WordPress qui vous permet de créer toutes sortes de formulaires pour votre site. Il dispose d'un générateur de glisser-déposer facile pour concevoir le formulaire. Vous pouvez également prévisualiser et tester le formulaire au fur et à mesure que vous le créez.
Nous utiliserons ce plugin pour créer le formulaire en premier. Si vous utilisez un autre créateur de formulaires comme WPForms , vous pouvez également l'utiliser.
- OptinMonster
OptinMonster est haut la main le meilleur outil de création de popup et de génération de leads. Il vous permet de capturer plus de prospects et d'augmenter les conversions grâce à de superbes fenêtres contextuelles modales, des fenêtres contextuelles lightbox, des diapositives, des bannières et des barres flottantes.
De plus, il est livré avec plus de 100 modèles que vous pouvez utiliser pour créer une fenêtre contextuelle en 5 minutes sans aucune connaissance technique nécessaire.
Une fois les deux plugins activés sur votre site, nous pouvons commencer.
Commencez avec une fenêtre contextuelle modale dès aujourd'hui!
Étape 1: Créez un formulaire avec des formulaires gravitaires
La première chose à faire est de créer le formulaire que vous allez ajouter à la fenêtre contextuelle modale.
Depuis le menu de votre tableau de bord WordPress, visitez les formulaires Gravity en sélectionnant Formulaires »Nouveau formulaire et vous verrez une fenêtre contextuelle qui vous invite à entrer un titre et une deion pour votre formulaire.
Une fois que vous avez rempli les détails, cliquez sur le bouton 'Créer un formulaire' pour ouvrir le page de l'éditeur de formulaire. Ici, vous pouvez créer votre formulaire en faisant glisser et en déposant des champs dans le menu de droite.
Pour ce didacticiel, nous allons créer un formulaire de contact simple. Dans le menu "Champs avancés" , nous ajouterons les champs nom , adresse e-mail et téléphone .
Nous ajouterons également une section de commentaires afin le visiteur peut entrer des détails supplémentaires comme ce qu'il recherche.
Pour ce faire, à partir des "Champs standard" menu, faites glisser et déposez le champ Texte paragaphe dans votre éditeur de formulaire. Cela ouvrira un éditeur de champ où vous pourrez ajouter un titre pour le champ tel que 'Commentaires'.
Si vous souhaitez ajouter du texte d'espace réservé dans le champ, tel que " Saisissez vos commentaires ici ", passez à l'onglet Apparence . Ici, vous pouvez saisir le texte de l'espace réservé et également modifier la taille du champ si vous souhaitez augmenter ou diminuer la case prévue.
De cette manière, vous pouvez ajouter et personnaliser autant de champs que vous le souhaitez pour créer votre propre formulaire. Et vous pouvez utiliser le bouton "Aperçu" du menu supérieur pour voir à quoi ressemblera le formulaire lorsqu'il sera en ligne.
Lorsque vous êtes satisfait de votre formulaire, appuyez sur Bouton "Mettre à jour" pour enregistrer vos modifications.
Modifier la confirmation de soumission du formulaire
Puisque vous créez un formulaire modal, vous devrez définir ce qui se passe après que l'utilisateur ubmets le formulaire.
Gravity Forms vous permet d'afficher un message texte, de diriger l'utilisateur vers une nouvelle page ou de le rediriger vers une URL spécifique une fois le formulaire envoyé.
Pour personnaliser ce qui se passe après l'envoi du formulaire, vous devez accéder à l'onglet Paramètres »Confirmations . Ici, vous pouvez ajouter un message texte, sélectionner une page sur votre site ou saisir une URL spécifique de votre choix.
Lorsque vous êtes prêt, cliquez sur le ' Enregistrer la confirmation ', puis prévisualisez votre formulaire. Vous pouvez tester votre formulaire en le remplissant et en l'envoyant pour voir si vos paramètres fonctionnent correctement.
Modifier les notifications des entrées de formulaire
Pendant que vous êtes sur Gravity Forms, vous pouvez également modifier la manière dont vous souhaitez recevoir les soumissions de formulaires. Vous devrez passer à l'onglet Notifications , et ici, vous pouvez modifier l'adresse e-mail, ainsi que le nom de l'objet et le message à envoyer.
Ceci est particulièrement utile si vous souhaitez que les e-mails soient envoyés à un une adresse e-mail distincte ou un membre de votre équipe.
Copier l'ID du formulaire
Après avoir mis à jour les notifications, vous devez récupérer votre ID de formulaire . Lors de la modification ou de la prévisualisation de votre formulaire, l'ID du formulaire est toujours affiché en haut de la page.
Vous pouvez également trouver l'ID dans l'onglet Formulaires» Formulaires . Ici, vous verrez une liste des formulaires que vous avez créés à l'aide de Gravity Forms. À côté du titre de votre formulaire, vous verrez une colonne intitulée "ID" avec le numéro d'identification.
Copiez cet identifiant et gardez-le prêt car vous en aurez besoin à l'étape suivante. Vous êtes maintenant prêt à passer à autre chose à OptinMonster pour ajouter le formulaire à un popup modal.
Étape 2: Créer une fenêtre contextuelle modale avec OptinMonster
OptinMonster a un constructeur visuel par glisser-déposer qui permet à quiconque de créer facilement un popup modal.
Pour commencer, ouvrez OptinMonster depuis votre tableau de bord WordPress et créez un nouveau popup .
Vous verrez une liste de tous les modèles disponibles. Étant donné que nous avons déjà un formulaire à intégrer, nous allons sélectionner le modèle Canvas qui vous permet de commencer m scratch.
Ensuite, vous devez entrer un nom pour votre campagne, puis sélectionnez le bouton «Démarrer la construction» et un éditeur contextuel s'ouvrira.
Dans l'écran de modification contextuel, vous devrez cliquer sur le bouton "Ajouter des blocs" pour obtenir un menu de blocs. De là, faites glisser et déposez le bloc HTML dans votre popup.
Maintenant, vous devrez utiliser ce shortcode avec l'ID de formulaire que vous avez noté plus tôt dans Gravity Forms.
[gravityforms id = 1] Dans l'éditeur HTML sur le panneau de gauche , supprimez le texte "Ajouter du HTML ici." et collez le shortcode à sa place. N'oubliez pas de remplacer le numéro 1 par votre ID de formulaire.
Vous pouvez également personnalisez davantage le shortcode pour inclure ou exclure le titre et la deion.
[gravityforms id = 1 title = "true" deion = "false"] Pour traduire le code, "true" lui indique de s'afficher tandis que "false" signifie ne pas afficher. Ainsi, dans l'exemple de shortcode ci-dessus, le titre du formulaire apparaîtra tandis que la deion sera masquée.
Après cela, nettoyez la conception de la fenêtre contextuelle en sélectionnant les autres blocs par défaut dans la fenêtre contextuelle et utilisez l'icône de la corbeille pour les supprimer.
Maintenant, vous devrez convertir ce popup normal en un popup modal. Pour ce faire, quittez le menu des paramètres de blocage en cliquant sur l'onglet Conception et revenez au menu principal.
Maintenant, sélectionnez Optin Settings» Close button et utilisez l'interrupteur à bascule pour masquer le bouton de fermeture de la fenêtre contextuelle.
Une fois de plus, revenez au menu précédent et sélectionnez Paramètres des fenêtres contextuelles et désactivez l'option "Fermer en arrière-plan" .
Une fois cela fait, nous vous recommandons d'utiliser le Enregistrer pour stocker vos modifications. Maintenant, le popup modal est configuré et prêt à être personnalisé.
Étape 3: Personnalisez le Popup
Si vous souhaitez créer votre mod al formulaire popup plus intéressant, vous pouvez ajouter plus de blocs comme un titre et une image.
En utilisant l'option «Ajouter des blocs», vous pouvez faire glisser et déposer plus de blocs dans votre popup. Tout d'abord, nous allons ajouter un bloc de texte pour donner un titre à notre popup.
Lorsque vous entrez et sélectionnez le texte, une barre d'éditeur de texte apparaît au-dessus du bloc qui vous permet de personnaliser la taille, la couleur et le format de la police.
Ensuite, nous ajouterons également une image d'arrière-plan juste pour lui donner de la couleur. Sélectionnez le popup et il ouvrira le menu «Optin Settings» sur le panneau de gauche. Ici, vous pouvez ajouter une image de votre médiathèque ou en télécharger une nouvelle.
OptinMonster a une tonne d'options de personnalisation afin que vous puissiez créer une superbe fenêtre contextuelle modale.
Une fois que vous êtes satisfait de la conception de la fenêtre contextuelle, vous pouvez passer à l'étape suivante où vous contrôlerez quand et où la fenêtre contextuelle sera affichée.
Étape 4: Définissez les règles d'affichage de la fenêtre contextuelle modale
Le timing et le placement de votre popup modal peuvent faire une énorme différence dans ses performances.
Par défaut, la fenêtre contextuelle que vous avez créée apparaîtra sur n'importe quelle page si le visiteur passe au moins 5 secondes sur la page.
Pour changer cela, accédez à Optin Onglet Monster »Règles d'affichage . Ici, vous pouvez définir de nouvelles conditions pour votre popup en sélectionnant le menu déroulant qui dit 'heure sur la page'.
Maintenant, vous aurez différentes options telles que:
- Exit Intent® - Affiche la fenêtre contextuelle lorsqu'un visiteur quitte votre site.
- Nouveau visiteur : affiche la fenêtre contextuelle uniquement aux personnes qui visitent votre site pour la première fois.
- MonsterLink ™ - Vous permet d'ouvrir la fenêtre contextuelle lorsque le visiteur clique sur un lien, un bouton ou une image.
- Visiteur de retour - Affiche la fenêtre contextuelle uniquement s'ils ne sont pas nouveaux sur votre site.
- Emplacement physique - Vous permet d'afficher le popup aux personnes d'une zone spécifique.
- Ciblage de page - Fait apparaître la fenêtre contextuelle uniquement si le visiteur arrive sur une page spécifique.
- Ciblage par parrainage - Affiche la fenêtre contextuelle si un visiteur provient d'un site spécifique.
Il existe d'autres options que vous pouvez explorer ou vous pouvez utiliser les paramètres par défaut, mais comme les popups modaux apparaissent généralement au clic, nous sélectionnerons l'option MonsterLink ™.
Lorsque vous choisissez cette option, un code MonsterLink ™ sera généré pour vous. Vous devez le copier en cliquant sur le bouton vert "Copier le code MonsterLink ™" et gardez ce lien prêt pour l'étape suivante.
Maintenant, vos règles d'affichage sont définies et votre popup est prêt à être publié.
Étape 5: Publier le formulaire contextuel modal
Pour rendre votre formulaire en ligne, sur le tableau de bord d'OptinMonster, vous devrez passer à l'onglet" Publier ".
Vous verrez trois états disponibles: "brouillon", "publier" et "planifier". Vous pouvez modifier le statut en "Publier", puis enregistrer vos modifications.
Pour vous assurer que votre campagne a été publiée, accédez à OptinMonster »Campagnes onglet de votre tableau de bord WordPress.
Le statut doit indiquer qu'il est "Publié" en texte vert. Si vous voyez que le statut est en mode "Brouillon" ou "En attente", cliquez dessus pour obtenir un menu déroulant, puis sélectionnez "Publier" pour rendre la popup modale active.
Étape 6: Ajoutez le formulaire contextuel à votre site
Vous pouvez facilement ajouter le formulaire contextuel modal à n'importe quel texte ou bouton de WordPress. Nous allons vous montrer comment l'ajouter à un bouton, un lien et un menu WordPress.
Ajouter MonsterLink ™ à un bouton et Li nk
Si vous souhaitez que la fenêtre contextuelle apparaisse lorsqu'un visiteur clique sur un bouton ou un lien de votre site, vous devez d'abord modifier la page ou l'article sur lequel vous souhaitez ajouter la fenêtre contextuelle .
Dans l'éditeur de blocs, vous pouvez choisir le bouton et vous verrez une barre de menu de paramètres de bloc apparaître au-dessus. Ici, cliquez sur l'icône de lien pour ouvrir le champ URL et vous pouvez coller le MonsterLink ™ à l'intérieur.
De la même manière, vous pouvez mettre en évidence n'importe quel texte de la page ou post, puis utilisez l'icône de lien pour ouvrir le champ URL dans lequel vous pouvez coller MonsterLink ™.
Après avoir fait cela, vous pouvez prévisualiser votre post pour voir comment la fenêtre contextuelle apparaît en cliquant . Une fois que vous en êtes satisfait, publiez ou mettez à jour votre page ou votre message pour le faire vivre.
Ajouter MonsterLink ™ à un menu WordPress
Populaires modales fonctionne bien lorsqu'il est ajouté aux barres de menus WordPress. Puisque nous avons créé un formulaire de contact, nous l'ajouterons à l'élément de menu "contact".
Tout d'abord, vous devez accéder à l'onglet Apparence »Menus . Ensuite, sélectionnez "Liens personnalisés" et un menu déroulant apparaîtra dans lequel vous pourrez saisir une URL et un texte de lien.
Vous devrez coller le MonsterLink ™ à l'intérieur ici et ajouter texte du lien en fonction de votre campagne popup. Nous avons ajouté "Contact" car c'est le but de notre formulaire contextuel modal.
Une fois que vous avez rempli le f ▲, sélectionnez le bouton "Ajouter au menu" en bas de l'éditeur, puis Enregistrer votre menu.
Maintenant, vous pouvez visiter votre page d'accueil et cliquer sur l'élément de menu "Contact" et le formulaire contextuel modal apparaîtra.
Afficher vos soumissions de formulaire contextuel modal
Chaque soumission de formulaire est enregistrée et stockée comme Monster Leads dans votre tableau de bord OptinMonster.
Pour afficher ces entrées, accédez à l'onglet OptinMonster »Abonnés . À partir de là, vous serez redirigé vers l'onglet Prospects du tableau de bord OptinMonster.
Dans cet onglet, vous obtiendrez une liste des noms, adresses e-mail des abonnés et les dates. Si vous souhaitez afficher plus de détails sur chaque entrée, vous pouvez utiliser le menu Actions pour y accéder.
Optimiser votre campagne contextuelle modale
Les formulaires contextuels modaux peuvent être compliqués car il y en a aucune option pour quitter sans remplir le formulaire. Comment savoir si le popup fonctionne bien ou pas?
Puisque vous utilisez OptinMonster, vous n'êtes pas obligé de diffuser votre campagne dans l'obscurité. Il est chargé de données ana des lytiques qui vous montrent les performances de votre campagne.
Pour afficher les performances de votre campagne, accédez d'abord à l'onglet OptinMonster »Campagnes et vous verrez une liste des campagnes que vous avez créées.
Sélectionnez maintenant l'icône d'analyse dans le menu Actions et vous verrez les statistiques de votre campagne.
Il vous montre combien de personnes ont interagi avec votre popup. Vous pouvez également vérifier quelles pages ou quels liens mènent aux conversions les plus élevées.
De cette façon, vous pouvez savoir où fonctionne le popup et où les visiteurs ne sont pas intéressés.
Avec cela, vous avez tout ce dont vous avez besoin pour un formulaire contextuel modal réussi!
Nous espérons que cet article vous a montré comment créer et utiliser un formulaire contextuel modal sur votre site.
Commencez avec une fenêtre contextuelle modale aujourd'hui!
Si vous avez aimé cet article, vous voudrez peut-être en savoir plus sur
