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.

Avant de commencer, assurez-vous que le JavaScript sur site de Klaviyo (Klaviyo.js) est installé sur chaque page où vous ajoutez le bouton. Vérifiez que les formulaires d’inscription sont activés sur votre site web.

Créer un nouveau bouton

This content requires Functional cookies to be enabled.

Update Cookie Settings

Avant d’ajouter un nouveau bouton à votre site web, configurez votre formulaire d’inscription dans Klaviyo :

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. Sélectionnez Modifier les styles dans l’éditeur de formulaire. Définissez Type de formulaire sur Fenêtre contextuelle, volant, Pleine page, ou Bannière. Les formulaires intégrés ne peuvent pas être déclenchés lorsqu’un bouton est cliqué.
3. Sélectionnez Ciblage et comportement > Affichage. Sous Calendrier, définissez Afficher le formulaire sur Uniquement sur un déclencheur personnalisé.

Les déclencheurs personnalisés contournent les règles de ciblage, d’appareil, et de fréquence du formulaire. Si vous devez limiter les personnes pouvant ouvrir le formulaire, appliquez ces conditions au bouton de votre site web ou à votre code personnalisé.

1. Lorsque vous êtes satisfait de la conception et du contenu de votre formulaire, cliquez sur Publier ou planifier, sélectionnez l’option Publier maintenant, puis cliquez sur Publier maintenant pour mettre le formulaire en ligne.
2. 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.

Si vous ajoutez plusieurs boutons à une même page, attribuez à chaque bouton un nom de classe unique (par exemple, klaviyo_form_trigger1, klaviyo_form_trigger2), même s’ils ouvrent le même formulaire d’inscription. L’extrait JavaScript ci-dessous ne s’attache qu’au premier bouton avec une classe correspondante. Ajoutez un extrait correspondant pour chaque bouton.

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 de votre formulaire, retournez dans Klaviyo, puis ouvrez l’éditeur de formulaires pour votre formulaire d’inscription. Copiez l’ID juste après /forms/ dans l’URL. L’ID peut contenir des lettres et des chiffres ; conservez exactement la même casse que celle affichée lorsque vous remplacez FORM_ID dans votre extrait de code.
     

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