Comprendre les blocs et les champs de formulaires

Objectif de cet article

Apprenez à utiliser les différents blocs de contenus de l’éditeur de formulaires (c’est-à-dire les éléments et les champs de saisie) dans votre formulaire d’inscription pour personnaliser l’apparence et le type de données que vous recueillez auprès des abonnés. 

À propos de l’onglet Ajouter des blocs

Dans l’éditeur de formulaires d’inscription, cliquez sur l’onglet Ajouter des blocs pour voir les différents blocs de contenus que vous pouvez ajouter à votre formulaire. 

Il existe deux catégories de blocs :

1. Éléments
2. Champs de saisie

Lorsque vous glissez-déposez un bloc dans l’aperçu du formulaire, des options d’édition apparaissent dans la barre latérale gauche. À partir de là, vous pouvez ajuster les détails du bloc, y compris le texte et le style. En bas du menu d’édition, vous pouvez également configurer la Visibilité pour le bloc afin de déterminer s’il s’affiche sur tous les appareils, uniquement sur les ordinateurs ou uniquement sur les appareils mobiles. En savoir plus sur les blocs dynamiques dans les formulaires

Si vous créez un formulaire d’inscription pour mobile uniquement, consultez les principes de bases de la conception de formulaires pour mobile. 

Bonnes pratiques pour l’ajout de blocs de contenus aux formulaires

Si vous prévoyez d’inclure plusieurs blocs et champs pour demander différents renseignements aux visiteurs de votre site (par exemple, leur date de naissance, adresse e-mail, numéro de téléphone, etc.) dans votre formulaire, utilisez un formulaire à plusieurs étapes. Les formulaires en plusieurs étapes peuvent vous aider à en savoir plus sur vos visiteurs et à recueillir leur consentement sur plusieurs canaux, sans les submerger avec trop de champs.

Si vous souhaitez demander leur adresse e-mail et leur numéro de téléphone dans votre formulaire, il est préférable, pour des raisons de développement des listes et de conformité, d’inclure ces champs dans deux étapes différentes.

Éléments du formulaire

Les éléments du formulaire d’inscription ajoutent du contenu à votre formulaire, comme du texte, des boutons, des images et des codes de réduction. Ces blocs informent le visiteur de l’objectif de votre formulaire d’inscription et lui permettent d’interagir avec celui-ci. 

Bloc de texte

Les blocs de texte vous permettent d’insérer du contenu textuel dans votre formulaire, tel qu’un titre, des instructions ou tout autre texte d’affichage. L’éditeur d’e-mails de Klaviyo utilise la norme d’encodage UTF, ce qui signifie qu’il prend en charge les caractères latins, les émojis, les caractères codés sur deux octets, etc. En outre, vous pouvez ajouter une image en ligne en utilisant l’option de saisie d’URL d’image. 

Bloc de bouton

Les blocs de boutons vous permettent de recueillir et d’enregistrer dans Klaviyo des données sur les personnes qui envoient votre formulaire. Avec un bouton, un visiteur peut fermer ou envoyer le formulaire, être redirigé vers une autre page de votre site web ou s’abonner pour recevoir des SMS.

Choisissez une des actions suivantes pour votre bouton : 

• Fermer le formulaire
  Le formulaire sera fermé et les données ne seront pas envoyées à Klaviyo.  
• Envoyer le formulaire
  Tous les champs du formulaire que le visiteur a remplis seront envoyés à Klaviyo, et le formulaire accédera à l’étape suivante en fonction de l’option sélectionnée pour le champ Après l’envoi (Afficher l’étape suivante, Accéder à l’URL ou Fermer le formulaire, au choix). 
• Accéder à l’URL (Rediriger vers une autre page)
  Le visiteur sera redirigé vers l’URL que vous fournissez, et les données des champs du formulaire ne seront pas envoyées à Klaviyo. Lorsque vous saisissez votre URL de destination, utilisez l’URL complète en incluant « https:// » (par exemple, utilisez « https://help.klaviyo.com/hc/fr-fr » plutôt que « help.klaviyo.com/hc/en-us »).

  L’action Accéder à l’URL ne fonctionnera pas avec une URL incomplète.

