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. Publiez le formulaire, puis copiez son code d’intégration.
3. Ajoutez le formulaire à votre site à l’aide des instructions pour votre plateforme ci-dessous.

Avant de commencer

Avant de créer votre formulaire d’inscription, assurez-vous que la fonctionnalité de formulaire d’inscription est activée sur votre site web. Cela permet aux formulaires publiés dans Klaviyo de s’afficher sur votre site et de synchroniser les données avec Klaviyo.

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

• Tracking sur site (Klaviyo.js) installé sur votre site pour activer la fonctionnalité de formulaire d’inscription.
• Le code d’intégration du formulaire placé à l’emplacement où vous souhaitez qu’il s’affiche, ou son ID de formulaire ajouté à un bloc d’application Klaviyo Embedded Form sur Shopify.

Notez que le collage du code intégré est propre aux formulaires intégrés. Les formulaires pop-up, volants et pleine page ne nécessitent aucun collage de code, et peuvent être publiés directement depuis 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 enregistrées que lorsque le formulaire est visible dans la fenêtre de visualisation de l’utilisateur. Cette modification peut entraîner un changement notable dans le nombre de vues et une augmentation des taux de soumission, 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 un visiteur fait défiler la page suffisamment vers le bas pour que le formulaire entre partiellement dans sa fenêtre de visualisation.

Ajouter un formulaire intégré à votre site

Si vous utilisez un formulaire d’inscription fourni par Shopify, BigCommerce ou WooCommerce, vérifiez que vos intégrations sont configurées pour synchroniser les abonnés avec la liste Klaviyo que vous souhaitez. Vous n’avez pas besoin de remplacer ce formulaire s’il envoie déjà les abonnés vers la bonne liste, mais vous pouvez créer un formulaire intégré Klaviyo pour collecter des abonnés dans une autre liste.

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

1. Sélectionnez Formulaires d’inscription dans la barre de navigation de Klaviyo.
2. Sélectionnez Créer un formulaire. Si un sélecteur de canal apparaît, saisissez un nom, sélectionnez Web, puis cliquez sur Créer pour ouvrir la bibliothèque de formulaires. Depuis la bibliothèque, vous pouvez soit :
   • Personnalisez un modèle préconçu à partir de la bibliothèque de formulaires. Ouvrez Style de formulaire et sélectionnez Intégré pour afficher les modèles de formulaires intégrés. Sélectionnez le modèle souhaité.
   • Commencez avec un formulaire vierge en sélectionnant Créer un formulaire vierge.
3. Configurez votre formulaire dans le panneau qui s’ouvre :
   • Saisissez ou confirmez le nom de votre formulaire.
   • Choisissez la liste d’abonnés pour chaque canal que votre formulaire collecte.
   • Si vous avez commencé avec un formulaire vierge, sélectionnez Intégrer comme type de formulaire.
     

4. Pour un modèle, cliquez sur Créer un formulaire. Pour un formulaire vierge, cliquez sur Enregistrer et concevoir.
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.

1. Lorsque vous êtes satisfait de votre formulaire, résolvez toutes les alertes bloquantes. Cliquez sur Publier ou planifier, sélectionnez Publier maintenant, puis cliquez sur Publier maintenant. Le formulaire est publié dans Klaviyo, mais il doit également être ajouté à votre site web comme décrit ci-dessous avant que les visiteurs puissent le voir.
2. Si le Votre formulaire a été publié Lorsqu’une fenêtre s’affiche, cliquez sur Copier pour copier le code intégré dans votre presse-papiers. Si cette fenêtre ne s’affiche pas, copiez le code en suivant le chemin d’accès à l’éditeur ci-dessous.
   

Pour copier le code d’intégration depuis l’éditeur, sélectionnez Ciblage et comportement > Affichage. Copiez l’extrait sous Code d’intégration.

Ajouter le formulaire intégré à votre site

