Comment utiliser les blocs dynamiques dans les formulaires

Vous apprendrez

Découvrez les blocs dynamiques et comment vous pouvez les utiliser dans formulaire d'inscription pour créer des vues et des expériences distinctes pour les acheteurs sur les ordinateurs de bureau et les appareils mobiles. Tout bloc de votre formulaire peut être rendu dynamique en ajustant ses paramètres de visibilité.

Les blocs dynamiques vous permettent de contrôler les blocs qui apparaissent en fonction de l'appareil. Vous pouvez configurer le bloc pour qu'il apparaisse différemment dans votre formulaire en fonction de l'appareil, ou pour qu'il apparaisse sur un appareil et pas sur l'autre.

Cas d'utilisation des blocs dynamiques :

• Personnalisez l'affichage des formulaires en fonction des différents types d'appareils (par exemple, mobiles et ordinateurs de bureau) afin que les acheteurs voient un design adapté à leur écran.
• Créez un formulaire unique avec différentes méthodes d'opt-in SMS pour chaque type d'appareil afin d'optimiser la conversion (par exemple, affichez une option "tap-to-text" sur les appareils mobiles et un champ de saisie du numéro de téléphone sur les appareils de bureau).

Avant de commencer

Ouvrez votre formulaire dans l'éditeur et accédez à la section Ciblage et comportements. Veillez à ce que votre formulaire s'affiche à la fois sur les ordinateurs de bureau et sur les téléphones portables afin que tous les acheteurs puissent le voir.

Ce paramètre vous permet de configurer des affichages distincts pour les ordinateurs de bureau et les téléphones portables.

Utilisez des blocs dynamiques pour créer des vues distinctes pour les ordinateurs de bureau et les téléphones portables.

Tout bloc ou champ de saisie d'un formulaire, qu'il soit existant ou nouvellement ajouté à partir de l'onglet Ajouter un bloc, peut être rendu dynamique. Pour déterminer quels appareils affichent un certain bloc, procédez comme suit :

1. Cliquez sur le bloc dans le panneau d'aperçu du formulaire (par exemple, un bloc de texte).
2. Dans le menu des paramètres du bloc situé à gauche, faites défiler la page jusqu'à Visibilité.
3. Choisissez d'afficher le bloc sur les ordinateurs de bureau, les téléphones portables ou tous les appareils.
4. Répétez ce processus pour tous les blocs que vous souhaitez rendre dynamiques.

Pour avoir un aperçu de l'apparence de votre formulaire sur chaque appareil, utilisez le sélecteur de vue dans le coin supérieur droit de l'éditeur de formulaire. Vous pouvez aller et venir entre l'icône du bureau et l'icône de l'appareil mobile pour voir chaque vue.

• La vue de bureau montre comment votre formulaire apparaîtra aux acheteurs qui naviguent sur votre site sur un ordinateur de bureau. Seuls les blocs configurés pour lebureau et touslesappareils seront visibles dans cette vue.
• La vue mobile donne un aperçu de ce que les acheteurs verront lorsqu'ils navigueront sur un appareil mobile. Il affiche les blocs configurés pour les appareils mobiles et tous les appareils.

Exemple

Supposons que vous souhaitiez que le texte du titre de votre formulaire apparaisse différemment sur un ordinateur de bureau et sur un appareil mobile. Pour configurer cela :

1. Dans le sélecteur de vue situé dans le coin supérieur droit, sélectionnez l'icône du bureau. 
2. Sélectionnez le texte que vous souhaitez modifier dans l'aperçu du formulaire et apportez vos modifications.
3. Dans le menu des paramètres du bloc de texte, faites défiler jusqu'à Visibilité et réglez le bloc de texte pour qu'il ne s'affiche que sur le Bureau.
   
   

   Lorsque vous définissez un bloc pour qu'il ne s'affiche que sur l'ordinateur de bureau, vous choisissez de le masquer pour les utilisateurs de téléphones mobiles, et il ne sera donc pas visible sur l'aperçu mobile.

