Comment intégrer un formulaire d'inscription à votre page de confirmation de commande ?

Vous apprendrez

Découvrez comment intégrer un formulaire d'inscription à votre page de confirmation afin de recueillir des informations supplémentaires auprès des clients après la fin du processus de paiement. Ces clients récents sont déjà intéressés par votre marque, et la confirmation constitue donc une excellente occasion d'établir un dialogue plus approfondi avec eux.

Les étapes exactes à suivre pour intégrer un formulaire à votre page de confirmation de commande dépendent en grande partie de votre plateforme de commerce électronique, mais le processus consiste à mettre à jour les fichiers de code de votre boutique à l'aide d'un court extrait. Dans ce guide, nous vous expliquons comment procéder pour deux plateformes de commerce électronique :

• Shopify
• Bigcommerce

Avant de commencer

Si vous utilisez Shopify ou BigCommerce, ou si vous disposez du plugin Klaviyo pour Magento ou WooCommerce, vous êtes prêt à construire votre formulaire dans la section ci-dessous.

Cependant, si vous utilisez une plateforme de commerce électronique qui ne s'intègre pas nativement à Klaviyo, assurez-vous que vous avez activé le suiviactif sur le site pour votre site. Cela se fait automatiquement pour les plateformes énumérées ci-dessus, mais doit être fait manuellement pour les autres plateformes. C'est ce qui permet à Klaviyo de publier des formulaires d'inscription sur votre site. 

Construisez votre formulaire

Vous pouvez créer un formulaire d'inscription et l'intégrer à votre page de confirmation pour poser des questions pertinentes à vos clients après leur passage en caisse. Par exemple, vous pouvez poser des questions pour en savoir plus sur la fréquence d'utilisation de vos produits par un client ou sur les nouveaux produits qu'il pourrait être intéressé par l'achat.

Pour créer votre formulaire d'inscription :

1. Dans Klaviyo, naviguez vers Sign-up forms > Create Sign-up form > Build from scratch.
2. Dans le menu qui s'affiche, donnez un nom à votre formulaire et sélectionnez une liste à laquelle les nouveaux abonnés doivent se soumettre. 
3. Sélectionnez Embed comme type de formulaire.
   
4. Cliquez sur Enregistrer et poursuivez la conception. 
5. Vous accédez alors à l'éditeur de formulaire où vous pouvez modifier les styles suivants :
   • Styles: Modifiez l'apparence de votre formulaire pour qu'il corresponde à votre marque, par exemple les styles de formulaire ou de champ de saisie et le type de police. Vous pouvez également modifier n'importe quel texte en cliquant dessus et en remplaçant la langue par défaut par la vôtre. 
   • Ajouter des blocs: Ici, vous pouvez ajouter du contenu à votre formulaire afin de collecter des informations, comme une zone de texte pour une question ou un champ de date pour un anniversaire. Veillez à définir une propriété de profil pour chaque champ que vous ajoutez et à ne pas submerger les clients avec trop de questions.
   • Ciblage et comportement: Choisissez si vous souhaitez que le formulaire apparaisse sur un ordinateur de bureau, un téléphone portable ou les deux. Gardez votre formulaire réglé sur Afficher à tous les visiteurs ou Ne pas afficher aux profils Klaviyo existants . 
6. Dans la barre de menu, sélectionnez Succès pour modifier la page qui s'affiche après l'envoi du formulaire.
7. Lorsque vous êtes satisfait de la conception de votre formulaire, cliquez sur Publier.
8. Dans la fenêtre modale qui s'affiche, copiez votre code d'intégration afin de pouvoir le coller. 
   
9. Cliquez sur Publier.

Votre formulaire n'apparaîtra pas sur votre site tant que vous n'aurez pas collé le code d'intégration dans le code de votre site. Les deux sections suivantes expliquent comment coller le code pour un site Shopify, puis pour un site Bigcommerce.

Ajoutez l'intégration à votre site Shopify

1. Accédez au backend de votre boutique Shopify.
2. Allez dans Paramètres > Checkout > Traitement des commandes.
3. Sous Additional scripts, collez le code d'intégration.

Pour tester l'affichage du formulaire en temps réel, créez un exemple de commande et effectuez la procédure de paiement. En fonction du thème de votre boutique, vous devrez peut-être retourner dans l'éditeur de formulaire pour ajuster légèrement l'aspect et la convivialité que vous souhaitez. Veillez à publier à nouveau après avoir apporté des modifications ; mais vous n'aurez pas besoin d'ajouter à nouveau le code d'intégration, car toutes les modifications seront appliquées automatiquement après la publication.

Dans notre exemple, nous avons ajouté une bordure blanche au formulaire pour donner plus d'espace entre le message "Thank you" et le formulaire lui-même. 

Ajoutez l'intégration à votre site Bigcommerce

1. Accédez à l'administration de Bigcommerce.
2. Allez sur Storefront > Script Manager et cliquez sur Create a Script .
3. Nommez le script et configurez-le comme suit :
   • Emplacement : Tête
   • Description (facultatif) : Décrivez l'objectif du script
   • Pages où le script sera ajouté : Confirmation de commande
   • Type de script : Script
     
4. Supprimez le contenu du script et collez le code suivant pour ajouter klaviyo.js à votre page de confirmation. Notez que vous devez faire cela même si vous avez déjà installé klaviyo.js sur votre site web :
   

     <script src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js" async="" ></script>
     <script>
        document.addEventListener("DOMContentLoaded", function() {
          var elem = document.createElement('div');
        elem.className = 'klaviyo-form-FORM_ID'
        document.body.appendChild(elem);
        }) ;</script>

5. Dans l'extrait ci-dessus, remplacez PUBLIC_API_KEY par la clé publique de votre siteAPI.
6. Dans l'extrait ci-dessus, remplacez FORM_ID par l'ID de votre formulaire. Pour trouver l'ID de votre formulaire, naviguez vers le formulaire intégré dans votre compte Klaviyo. L'ID du formulaire est le code de 6 lettres à la fin de l'URL.
   
7. Lorsque vous avez rempli tous les détails du script, cliquez sur Enregistrer.

Votre formulaire intégré s'affichera désormais au bas de la page lorsque quelqu'un aura passé une commande. En fonction de votre thème, vous pouvez modifier la bordure, le remplissage ou la taille de votre formulaire dans la sectionStyles pour vous assurer qu'il correspond à l'aspect et à la convivialité de votre page de confirmation de commande ; publiez toutes les modifications que vous apportez pour qu'elles soient prises en compte.

Prochaines étapes

Une fois que vous avez commencé à collecter des réponses avec votre formulaire intégré, chaque soumission sera stockée dans le profil du client en tant que propriété personnalisée, disponible pour être utilisée dans les segments, les flux et les modèles d'e-mail.

Sur la base des réponses, vous pouvez orienter l'expérience post-achat. Il se peut que vous souhaitiez adapter votre série de bienvenue en fonction de ces données ou créer des segments pertinents auxquels envoyer des campagnes. Par exemple, imaginons que nous décidions de lancer un nouveau mascara. Étant donné que nous recueillons des données sur l'intérêt pour le produit dans ce formulaire intégré, nous pouvons informer toutes les personnes qui nous ont fait part de leur intérêt pour le mascara dans le communiqué de presse sur le produit.

Ressources complémentaires

• Les formulaires d'inscription
• Comment intégrer un formulaire d'inscription sur votre site web ?