Comment déclencher l'affichage d'un formulaire d'inscription lorsqu'on clique sur un bouton ?

Vous apprendrez

Apprenez à faire apparaître un formulaire d'inscription sur votre site web lorsqu'un visiteur clique sur un certain bouton. Ce guide vous aidera à ajuster votre formulaire pour qu'il s'affiche sur un déclencheur personnalisé, à créer et à ajouter un nouveau bouton sur votre site, et à coller un court extrait de code dans le code HTML de votre site pour qu'un 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 développeur sur la façon de déclencher un formulaire popup ou flyout. 

Créer un nouveau bouton 

Tout d'abord, créez un nouveau bouton sur votre site web qui déclenchera l'apparition du formulaire d'inscription lorsque vous cliquerez dessus. Vous devez vous assurer que votre formulaire d'inscription est correctement configuré dans Klaviyo avant d'ajouter le bouton à votre site. Pour ce faire :

1. Créez un nouveau formulaire d'inscription qui apparaîtra lorsque vous cliquerez sur le bouton ou choisissez un formulaire que vous avez déjà créé.
2. Dans l'onglet Styles, votre type de formulaire doit être réglé sur Popup, Flyout ou Full Page. Les formulaires intégrés ne peuvent pas être déclenchés lorsqu'on clique sur un bouton.
3. Dans l'onglet Targeting & Behaviors , sélectionnez Only show on custom trigger sous Timing.
   
4. Lorsque vous êtes satisfait de la conception 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"> Cliquez ici</button>

7. Collez le code dans le code HTML de toute page de votre site web sur laquelle vous souhaitez que le bouton apparaisse. Ce bouton utilise 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 qui déclenchent chacun des formulaires d'inscription différents, vous devrez utiliser un nom unique pour classer chaque bouton (par exemple, klaviyo_form_trigger1, klaviyo_form_trigger2). 

Définissez le bouton qui déclenchera votre formulaire d'inscription

Maintenant que vous avez ajouté un nouveau bouton à votre site web, vous devez configurer le déclencheur pour que votre formulaire d'inscription apparaisse lorsqu'il est cliqué. 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>

2. Collez l'extrait de code directement sous le code du bouton que vous avez ajouté à votre site dans la dernière section.
3. Dans l'extrait que vous venez de coller, remplacez FORM_ID par l'ID de votre formulaire d'inscription.
   • Pour trouver l'ID du formulaire, retournez sur Klaviyo et ouvrez l'éditeur de formulaire pour 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.
     
4. Le code complété doit inclure le code du nouveau bouton et le déclencheur du formulaire d'inscription avec votre identifiant de formulaire unique. Veillez à coller ce code sur chaque page où vous avez ajouté le code du bouton.
   • Voici un exemple du code complété dans l'éditeur de pages de Shopify : 
     
     

     Si vous avez modifié la classe du bouton lors de la dernière étape (c'est-à-dire que vous avez remplacé klaviyo_form_trigger par un autre texte ou ajouté un nombre), veillez à mettre à jour ce code avec le texte que vous avez utilisé. 

5. Enregistrez vos modifications.

Testez 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. Le formulaire d'inscription apparaît alors. 

Vous avez des difficultés ? Rendez-vous sur le forum communautaire de Klaviyo pour obtenir des conseils d'autres utilisateurs de Klaviyo. 

Ressources complémentaires

• Les formulaires d'inscription
• Comment déclencher de manière personnalisée un formulaire popup ou flyout ?
• Comment choisir le ciblage des formulaires et les paramètres de comportement
• Cours : Certification des produits Klaviyo