• S’abonner par SMS
  Vous pouvez configurer cette option sur les formulaires pour mobile uniquement, ou sur la vue mobile de l’étape Opt-in pour SMS pour les formulaires qui ciblent tous les appareils. Cela permet aux visiteurs de s’abonner aux SMS en quelques clics (envoi de SMS rapide). Lorsqu’un visiteur clique sur le bouton S’abonner par SMS, son application de messagerie SMS s’ouvre sur un message prérédigé qu’il peut envoyer pour s’abonner.
  • Sélectionnez un mot-clé dans le menu déroulant Mot-clé d’abonnement. Il s’agit du mot qu’une personne doit envoyer par SMS à votre numéro de destination pour être ajoutée à la liste d’abonnement au marketing par SMS de votre compte. Ce mot est configuré au niveau du compte.
  • Définissez un message d’opt-in qui s’affichera dans son application de messagerie. Par défaut, le message est le suivant : « Envoyez ce message pour vous abonner à <nom_organisation> ! ». Vous pouvez toutefois en personnaliser le contenu. Ce champ permet de saisir jusqu’à 160 caractères GSM-7 (1 message) uniquement. Les caractères spéciaux, y compris les emojis, ne sont pas pris en charge.
  • Choisissez le numéro approprié sous Région d’envoi si vous opérez dans plusieurs régions et avez plusieurs numéros d’envoi.
    

Modifier la liste à laquelle un formulaire d’inscription ajoute des personnes

Dans les paramètres du bouton, vous pouvez modifier la liste vers laquelle le formulaire envoie les nouveaux abonnés collectés (c’est-à-dire celle à laquelle ils les ajoute). Pour modifier la liste à laquelle un formulaire ajoute des personnes : 

1. Cliquez sur le bouton dans l’éditeur de formulaires. 
2. Dans le menu qui apparait à gauche, sélectionnez la nouvelle liste sous Liste à envoyer.
   
   
3. Cliquez sur Retour dans la barre latérale d’édition.
4. Si le contenu de votre formulaire vous convient, cliquez sur Publier.Même si votre formulaire est déjà en ligne, vous devez publier les modifications afin que les nouveaux abonnés soient collectés dans la nouvelle liste sélectionnée.
   

Envoyer les champs masqués

Les champs masqués sont des propriétés supplémentaires qui seront ajoutées au profil d’un abonné dans Klaviyo. Cela vous permet de suivre les visiteurs qui interagissent avec votre formulaire. Par défaut, tous les formulaires ont une propriété $source comme champ masqué, qui identifie la façon dont ils ont été ajoutés à votre liste. 

Vous pouvez personnaliser la propriété $source et d’autres noms de propriétés. Comme avec les autres champs de saisie des formulaires, si vous ajoutez des champs masqués pour des propriétés qui existent déjà dans le profil d’une personne, ils seront remplacés par la nouvelle valeur lorsque la personne enverra le formulaire. Par exemple, supposons que votre formulaire recueille les préférences en matière de collection et qu’un client a précédemment indiqué être intéressé par votre collection pour hommes. Si ce formulaire comporte un champ caché concernant l’intérêt pour votre collection pour femmes, la propriété des préférences sera remplacée si le client sélectionne le bouton (par exemple, elle passera de la collection pour hommes à la collection pour femmes). 

Pour ajouter une nouvelle propriété cachée, sélectionnez Ajouter une propriété.

Bloc d’image

Les blocs d’images vous permettent d’ajouter une image à votre formulaire (par exemple, votre logo). Vous pouvez utiliser ce bloc pour ajouter des images correspondant à l’identité visuelle de votre marque. 

Les fichiers JPEG, PNG et GIF sont acceptés. Comme pour toutes les images consultables en ligne, les fichiers de grande taille entraînent des temps de chargement plus longs. Pour des performances optimales, la taille du fichier doit être comprise entre 50 et 100 Ko.

Vous pouvez également ajouter une image de fond ou une image latérale dans l’onglet Styles de l’éditeur de formulaires. 

Bloc de code de réduction

Ajoutez un bloc de code de réduction pour inciter les visiteurs de votre site à remplir votre formulaire d’inscription et à utiliser le code de réduction inclus pour effectuer un achat sur votre site.

Vous pouvez ajouter des codes de réduction statiques ou uniques à un formulaire. Klaviyo recommande d’afficher ces codes dans l’étape Réussite afin que les acheteurs n’aient pas à quitter votre site web pour obtenir le code. Lisez notre guide sur l’ajout de codes de réduction aux formulaires d’inscription pour en savoir plus sur la configuration.

Bloc de clause de divulgation pour les SMS

Le texte de la clause de divulgation pour les SMS doit être placé au-dessus d’un bouton d’Opt-in pour SMS à des fins de conformité. Apprenez-en plus sur le texte de la clause de divulgation pour les SMS.

Compte à rebours

Des comptes à rebours peuvent ajouter un sentiment d’urgence à vos formulaires d’inscription et sont souvent associés à des promotions spéciales ou à des messages liés aux fêtes et jours fériés. Apprenez-en plus sur l’ajout de comptes à rebours aux formulaires.

Bloc de compteur d’inscriptions