4. Pour ajuster la vue mobile, passez à l'aperçu mobile en sélectionnant l'icône mobile dans le sélecteur de vue.
5. Allez dans l'onglet Ajouter un bloc et faites glisser un nouvel élément de texte dans l'aperçu mobile.
6. Personnalisez le texte du titre par défaut pour les acheteurs mobiles. Ce texte doit être différent de celui que vous avez utilisé sur la version de bureau.
7. Dans le menu des paramètres du bloc de texte, faites défiler vers le bas jusqu'à Visibilité et réglez ce bloc de texte pour qu'il s'affiche sur Mobile.
   
   
8. Facultatif : Répétez ce processus pour les autres éléments ou champs de saisie que vous souhaitez afficher différemment en fonction du type d'appareil (par exemple, afficher une image pour les acheteurs d'ordinateurs de bureau mais la masquer pour les acheteurs de téléphones portables).
   • Si vous souhaitez rendre les images de votre formulaire dynamiques, vous pouvez le faire :
     • Ajoutez une image latérale à la fois à l'affichage mobile et à l'affichage de bureau, ou seulement à l'un des deux.
     • Utilisez une image latérale dans la vue de bureau et placez une image au-dessus du texte du titre sur mobile, ou vice versa. 

Utilisez des blocs dynamiques pour optimiser la collecte des consentements par SMS

Si vous avez un formulaire d'inscription qui recueille le consentement pour l'envoi de SMS, vous pouvez utiliser le bloc dynamique pour optimiser SMS la méthode d'opt-in pour chaque appareil (par exemple, montrer aux acheteurs mobiles un bouton "tap-to-text", tandis que les acheteurs de bureau voient un numéro de téléphone champ de saisie). 

Pour mettre en place ce système :

1. Ouvrez votre formulaire existant dans l'éditeur et accédez à l'étape SMS Opt-in dans la barre de menu. 
   • Si votre formulaire ne comporte pas encore cette étape, cliquez sur +Step > SMS Opt-in et sélectionnez une liste pour l'ajouter.
     
2. Dans le sélecteur de vue en haut à droite, sélectionnez l'icône de bureau pour personnaliser la vue de bureau de votre formulaire. 
3. Sélectionnez le champ de saisie du numéro de téléphone dans l'aperçu et, sous Visibilité, réglez-le sur Afficher sur le bureau. Faites de même pour le langage de divulgation du SMS et le bouton d'envoi.
   
   

   Notez que lorsque vous définissez un bloc pour qu'il soit affiché sur les appareils de bureau, il ne sera pas masqué dans la vue mobile. 

4. Passez à l'affichage mobile de votre formulaire en sélectionnant l'icône mobile dans le coin supérieur droit.
5. Sélectionnez l'onglet Ajouter un bloc, puis faites glisser un nouveau bloc de boutons dans l'aperçu mobile. 
6. Modifiez l'action du bouton pour qu'il s'agisse d'un abonnement par SMS.
   
   
7. Personnalisez votre mot-clé d'abonnement et votre message d'abonnement pour votre appel à l'action.
8. Sous Région d'envoi, choisissez le numéro de téléphone approprié pour la région que vous souhaitez cibler avec le formulaire. 
9. bouton bascule entre les vues desktop et mobile pour s'assurer que le bloc s'affiche comme vous l'avez prévu sur chaque appareil. 

Maintenant, vos blocs dynamiques sont configurés pour collecter le consentement pour l'envoi de SMS de la manière la plus optimisée pour les ordinateurs de bureau et les téléphones portables. 

Prochaines étapes

Avant de publier votre formulaire d'inscription, accédez à l'onglet Styles pour modifier la mise en page, les polices et les couleurs afin qu'elles correspondent à votre marque. Veillez également à ajouter et à personnaliser la langue de divulgation de votre SMS.

Ressources complémentaires

Référence des méthodes d'opt-in par SMS

Comprendre les blocs et les champs du formulaire

Comprendre les styles d'un formulaire d'inscription

Cours : Certificat de produit Klaviyo