Comment déclencher l’affichage d’un formulaire d’inscription suite à un clic sur un bouton

Objectif de cet article

Découvrez comment déclencher l’affichage d’un formulaire d’inscription sur votre site web lorsqu’un visiteur clique sur un certain bouton. Ce guide vous expliquera comment ajuster votre formulaire pour qu’il s’affiche avec un déclencheur personnalisé, comment créer et ajouter un nouveau bouton à votre site, et comment coller un court extrait de code dans le HTML de votre site afin que le clic sur le bouton déclenche le formulaire d’inscription.

Si vous êtes développeur et que vous souhaitez coder un déclencheur personnalisé pour votre formulaire d’inscription, consultez notre ressource pour les développeurs sur la façon de déclencher de manière personnalisée un formulaire popup ou volant.

Créer un nouveau bouton

This content requires Functional cookies to be enabled.

Update Cookie Settings

Tout d’abord, créez un nouveau bouton sur votre site web qui déclenchera l’affichage du formulaire d’inscription lorsqu’il sera cliqué. Vous devrez vous assurer que votre formulaire d’inscription est correctement configuré dans Klaviyo avant d’ajouter le bouton à votre site. Pour cela, procédez comme suit :

1. Créez un nouveau formulaire d’inscription pour qu’il s’affiche lorsque le bouton est cliqué, ou choisissez un formulaire que vous avez déjà créé.
2. Dans l’onglet Styles, votre Type de formulaire doit être défini sur Popup, volant ou Page entière. Les formulaires intégrés ne peuvent pas être déclenchés lorsqu’un bouton est cliqué.
3. Dans l’onglet Ciblage et comportements , sélectionnez Afficher uniquement sur déclencheur personnalisé sous Timing.
   

4. Lorsque vous êtes satisfait du design et du contenu de votre formulaire, cliquez sur Publier.
5. Ensuite, ouvrez l’éditeur de votre formulaire et choisissez les paramètres suivants
6. Copiez le code ci-dessous :

<button class="klaviyo_form_trigger">Click here</button>

1. Collez le code dans le HTML de n’importe quelle page de votre site web sur laquelle vous souhaitez que le bouton apparaisse. Ce bouton utilisera les styles par défaut du modèle de votre site. Si vous souhaitez personnaliser davantage l’apparence du bouton, consultez votre développeur ou un partenaire Klaviyo.

Notez que si vous ajoutez plusieurs boutons à votre site, et que chacun déclenche des formulaires d’inscription différents, vous devrez utiliser un nom unique pour classer chaque bouton (p. ex., klaviyo_form_trigger1, klaviyo_form_trigger2).

Configurez le bouton pour déclencher votre formulaire d’inscription

This content requires Functional cookies to be enabled.

Update Cookie Settings

Maintenant que vous avez ajouté un nouveau bouton à votre site web, vous devrez ensuite configurer le déclencheur afin que votre formulaire d’inscription s’affiche lorsqu’on clique dessus. Configurez le déclencheur en ajoutant un petit extrait JavaScript personnalisé à votre site :

1. Copiez l’extrait de code ci-dessous :

<script type="text/javascript">
	document.querySelector('.klaviyo_form_trigger').addEventListener('click', function (){
		window._klOnsite = window._klOnsite || []; 
		window._klOnsite.push(['openForm', 'FORM_ID']);
	});
</script>

1. Collez l’extrait de code directement sous le code du bouton que vous avez ajouté à votre site dans la section précédente.
2. Dans l’extrait de code que vous venez de coller, remplacez FORM_ID par l’identifiant de votre formulaire d’inscription.
   • Pour trouver l’ID du formulaire, revenez à Klaviyo et ouvrez l’éditeur de formulaires de votre formulaire d’inscription. Copiez le code à 6 chiffres à la fin de l’URL pour l’ajouter à votre extrait de code ; il s’agit de l’ID du formulaire.
     

3. Le code final doit inclure le nouveau code du bouton ainsi que le déclencheur du formulaire d’inscription avec l’ID de formulaire unique. Veillez à coller ceci sur chaque page où vous avez ajouté le code du bouton.
   • Voici un exemple du code terminé dans un éditeur de pages Shopify :
     

1. Enregistrez vos modifications.

Tester votre bouton

Une fois que vous avez enregistré toutes les modifications apportées au code de votre site, visitez votre site et cliquez sur votre nouveau bouton. Lorsque vous le ferez, le formulaire d’inscription s’affichera.

Vous rencontrez des difficultés ? Rendez-vous sur le Forum de la Communauté de Klaviyo pour obtenir des conseils d’autres utilisateurs de Klaviyo.

Ressources supplémentaires