Ajoutez un bloc de compteur de formulaires d’inscription pour afficher le nombre d’envois en temps réel (par exemple, « 500 personnes se sont inscrites à ces offres au cours de la dernière heure ! ») sur votre formulaire afin de stimuler les conversions et d’accélérer le développement des listes. Ce bloc tire parti de la preuve sociale pour créer un sentiment d’urgence et inciter les visiteurs du site à s’abonner.

Lorsque vous ajoutez un bloc de compteur d’inscriptions à un formulaire, vous pouvez configurer les paramètres suivants :

• Affichage
  Ce paramètre permet de déterminer la méthode de comptabilisation des inscriptions. Un abonné doit aller jusqu’à l’étape de réussite du formulaire :
  
  • Inscriptions au cours des 30 derniers jours
  • Inscriptions au cours des 7 derniers jours
  • Inscriptions au cours des dernières 24 heures
  • Inscriptions au cours de l’heure écoulée
• Afficher après __ formulaires remplis
  Ce paramètre permet de déterminer le nombre minimum d’envois requis pour que le bloc apparaisse.
  

  Le bloc sera masqué aux visiteurs du site jusqu’à ce que le nombre minimum d’envois soit dépassé. Lorsque le nombre minimum d’envois est atteint (par exemple, 200 envois), le bloc s’affiche sur votre formulaire.

  

Le texte par défaut reprend les paramètres sélectionnés dans Affichage. Bien que ce texte soit configurable, ne supprimez pas le tag {{ form_submit_count }}, car il indique le nombre d’inscriptions en temps réel.

Champs de saisie

Les champs de saisie vous permettent de recueillir des données auprès des visiteurs du site, comme leur adresse e-mail, leur nom ou leur date de naissance. 

Tous les champs de saisie doivent être associés à une propriété de profil, qui est utilisée pour stocker les données que chaque abonné envoie. Lorsque vous ajoutez un champ de saisie à votre formulaire, sélectionnez une propriété existante dans la liste déroulante Propriété de profil ou créez-en une nouvelle en saisissant un nouveau nom de propriété et en cliquant sur Créer l’option.

Sauf indication contraire, les données saisies dans ces champs seront stockées dans la page de profil de chaque personne. 

Champ de saisie d’adresse e-mail

Les champs de saisie d’adresse e-mail permettent aux visiteurs de saisir leur adresse e-mail et de s’abonner à la liste liée au formulaire. Un formulaire ne peut comporter qu’un seul champ de saisie d’adresse e-mail, celui-ci devant apparaître dans l’une des étapes du formulaire et non dans le message de réussite.

Champ de numéro de téléphone

Si vous ajoutez un champ de numéro de téléphone, il recueille par défaut le consentement pour l’envoi de SMS promotionnels, ce qui vous permet d’envoyer tout type de SMS. Ce bloc valide les numéros de téléphone envoyés pour s’assurer qu’ils sont stockés dans un format valide. Si vous ne l’avez pas encore fait, activez les SMS en vue de recueillir le consentement pour l’envoi de SMS et rédigez votre clause de divulgation à inclure partout où vous recueillez le consentement pour l’envoi de SMS.

Si nécessaire, vous pouvez adapter le type de consentement pour l’envoi de SMS que le formulaire recueille. Dans ce cas, assurez-vous que la clause de divulgation correspond au bon type de consentement et inclut des exemples de messages que vous enverrez pour que les abonnés comprennent ce qu’ils acceptent.

Vous pouvez également utiliser des blocs dynamiques lors de la collecte du consentement pour l’envoi de SMS pour vous assurer que les acheteurs voient la méthode de consentement la plus adaptée.

Champ de saisie de texte

Les champs de saisie de texte permettent de collecter des données pour lesquelles un format spécifique n’est pas nécessaire (à l’inverse des dates ou adresses e-mail) et lorsqu’il n’est pas judicieux de proposer une liste prédéfinie d’options. Notez que la segmentation et le filtrage de flux sont sensibles à la casse et à l’orthographe. Optez pour d’autres types de champs si vous prévoyez d’utiliser ces données à des fins de segmentation ou de filtrage. 

La collecte des noms des abonnés constitue un cas d’utilisation courant des champs de saisie de texte. Pour ajouter un champ de prénom, utilisez « Prénom » comme libellé ou texte de remplissage, et sélectionnez Prénom comme propriété de profil. 

Cases d’option

Les cases d’option proposent une liste prédéfinie d’options, parmi lesquelles les abonnés ne peuvent en sélectionner qu’une seule. Elles sont utiles pour collecter des données telles que le genre ou la tranche d’âge.

Le champ Propriétés de profil doit contenir le nom que vous souhaitez utiliser pour cette propriété. Par exemple, si votre formulaire demande aux visiteurs s’ils préfèrent le café ou le thé, utilisez une propriété de profil personnalisée telle que « Choix de boisson ». 

