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

Objectif de cet article

Apprenez à ajouter un formulaire intégré à votre site web en copiant le code d’intégration et en le collant dans les fichiers du thème ou dans l’éditeur de page de votre boutique d’e-commerce, de votre blog ou de votre site. Vous devez coller ce code à l’endroit où vous souhaitez que le formulaire intégré apparaisse, ce qui dépend de la structure de votre site.

Ces instructions ne s’appliquent qu’aux formulaires intégrés. Les formulaires pop-up, volants et pleine page ne sont pas concernés. Une fois que vous avez collé le code d’intégration sur votre site, vous pouvez modifier votre formulaire dans Klaviyo et publier les changements directement. Notre système se chargera du reste, sans que vous ayez à modifier le code.

Si vous n’utilisez pas les intégrations Shopify, BigCommerce, Magento ou WooCommerce, qui synchronisent automatiquement l’extrait de code Klaviyo.js (pour Shopify, la synchronisation passe par une application d’intégration sur la plateforme), vous devrez d’abord installer ce script sur votre site afin de pouvoir publier des formulaires. Klaviyo.js est également connu sous le nom d’extrait de code de tracking Active on Site, car il permet également d’assurer le suivi de l’activité des utilisateurs. Pour en savoir plus à ce sujet, consultez notre guide sur le tracking.

Créer un formulaire intégré

1. Accédez à Sign-up forms > Create sign-up form > Create new sign-up form.
2. Attribuez un nom à votre formulaire et choisissez une liste à laquelle ajouter les abonnés.
3. Comme type de formulaire, sélectionnez Embed.
4. Cliquez sur Save and Continue to Design.
   
5. Utilisez l’éditeur pour mettre en page votre formulaire et ajouter les champs souhaités.

Obtenir le code d’intégration

Une fois que votre formulaire est mis en page, il y a deux endroits où vous pouvez récupérer son code d’intégration :

1. Dans la section Targeting & Behavior :
   
2. Au moment de la publication d’un formulaire intégré, une fenêtre modale s’affiche et vous invite à coller le code d’intégration sur votre site :
   

Ensuite, publiez votre formulaire et copiez l’extrait de code que vous pourrez coller ensuite sur votre site.

Coller le code sur votre site

Sur votre site, vous devez coller le code à l’endroit où vous souhaitez que le formulaire intégré apparaisse, ce qui varie en fonction de l’intégration utilisée. Vous trouverez ci-dessous quelques exemples de cas d’utilisation. Pour trouver les instructions d’intégration applicables dans votre cas, faites défiler cette page vers le bas pour trouver la plateforme que vous utilisez (BigCommerce, Shopify, Woocommerce ou d’autres plateformes).

BigCommerce

Si vous souhaitez remplacer votre formulaire de pied de page BigCommerce par un formulaire Klaviyo, ou si vous souhaitez ajouter un formulaire Klaviyo ailleurs sur votre site, plusieurs options s’offrent à vous (voir ci-dessous).

Utiliser l’éditeur de page

1. Accédez à Storefront > Webpages (Vitrine > Pages web).
2. Sélectionnez la page où le formulaire intégré doit apparaître.
3. Sélectionnez Edit (Modifier) dans le menu Action (Action).
   
4. Cliquez sur HTML dans la section Page Content (Contenu de la page) pour ouvrir l’éditeur de code source.
5. Collez le code d’intégration du formulaire.
6. Cliquez sur Update (Mettre à jour) et enregistrez vos modifications.

Utiliser l’éditeur de thème

1. Connectez-vous à votre boutique BigCommerce.
2. Accédez à Storefront > My Themes (Vitrine > Mes thèmes).
3. Dans la section Current Theme (Thème actuel), cliquez sur Customize (Personnaliser).
4. Sélectionnez la page à laquelle vous souhaitez ajouter le formulaire intégré.
5. Au sein de la page, trouvez la section où vous souhaitez faire apparaître le formulaire.
6. Utilisez un glisser-déposer pour ajouter un bloc HTML.
7. Dans l’éditeur du bloc, collez le code d’intégration de votre formulaire.
8. Enregistrez le bloc.
9. Enregistrez vos modifications.
   
   

