Comment intégrer un formulaire d’inscription à votre site web

Objectif de cet article

Apprenez à ajouter un formulaire d’inscription à une page ou à un emplacement spécifique de votre site Web (par exemple, le pied de page), afin que les acheteurs qui souhaitent en savoir plus sur votre marque puissent facilement s’inscrire. Intégrer un formulaire d’inscription dans le pied de page de votre site pour qu’il fonctionne de pair avec vos autres formulaires publiés constitue une bonne pratique de Klaviyo pour optimiser le développement de votre liste. 

Pour ajouter un formulaire intégré à votre site, procédez comme suit :

1. Créez et personnalisez un nouveau formulaire intégré dans Klaviyo.
2. Copiez le code intégré du formulaire dans la fenêtre modale de publication.
3. Collez le code intégré dans les fichiers de votre site.

Avant de commencer

Avant de créer votre formulaire d’inscription, assurez-vous que les formulaires d’inscription fonctionnent dans votre compte Klaviyo. Cela permet de vérifier que les formulaires publiés dans Klaviyo s’affichent comme prévu sur votre site et que toutes les données nécessaires sont bien synchronisées. 

Voici les conditions nécessaires au bon fonctionnement des formulaires intégrés :

• Les formulaires d’inscription fonctionnent. On parle aussi souvent de « tracking sur le site » installé.
• Le code intégré est collé sur votre site à l’endroit où le formulaire doit s’afficher.

Notez que le collage du code intégré est propre aux formulaires intégrés. Le code n’a pas besoin d’être collé pour les formulaires popup, volants et pleine page, qui peuvent être publiés directement à partir de l’éditeur de formulaires de Klaviyo.

Effectif le 6 décembre 2024 : Klaviyo a amélioré la façon dont les vues sont calculées pour les formulaires intégrés afin de mesurer plus précisément l’engagement. Les vues des formulaires intégrés ne sont désormais enregistrées que lorsque le formulaire est visible dans la fenêtre de visualisation de l’utilisateur. Cette modification peut entrainer un changement notable dans le nombre de vues et une augmentation des taux de complétion, en particulier pour les formulaires intégrés dans le pied de page d’un site, car ceux-ci ne seront comptabilisés que si le visiteur fait défiler le formulaire suffisamment vers le bas pour qu’il entre partiellement dans la fenêtre de visualisation. 

Ajouter un formulaire intégré à votre site

Si vous utilisez Shopify, BigCommerce ou WooCommerce, les abonnés qui s’inscrivent via le formulaire intégré de votre plateforme sont automatiquement ajoutés à votre liste Klaviyo via l’intégration. Pour cette raison, il n’est pas nécessaire de remplacer le formulaire intégré de votre intégration par un formulaire Klaviyo, bien que vous puissiez toujours en créer un dans Klaviyo si vous souhaitez que les abonnés soient collectés dans une liste différente. 

Créer et personnaliser un nouveau formulaire intégré dans Klaviyo

1. Sélectionnez l’onglet Formulaires d’inscription dans la barre de navigation de gauche de Klaviyo.
2. Sélectionnez Créer un formulaire. À partir de là, deux options s’offrent à vous :
   • Personnalisez un modèle préconçu à partir de la bibliothèque de formulaires. Cliquez sur la liste déroulante à côté de Tous les types, puis sélectionnez Intégré pour filtrer la bibliothèque de formulaires et afficher tous les modèles de formulaires intégrés préconçus.
   • Commencez par un modèle de formulaire intégré vierge en sélectionnant Créer un formulaire dans le coin supérieur droit.
3. Dans la fenêtre modale de création qui s’affiche :
   • Nommez votre formulaire. 
   • Choisissez la liste à laquelle les nouveaux abonnés seront ajoutés.
   • Sélectionnez Intégré comme type de formulaire.
     
4. Cliquez sur Enregistrer et passer au design.
5. Utilisez l’éditeur pour mettre en page votre formulaire et ajouter les blocs ou champs de saisie souhaités. Pour en savoir plus sur la personnalisation du formulaire, consultez notre article Démarrer avec les formulaires d’inscription.

   Si vous avez l’intention d’intégrer votre formulaire dans le pied de page de votre site, nous vous recommandons de ne demander que les adresses e-mail afin d’optimiser le nombre d’inscriptions.

6. Lorsque vous êtes satisfait de votre formulaire, cliquez sur Publier. Notez que le formulaire n’apparaitra pas encore sur votre site. Vous devez également coller le code intégré sur votre site pour l’activer.
7. Dans la fenêtre modale Publié qui s’affiche, cliquez sur Copier pour copier le code intégré dans votre presse-papiers. Il s’agit du code que vous devrez coller dans les fichiers de votre site tel que décrit à la section suivante de cet article.
   

Notez que vous trouverez également le code intégré d’un formulaire dans l’onglet Ciblage et comportement de l’éditeur de formulaire.

Coller le code intégré sur votre site

Après avoir publié votre formulaire dans Klaviyo et copié le code intégré, vous devez coller ce code dans les fichiers de votre site web pour que le formulaire s’affiche. L’endroit où coller le code dépend du lieu où le formulaire doit apparaitre (par exemple, dans un fichier de thème ou un fichier de page spécifique) et peut varier en fonction des intégrations. 

