Comment faire apparaître le formulaire d'inscription Bloom lorsque vous cliquez sur un bouton

Il est difficile d'imaginer Internet sans formulaires d'inscription de nos jours. Nous les utilisons sur notre site Internet pour deux raisons principales en particulier ; obtenir des abonnés ou générer des prospects.

Trouver la bonne façon d'approcher votre public avec des formulaires d'inscription peut être un véritable défi. Certaines personnes veulent jouer la sécurité et ne veulent pas donner à leurs visiteurs l'impression qu'ils « envahissent » leur bulle Internet avec des formulaires d'inscription indésirables. C'est généralement le moment où les gens choisissent un formulaire d'inscription qui apparaît après avoir cliqué sur un endroit spécifique du site Web, ou comment nous l'appelons ; 'Déclenchement au clic'.

Dans le didacticiel d'aujourd'hui, nous allons vous montrer comment exactement vous pouvez utiliser ces déclencheurs de clic dans certaines des parties les plus importantes de votre site Web. Une fois que vous avez réussi à inclure l'option click on trigger, n'oubliez pas de mesurer les résultats qu'elle vous apporte pour voir si elle vous aide à progresser.

Quand utiliser un formulaire d'inscription après un clic

En gros, vous pouvez faire en sorte que n'importe quoi sur votre site Web déclenche un formulaire d'inscription. Mais l'utiliser aux mauvais endroits peut rapidement se retourner contre vous. Les gens sont habitués à cliquer au hasard sur un site Web tout le temps ; quand ils lisent quelque chose, par exemple. Ou même simplement lorsqu'ils regardent autour d'eux, ils cliquent souvent quelque part sur le site Web sans but.

Imaginez maintenant que vous êtes le visiteur ; à chaque clic aléatoire, vous pourriez être confronté à un formulaire d'inscription inattendu en raison d'une action que vous avez entreprise sans but. Cela va sans aucun doute avoir un effet néfaste car, au bon moment, vous aurez l'impression de n'avoir aucun contrôle lorsque vous visitez ce site Web.

Placer un formulaire d'activation du déclencheur de clic à des endroits où les gens choisissent volontairement de cliquer ou de ne pas cliquer (comme les boutons ou les appels à l'action en général) est une autre histoire. Nous avons l'habitude de cliquer sur un CTA (appel à l'action) pour que cela ne nous fasse pas peur. Nous choisissons délibérément de voir quelle est la prochaine étape. Si nous ne sommes pas curieux de voir ce qui se cache derrière un CTA, nous ne cliquerons tout simplement pas. Mais si on veut, on peut. Ce « choix » que les visiteurs ont, les rend plus à l'aise lorsqu'un formulaire d'inscription apparaît finalement et augmente les chances qu'ils s'inscrivent réellement à votre newsletter.

Comment faire apparaître le formulaire d'inscription Bloom lorsque vous cliquez sur un bouton

Abonnez-vous à notre chaîne Youtube

Créez votre formulaire d'inscription

Amener les gens à cliquer sur votre CTA est une forme d'art. Amener les gens à s'abonner ou à devenir un lead via un formulaire d'inscription après avoir cliqué sur votre CTA est l'appréciation de l'art. Vous devez expérimenter et trouver la bonne façon d'approcher votre public cible pour que les deux parties soient finalement satisfaites.

Nous allons vous montrer comment créer un déclencheur de clic pour deux boutons différents sur votre site Web où vous pouvez bénéficier de ce type de formulaire d'inscription ; le module de boutons et le bouton d'en-tête pleine largeur. La façon de travailler est la même, mais la voir dans différents scénarios peut vous aider à comprendre la logique. Après cela, vous pouvez également l'utiliser pour d'autres modules.

Maintenant, avant de vous montrer comment lier les formulaires d'inscription à un CTA, nous allons passer en revue les paramètres d'un formulaire d'inscription. Dans cet article, nous ne vous fournirons pas de conceptions spécifiques, mais uniquement la logique. Certains paramètres sont nécessaires pour s'assurer que le déclencheur de clic fonctionne.