Insérer le formulaire dans les fichiers de votre thème

1. Accédez à Storefront > My Themes (Vitrine > Mes thèmes).
2. Dans la section Current Theme (Thème actuel), ouvrez le menu déroulant Advanced (Avancé).
3. Cliquez sur Edit Theme Files (Éditer les fichiers de thème).
   
   
   1. Si l’option Edit Theme Files (Éditer les fichiers de thème) n’apparaît pas, procédez comme suit :
      1. Faites une copie du thème.
      2. Modifiez la copie.
4. Accédez au fichier qui contient le code source de la section à laquelle vous souhaitez intégrer le formulaire.
5. Trouvez la partie du code correspondant à l’endroit où le formulaire doit apparaître.
6. Collez le code d’intégration.
7. Enregistrez vos modifications.

Shopify

Pied de page Shopify pour tous les thèmes

Si vous souhaitez placer votre formulaire intégré dans le pied de page de votre site, suivez les étapes ci-dessous. Ces instructions s’appliquent aux thèmes vintage et Shopify 2.0.

1. Accédez à la page d’administration de votre compte Shopify.
2. Accédez à Online Store > Themes (Boutique en ligne > Thèmes).
3. Cliquez sur …, puis sélectionnez Edit code (Modifier le code).
4. Ouvrez votre fichier de thème footer.liquid.
5. Localisez l’endroit où vous souhaitez que le formulaire s’affiche.
   1. Dans l’exemple ci-dessous, le formulaire d’inscription s’affichera au-dessus des informations de copyright de votre site :
      
6. Collez le code d’intégration du formulaire.
7. Cliquez sur Save (Enregistrer).

Le formulaire apparaît maintenant dans le pied de page de votre site.

Shopify hors pied de page pour les thèmes vintage

Si vous souhaitez ajouter un formulaire intégré à votre site Shopify (en utilisant un thème vintage) ailleurs que dans le pied de page, suivez les étapes suivantes :

1. Accédez à la page d’administration de votre compte Shopify.
2. Accédez à Online Store > Themes (Boutique en ligne > Thèmes).
3. Cliquez sur Customize > Add Section (Personnaliser > Ajouter une section).
4. Choisissez l’une des options suivantes, en fonction de ce qui apparaît pour vous :
   • Custom content (Contenu personnalisé)
     1. Ajoutez ce bloc.
     2. Supprimez le contenu par défaut qui s’affiche.
   • Custom HTML (HTML personnalisé)
5. Cliquez sur Add content > Custom HTML (Ajouter du contenu > HTML personnalisé).
6. Collez votre code d’intégration.
7. Cliquez sur Save (Enregistrer).

Shopify hors pied de page pour les thèmes 2.0

Si vous souhaitez ajouter un formulaire intégré à votre site Shopify (en utilisant un thème 2.0) ailleurs que dans le pied de page, suivez les étapes suivantes :

1. Créez votre formulaire d’inscription intégré dans Klaviyo. Notez que le formulaire doit être défini comme étant un formulaire intégré dans la section Styles, sous Form Type. La méthode ci-après ne fonctionne pas pour les formulaires pop-up, volants ou pleine page.
2. Notez l’identifiant de votre formulaire.
   Pour trouver cette information, accédez au formulaire intégré dans votre compte Klaviyo. L’identifiant du formulaire est le code à six lettres à la fin de l’URL.
3. Accédez à la page d’administration de votre compte Shopify.
4. Accédez à Online Store > Themes (Boutique en ligne > Thèmes).
5. Cliquez sur Customize (Personnaliser).
6. Naviguez jusqu’au modèle de page auquel vous souhaitez ajouter le formulaire, par exemple votre page d’accueil.
7. Cliquez sur Add Section (Ajouter une section) et faites défiler la page vers le bas jusqu’à trouver Klaviyo Embedded Form (Formulaire intégré Klaviyo) sous Apps (Applications).
   
   
8. Cliquez sur la nouvelle section et ajoutez votre identifiant de formulaire intégré dans la zone de texte.
   