Identifiez la plateforme que vous utilisez dans la liste ci-dessous, puis accédez à l’article référencé pour en savoir plus sur le collage du code intégré pour la plateforme en question. 

Si votre plateforme n’est pas répertoriée, consultez l’alinéa « Autres plateformes ».

• BigCommerce
  Pour BigCommerce, collez le code intégré dans les fichiers de votre site à l’endroit où il doit apparaitre. 
  • Accédez à Ajouter le code intégré à votre site BigCommerce.
• Shopify
  Pour Shopify, ajoutez l’application Klaviyo Embedded Form (Formulaire intégré Klaviyo) à votre modèle de page et collez le code intégré du formulaire.
  • Accédez à Ajouter le code intégré à votre site Shopify.
• Square
  Pour Square, collez le code intégré dans les fichiers de votre site à l’endroit où il doit apparaitre.
  • Accédez à Ajouter le code intégré à votre site Square.
• WooCommerce
  Pour WooCommerce, collez le code intégré dans le code HTML de votre site. 
  • Accédez à Ajouter le code intégré au pied de page de votre site WooCommerce.
• Autres plateformes
  Si votre plateforme n’est pas listée ci-dessus, ou si vous utilisez une intégration personnalisée qui ne s’intègre pas avec Klaviyo de façon native, vous devrez vous assurer que 2 extraits de code sont collés sur votre site pour que le formulaire d’intégration fonctionne : 
   
  • Tracking sur le site (également connu sous le nom de Klaviyo.js) permettant que le formulaire d’inscription fonctionne. 
    • Notez que de nombreuses plateformes ajoutent automatiquement le tracking sur votre site lors de l’intégration (y compris Wix, PrestaShop, Magento 1 et 2, etc.). Vérifiez les paramètres d’intégration de votre plateforme dans Klaviyo pour vous assurer que cette option est sélectionnée.
      • Si aucune intégration native n’est proposée par Klaviyo pour votre plateforme, vous devez ajouter le tracking sur le site manuellement.
  • Code intégré du formulaire spécifique 
    • Une fois que le tracking sur le site est activé, vous devez coller le code intégré de votre formulaire dans le code HTML/source de votre site, à l’endroit où vous souhaitez qu’il apparaisse (par exemple, dans le pied de page). 
      • Le code intégré d’un formulaire peut être copié à partir de l’onglet Ciblage et comportement dans l’éditeur de formulaire.

Prochaines étapes

Une fois que vous avez publié votre formulaire intégré dans Klaviyo, collé son code intégré sur votre site et enregistré vos modifications, rendez-vous sur votre site web et actualisez la page.

Le formulaire intégré doit apparaitre sur votre site à l’endroit où vous avez collé le code intégré . 

Résolution de problèmes liés aux formulaires intégrés

Si votre formulaire intégré est actif dans Klaviyo, mais qu’il ne s’affiche pas sur votre site, consultez les conseils de dépannage suivants :

• Actualisez le cache de votre navigateur.
• Vérifiez que votre site web est correctement intégré à Klaviyo et que votre site est également en ligne.
• Assurez-vous que vous avez activé les formulaires d’inscription pour votre compte (cela revient à activer le tracking sur le site).
• Vérifiez que vous avez enregistré les modifications sur votre site web après avoir collé le code intégré.
• Dans l’éditeur de formulaire d’inscription de Klaviyo, accédez à la section Ciblage et comportement et passez en revue les éléments suivants :
  • Dans la section Affichage, vérifiez que : 
    • le code intégré collé sur votre site correspond au code fourni par Klaviyo ;
    • les paramètres de l’appareil dans Klaviyo correspondent à l’appareil que vous utilisez pour afficher le formulaire.
  • Dans la section Ciblage, vérifiez que :
    • vous répondez aux critères de sélection Visiteur ;
    • le formulaire est configuré pour s’afficher sur l’URL que vous consultez et inclut tout paramètre UTM spécifié ;
    • votre position correspond à l’un des paramètres de géolocalisation définis pour le formulaire ;
    • votre panier répond aux exigences de contenu configurées pour le formulaire.
• Relancez le test dans une nouvelle fenêtre de navigation privée.
• Confirmez que 1 seul compte Klaviyo est intégré à votre site. En savoir plus sur les notifications

Autres raisons pouvant expliquer pourquoi le formulaire n’apparait pas

• Si votre site comporte des feuilles de style CSS personnalisées, il se peut qu’elles entrent en conflit avec l’extrait de code de tracking sur le site de Klaviyo (« Klaviyo.js ») et qu’elles interfèrent avec votre formulaire. Demandez à votre développeur d’utiliser les outils de développement de votre navigateur pour inspecter le code du site et identifier le problème ou contactez l’assistance.
• Si vous utilisez un site de type Application monopage, il se peut que votre configuration entraine l’affichage intermittent du formulaire. Consultez votre développeur pour obtenir de l’aide.

Ressources supplémentaires

• Comment contacter l’assistance
• Résolution de problèmes liés aux formulaires d’inscription
• Démarrer avec les formulaires d’inscription