Utilisez la colonne Libellés de la section Options de propriété pour ajouter les options parmi lesquelles vos abonnés peuvent choisir. Ajoutez ensuite les valeurs correspondantes dans la colonne Valeurs. Ces valeurs seront stockées dans le profil de toute personne remplissant le formulaire. Pensez donc à utiliser une version abrégée de la réponse qui soit facile à identifier. 

Si les libellés de vos options sont « Fan de thé » et « Fan de café », les valeurs peuvent par exemple être « thé » et « café ». 

Lorsqu’un abonné répond à une question avec case d’option, sa réponse est stockée en tant que type de données chaîne. 

Cases à cocher

Les cases à cocher proposent une liste d’options, et les abonnés peuvent sélectionner autant d’options qu’ils le souhaitent. Les cases à cocher sont utiles pour recueillir des renseignements sur les préférences, les centres d’intérêt, les données démographiques et toutes les questions pour lesquelles l’abonné doit pouvoir sélectionner plusieurs options.

Tout comme un champ de type case d’option, votre champ avec cases à cocher nécessite une propriété de profil, un ensemble de libellés et un ensemble de valeurs. 

Lorsqu’un abonné répond à une question avec cases à cocher, sa réponse est stockée en tant que type de données liste, quel que soit le nombre d’options sélectionnées. 

Champ de date

Les champs de date sont le meilleur moyen pour les abonnés de saisir des valeurs de date, qui peuvent ensuite être utilisées pour la segmentation ou pour déclencher des flux basés sur une date.

Par exemple, vous pouvez collecter les dates de naissance des abonnés afin de leur envoyer un code de réduction via un flux le jour de leur anniversaire. Pour cela, ajoutez le champ de date et définissez anniversaire comme propriété de profil correspondante. Si vous souhaitez recueillir des dates concernant un client, utilisez un bloc de date pour vous assurer que les dates utilisent le bon format.

Vous avez la possibilité de personnaliser le format de saisie des dates dans votre formulaire (par exemple, JJ/MM/AAAA). En revanche, les dates seront toujours stockées dans le format par défaut MM/JJ/AAAA dans les profils personnels. Si vous sélectionnez dans le menu Format de date une option qui n’inclut pas l’année (par exemple, MM JJ), une année par défaut sera automatiquement incluse dans le profil de chaque abonné. Les dates transmises par le biais d’un champ de date sont stockées à l’aide du type de données date. 

Champ déroulant

Les listes déroulantes sont similaires aux cases d’option, car les abonnés peuvent sélectionner une seule option dans une liste prédéfinie. Cette option permet également d’économiser de l’espace sur votre formulaire. Utilisez un menu déroulant plutôt que des cases d’option lorsque vous proposez plus de 4 options. Comme les cases d’option et les cases à cocher multiples, votre champ déroulant nécessite une propriété de profil, un ensemble de libellés et un ensemble de valeurs. 

Vérification de l’âge

Les blocs de vérification de l’âge peuvent permettre aux marques ayant un rapport avec l’alcool d’utiliser les SMS aux États-Unis, au Royaume-Uni et en Australie. Le contrôle de l’âge doit être activé dans votre compte pour que vous puissiez ajouter des blocs de vérification de l’âge à vos formulaires d’inscription et commencer à utiliser les SMS. En savoir plus sur la vérification de l’âge en lien avec l’alcool avec Klaviyo.

Supprimer un élément ou un champ de saisie

Pour supprimer un élément ou un champ de saisie dans votre formulaire d’inscription, procédez comme suit :

1. Dans l’aperçu du formulaire de l’éditeur, survolez le bloc que vous souhaitez supprimer.
2. Sélectionnez l’icône de la corbeille qui apparait.
   
3. Dans la fenêtre modale Supprimer le bloc, sélectionnez Supprimer le bloc. Notez qu’une fois supprimé, le bloc ne peut pas être récupéré.

Prochaines étapes

Si vous souhaitez configurer un formulaire pour qu’il s’affiche différemment sur ordinateur et sur mobile, consultez notre guide sur l’utilisation des blocs dynamiques dans les formulaires.

Une fois que vous avez ajouté des blocs et des champs à votre formulaire d’inscription, apprenez à lui donner un style en adéquation avec celui de votre marque. Pour publier un formulaire pop-up, volant ou pleine page, il vous suffit de cliquer sur Publier afin de le mettre en ligne sur votre site. Si vous créez un formulaire intégré, ajoutez le code d’intégration du formulaire à votre site pour le publier.

Ressources supplémentaires

Démarrer avec les formulaires d’inscription

Principes de base de la conception de formulaires pour mobile

Comment utiliser les blocs dynamiques dans les formulaires

Formation : Créer des formulaires d’inscription stratégiques