9. Cliquez sur Save (Enregistrer).
10. Maintenant que votre formulaire intégré a été ajouté au modèle de page, vous pouvez le déplacer si nécessaire.

Page de mot de passe Shopify pour tous les thèmes

Si vous souhaitez placer votre formulaire intégré sur la page de mot de passe de votre site, suivez les étapes ci-dessous. Ces instructions s’appliquent aux thèmes vintage et Shopify 2.0.

Pour activer vos formulaires d’inscription, vous devrez installer l’extrait de code connu sous le nom de Klaviyo.js séparément sur la page de mot de passe. Cela est dû au fait que le fichier password-content.liquid (ou password.liquid dans Shopify 2.0) n’utilise pas le fichier theme.liquid, où l’intégration procède automatiquement à l’installation de cet extrait de code. Les instructions d’installation sont disponibles ci-dessous.

1. Accédez à la page d’administration de votre compte Shopify.
2. Accédez à Online Store > Themes (Boutique en ligne > Thèmes).
3. Cliquez sur … > Edit code (… > Modifier le code).
4. Ouvrez votre fichier de thème password-content.liquid (pour les thèmes vintage), ou password.liquid (pour les thèmes 2.0).
5. Copiez l’extrait de code Klaviyo.js ci-dessous et collez-le au bas du fichier.
   

   <script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>

6. Vous devrez remplacer le texte « PUBLIC_API_KEY » par la clé d’API publique de votre compte Klaviyo, disponible sous Paramètres > Clés d’API.
   
7. Entourez le formulaire d’inscription par défaut de Shopify de balises de commentaires pour l’empêcher de s’afficher sur votre site :
   1. Ajoutez {% comment %} pour ouvrir le commentaire.
   2. Ajoutez {% endcomment %} pour fermer le commentaire.
      
8. Collez le code de votre formulaire intégré de Klaviyo au-dessus de celui de Shopify, qui est maintenant considéré comme un commentaire.
9. Cliquez sur Save (Enregistrer).

Le formulaire intégré de Klaviyo apparaît maintenant sur la page de mot de passe de votre site.

Veuillez noter que tous les formulaires pop-up et volants publiés dans votre compte apparaîtront sur cette page une fois que vous aurez installé Klaviyo.js, sauf si vous spécifiez qu’ils ne doivent pas être affichés sur l’URL en question.

WooCommerce

1. Ouvrez votre tableau de bord WooCommerce.
2. Cliquez sur Customize Your Site (Personnaliser votre site).
3. Accédez à la page à laquelle vous souhaitez ajouter le formulaire intégré.
4. Cliquez sur Add a widget > Custom HTML (Ajouter un widget > HTML personnalisé).
5. Collez le code d’intégration dans la section du contenu.
6. Cliquez sur le bouton Publish (Publier) pour publier les modifications.

Autres plateformes

Pour qu’un formulaire intégré de Klaviyo fonctionne, deux extraits de code doivent être présents sur votre page : le JavaScript de Klaviyo (Klaviyo.js) et le code d’intégration du formulaire. Par défaut, de nombreuses intégrations de Klaviyo (par exemple, Magento et Magento 2) injectent automatiquement Klaviyo.js sur votre site. Vérifiez les paramètres d’intégration de votre plateforme pour vous assurer que cette option est active.

Si aucune intégration native n’est proposée par Klaviyo pour votre plateforme, ajoutez notre fichier .js manuellement en suivant ces instructions.

Une fois Klaviyo.js installé, vous pouvez coller le code d’intégration du formulaire dans le code source HTML de votre site, à l’endroit où vous souhaitez qu’il apparaisse. Si vous ne disposez pas des compétences nécessaires pour modifier le code de votre site vous-même, un expert peut s’en charger pour vous. Contactez l’un de nos partenaires.

Ressources supplémentaires

• Démarrer avec les formulaires d’inscription
• Comment installer Klaviyo.js pour publier des formulaires d’inscription
• Comment intégrer un formulaire à votre page de confirmation de commande
• Comment ajouter un formulaire Klaviyo à votre site BigCommerce