Choisissez le type de formulaire d'inscription

Lors de l'ajout d'un nouveau formulaire d'inscription, le premier choix auquel vous serez confronté est le type de formulaire d'inscription que vous souhaitez utiliser. Pour créer le déclencheur sur effet de clic, vous pouvez utiliser deux des types : le pop up et fly in. Celui que vous choisirez le plus probablement est le pop up. Mais si vous voulez être un peu plus subtil, vous pouvez également utiliser le fly in.

Onglet Configurer

Commencez par nommer votre formulaire d'inscription dans l'onglet Configuration du formulaire d'inscription que vous créez. Ensuite, connectez votre formulaire à un fournisseur de messagerie. Sans le fournisseur de messagerie, le compte et la liste de diffusion, le formulaire sera inactif.

Onglet Conception

Dans l'onglet Conception, vous pouvez styliser le formulaire que vous allez utiliser. Dans cet article, nous n'allons pas faire cela. Nous allons sélectionner un formulaire d'inscription standard sans modifications juste pour voir si cela fonctionne. Vous pouvez, plus tard, toujours revenir au formulaire d'inscription que vous avez créé pour apporter des modifications.

Onglet Paramètres d'affichage

C'est l'onglet dans lequel nous allons lier le formulaire d'inscription à l'un des boutons. Pour vous assurer que les résultats fonctionnent, vous devez vous assurer que le formulaire d'inscription est autorisé à s'afficher sur la page sur laquelle vous souhaitez qu'il fonctionne. Si vous envisagez d'utiliser le même formulaire sur tout le site Web, vous pouvez facilement activer le formulaire pour tout, comme indiqué dans l'image ci-dessous.

De plus, nous souhaitons utiliser le formulaire d'inscription pour les déclencheurs au clic uniquement. C'est pourquoi nous allons désactiver toutes les autres options et activer uniquement celle « Déclencher au clic ». Vous verrez que le champ CSS Selector apparaîtra immédiatement. Plus tard dans cet article, nous utiliserons ce champ pour lier nos boutons au formulaire d'inscription que nous créons. Laissez cette page ouverte dans votre onglet pour pouvoir y accéder immédiatement plus tard.

Commençons

Bien que la logique derrière l'ajout d'un formulaire d'activation de déclencheur de clic dans différents modules soit la même, nous allons l'expliquer dans deux exemples ; le module de bouton et le bouton d'en-tête pleine largeur. Sans comprendre la logique, vous pouvez simplement suivre les étapes de cet article pour y arriver.

Cependant, si vous souhaitez que le déclencheur de clic fonctionne à d'autres endroits que ceux expliqués ci-dessous, vous devrez apporter une légère modification. La seule chose qui va changer est la classe que nous utilisons puisque celle-ci diffère toujours. Si vous souhaitez que ce déclencheur de clic se produise pour toute autre partie de votre site Web, il vous suffit de suivre les mêmes étapes que celles que nous allons montrer ci-dessous et de modifier la classe CSS en fonction de ce que vous utilisez.

Connectez le module de bouton au formulaire d'inscription contextuel

Le premier exemple que nous allons vous guider est le module de boutons. La bonne chose à propos de la création d'un déclencheur de clic pour un module de bouton est que les possibilités sont infinies. Vous pouvez créer n'importe quel type de section ou de ligne contenant un module de boutons et être aussi créatif que vous le souhaitez.

Sans plus attendre, commençons à créer un déclencheur de clic pour le bouton. Nous avons deux façons de le faire; en utilisant la classe CSS ou en créant un identifiant CSS attribué au module.

En utilisant la classe CSS

Ouvrez la page ou créez la page sur laquelle vous souhaitez que le déclencheur de clic fonctionne. Ensuite, ajoutez un module de boutons ou ouvrez les paramètres du module de boutons du bouton sur lequel vous souhaitez qu'il fonctionne.

Allez dans l'onglet Avancé et faites défiler vers le bas. Cliquez dans le champ Élément principal et regardez la classe CSS attribuée au bouton apparaître. Copiez la classe CSS, nous en aurons besoin tout de suite.