Après avoir publié votre formulaire dans Klaviyo et copié son code d’intégration, suivez les instructions de votre plateforme ci-dessous pour ajouter le formulaire à l’endroit où vous souhaitez qu’il apparaisse (par exemple, dans un fichier de thème ou sur une page spécifique). Pour le bloc d’application Formulaire intégré Klaviyo de Shopify, utilisez l’ID du formulaire à partir du code, plutôt que l’extrait complet.

Identifiez la plateforme que vous utilisez dans la liste ci-dessous, puis accédez à l’article associé en dessous pour obtenir un guide plus spécifique sur l’ajout du formulaire intégré à cette plateforme.

Si vous ne voyez pas votre plateforme, consultez le point à puce « Autres plateformes ».

• BigCommerce
  Pour BigCommerce, collez le code d’intégration dans les fichiers de votre site à l’endroit où il doit apparaître.
  • Accédez à Ajouter le code intégré à votre site BigCommerce.
• Shopify
  Pour Shopify, ajoutez le bloc d’application Klaviyo Embedded Form à votre modèle de page, puis collez l’ID du formulaire à partir du code d’intégration. Par exemple, dans <div class="klaviyo-form-ABC123"></div>, l’ID du formulaire est ABC123.
  • Accédez à Ajouter le code intégré à votre site Shopify.
• Square
  Pour Square, ajoutez une section Code d’intégration dans l’éditeur de site Square Online, puis collez le code d’intégration à l’endroit où vous souhaitez que le formulaire apparaisse.
  • 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 intégré 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).
      • Pour copier le code d’intégration d’un formulaire, sélectionnez Ciblage et comportement > Affichage dans l’éditeur de formulaires, puis copiez l’extrait sous Code d’intégration.

Prochaines étapes

Une fois que vous avez publié votre formulaire intégré dans Klaviyo, l’avez ajouté à votre site en suivant les instructions de votre plateforme et avez enregistré vos modifications, rendez-vous sur votre site web et actualisez la page.

Le formulaire intégré doit apparaître à l’emplacement que vous avez choisi sur votre site.

1. Soumettez le formulaire avec des coordonnées de contact de test. S’il collecte des adresses e-mail, utilisez une adresse que vous n’avez pas encore utilisée pour ce formulaire.
2. Pour l’e-mail double opt-in, confirmez votre inscription à l’aide de l’e-mail de confirmation. Après avoir effectué toute confirmation requise, vérifiez que vous avez été ajouté à la liste d’abonnés sélectionnée pour le formulaire.

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 :

• Videz le cache de votre navigateur, puis rechargez la page.
• 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 sur votre site web (cela revient à activer le tracking sur le site).
• Assurez-vous d’avoir enregistré les modifications apportées à votre site Web après avoir ajouté le code d’intégration du formulaire ou, sur Shopify, son ID de formulaire.
• 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 d’intégration collé sur votre site correspond au code fourni par Klaviyo, ou le bloc d’application Shopify contient l’ID de formulaire correspondant
    • 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 paramètres Audience du formulaire
    • le formulaire est configuré pour s’afficher sur l’URL que vous consultez et inclut tout paramètre UTM spécifié ;
    • Votre localisation correspond à n’importe quel ciblage par localisation configuré pour le formulaire
    • Pour Shopify, votre panier répond à toutes les exigences relatives au contenu du panier configurées pour le formulaire.
• Si le formulaire peut s’afficher pour les nouveaux visiteurs, relancez le test dans une nouvelle fenêtre de navigation privée (incognito). Si le formulaire est limité aux profils existants, aux abonnés, ou aux membres d’une liste ou d’un segment, utilisez un navigateur que Klaviyo reconnaît comme un profil répondant à ces conditions.
• Confirmez que 1 seul compte Klaviyo est intégré à votre site. En savoir plus sur les notifications

Autres raisons possibles pour lesquelles votre formulaire n’apparaît pas

• Si vous avez du CSS personnalisé sur votre site, il est possible qu’il remplace le style du formulaire ou qu’il masque le 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