Ensuite, accédez à l'onglet Paramètres d'affichage du formulaire d'inscription que vous créez. Dans la partie précédente, nous vous avons déjà montré où la magie va opérer. Nous avons activé 'Trigger On Click' et désactivé toutes les autres possibilités mentionnées. Juste en dessous de 'Trick On Click', vous devrez coller la ligne suivante :

*.et_pb_button_0.et_pb_button.et_pb_module

Comme vous pouvez le voir, il s'agit simplement d'un symbole '*' suivi de la classe que vous avez copiée juste avant cette étape.

Lorsque vous utilisez cette méthode, vous devez garder à l'esprit une chose ; la classe CSS du bouton diffère pour chaque bouton de la même page, mais dès que vous ajoutez un bouton à une autre page, il commencera immédiatement à partir de '0'. Cela signifie que chaque premier module de boutons sur chaque page déclenchera le formulaire d'inscription si votre formulaire d'inscription est disponible pour toutes les pages et tous les articles.

Si vous souhaitez éviter cela, vous pouvez utiliser le déclencheur de clic via un identifiant CSS. Mais dans les cas où vous attribuez un identifiant CSS spécifique au module complet, le moyen le plus simple de le faire est de passer par la classe CSS.

Vous pouvez déterminer sur quelles pages un certain formulaire d'opt-in peut apparaître dans les paramètres d'affichage de votre formulaire d'opt-in. Ce faisant, vous aurez le contrôle et saurez exactement sur quelles pages le formulaire d'inscription apparaîtra après avoir cliqué sur le bouton qui lui est attribué.

En utilisant l'ID CSS

La deuxième méthode consiste à utiliser un identifiant CSS. Ouvrez le module de boutons, accédez à l'onglet Avancé et attribuez-lui un identifiant CSS. Dans ce cas, nous utiliserons « popup ».

Continuez en allant dans l'onglet Contenu du module de boutons et en écrivant le symbole "#" suivi de tout ce que vous voulez. En faisant cela, vous vous assurerez que le visiteur reste au même endroit sur la page tout en cliquant sur le bouton.

Ensuite, revenez aux paramètres de votre formulaire d'inscription et ajoutez « a#popup » au champ Déclenchement au clic. Vous devez toujours écrire « un # » suivi de l'ID CSS que vous avez attribué au module de bouton.

a#popup

Connectez les boutons d'en-tête pleine largeur au formulaire d'inscription

L'autre exemple où nous allons vous montrer comment créer un formulaire d'inscription au clic est le bouton d'en-tête pleine largeur. La seule possibilité que nous avons ici est d'utiliser la classe CSS du bouton. Nous ne pouvons pas attribuer un identifiant CSS via le constructeur Divi au bouton en particulier.

En utilisant la classe CSS

Créez un en-tête pleine largeur ou ouvrez l'en-tête pleine largeur où vous souhaitez ajouter le formulaire d'inscription Trigger On Click. Accédez à l'onglet Avancé de l'en-tête Fullwidth et faites défiler vers le bas jusqu'à ce que vous trouviez le « Button One ». Cliquez sur le champ et copiez la classe CSS attribuée au bouton.

Ensuite, allez dans l'onglet Contenu et tapez le symbole « # » suivi de tout autre élément dans le champ URL du bouton 1.

Enfin, accédez à l'onglet Paramètres d'affichage de votre opt-in et tapez le symbole « * » suivi de la classe que vous avez copiée attribuée au bouton.

*.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button

Dernières pensées

Ce tutoriel devrait vous aider à démarrer avec les déclencheurs au clic et le formulaire d'inscription Bloom. Cela pourrait même vous faire reconsidérer la façon dont vous essayez actuellement de gagner des abonnés ou des prospects. Si vous avez des questions ou des suggestions ; n'hésitez pas à laisser un commentaire dans la section commentaire ci-dessous. Et pendant que vous y êtes ; Dites-nous dans quels cas vous utiliseriez le formulaire d'inscription Trigger On Click.

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image en vedette par BarsRsind / shutterstock.com