Comprendre les styles de formulaires d’inscription

Objectif de cet article

Apprenez à utiliser le concepteur de formulaires d’inscription de Klaviyo pour créer votre formulaire à l’aide des paramètres de conception disponibles dans la section Styles. Les paramètres de mise en forme s’appliquent à l’intégralité de votre formulaire d’inscription, y compris à toutes les étapes du formulaire et à son message de réussite. 

La mise en forme de votre formulaire d’inscription doit rester simple. Celui-ci doit être clair, épuré et avoir un objectif principal. Il doit également être facile à lire et à remplir. 

Avant de commencer

Avant de mettre en forme votre formulaire d’inscription, accédez à l’onglet Formulaires d’inscription > Créer un formulaire d’inscription.Vous pouvez personnaliser un modèle préconçu de la bibliothèque de formulaires ou créer un nouveau modèle de formulaire d’inscription. Ajoutez le contenu et les blocs de saisie à inclure avant de passer à la mise en forme. 

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

Types de formulaires

En haut de la section Styles, vous pouvez choisir un type de formulaire : pop-up, pleine page, volant ou intégré :

• Les formulaires pop-up s’affichent au centre de la fenêtre du navigateur. Ils captent l’attention du visiteur et doivent être utilisés de préférence pour des offres ou des messages importants. Les formulaires pop-up ont le taux de conversion le plus élevé de tous les types de formulaires. 
• Les formulaires volants s’ouvrent dans la fenêtre du navigateur depuis la direction que vous sélectionnez. Comme les formulaires pop-up, ils peuvent être utilisés pour inciter le visiteur à faire quelque chose ou pour le rediriger. Toutefois, comme ils sont moins intrusifs, vous pouvez les utiliser pour recueillir des données sur vos navigateurs de manière passive.
• Les formulaires intégrés s’affichent à l’endroit où vous collez l’extrait de code fourni sur votre site. Il s’agit du type de formulaire le moins intrusif. Ils sont souvent utilisés dans les pieds de page des sites web pour obtenir l’adresse e-mail du visiteur.
• Les formulaires pleine page s’affichent sur l’intégralité de la fenêtre du navigateur, captant ainsi toute l’attention de vos acheteurs. Ces formulaires ont un taux de conversion élevé, puisque les visiteurs ont peu de chance de les rater. Cependant, ils perturbent fortement l’expérience utilisateur, car les visiteurs sont obligés d’aller sur le formulaire, même si c’est uniquement pour le fermer.
  • Envisagez d’utiliser un formulaire pleine page comme page de destination pour augmenter votre liste d’abonnés. 
• Les bannières se présentent sous la forme d’une barre en haut ou en bas d’une page web. Moins intrusives que les formulaires pop-up ou pleine page, elles offrent une visibilité continue et un design adapté aux mobiles qui s’intègre harmonieusement à votre site web. Vous pouvez faire en sorte que la bannière défile avec la page ou reste fixe, ajouter des blocs de contenus ou des champs de saisie directement dans la bannière, ou configurer la bannière de sorte que lorsqu’une personne clique dessus, un autre formulaire de votre compte s’affiche. 
  • Pour faire apparaître un autre formulaire lorsqu’un acheteur clique sur la bannière, cliquez sur le bouton dans l’aperçu et définissez le champ Action sur Ouvrir un autre formulaire, puis choisissez le formulaire actif à afficher. Remarque : cette option n’est pas disponible pour les formulaires intégrés.

Images d’arrière-plan et images latérales 

Pour ajouter des images personnalisées à votre formulaire d’inscription, utilisez une image latérale ou une image d’arrière-plan. Les images latérales apparaissent à gauche ou à droite du contenu de votre formulaire, tandis que les images d’arrière-plan s’affichent derrière ses champs. 

Lorsque vous utilisez une image dans un formulaire, tenez compte de ces points :

• Il existe de nombreux types de formats d’image. Le format JPEG offre un bon équilibre entre qualité et taille pour les images colorées, tandis que le format PNG permet de conserver la netteté des images transparentes ou des logos. 
  • Pour que la qualité de vos images soit préservée sans ralentir les temps de chargement sur votre site, elles doivent faire entre 50 et 100 Ko pour les images latérales, et moins de 200 Ko pour les images d’arrière-plan.
• Comme pour toutes les images consultables en ligne, les fichiers de grande taille entraînent des temps de chargement plus longs.
  • Remarque : la taille d’une image pleine largeur à 72 ppp est souvent supérieure à 1 Mo, et la réduction de la taille peut diminuer la qualité. Trouvez le bon compromis entre qualité et temps de chargement lorsque vous choisissez des images.
• Utilisez une image de bonne qualité pour obtenir les meilleurs résultats. 
  
  • Sur le web, il est généralement conseillé d’utiliser une résolution de 72 ppp. Pour trouver le juste équilibre entre qualité et vitesse de chargement, essayez de maintenir vos images entre 600 et 1 000 pixels en largeur, et moins de 2 000 pixels en hauteur pour les images en pleine largeur. Les images qui ne couvrent pas toute la largeur de l’e-mail peuvent faire moins de 600 pixels.
    
    • Si vous utilisez un formulaire d’inscription pleine page, vous avez besoin d’une image haute résolution plus grande (par exemple, avec une largeur minimale de 1 980 pixels) afin de l’adapter au formulaire de plus grande taille. Gardez toutefois à l’esprit que cela peut avoir un impact sur le temps de chargement.
• Ajoutez un texte alternatif à votre image pour favoriser l’accessibilité à tous les utilisateurs qui interagissent avec vos formulaires. 

Étant donné que les formulaires d’inscription sont affichés dans les navigateurs (contrairement aux e-mails, qui sont affichés via les fournisseurs de service de messagerie), il existe moins de recommandations concernant leur mise en forme et leur modification. Les navigateurs peuvent restituer des images de tous types et de toutes tailles. En règle générale, il convient donc de s’en tenir à des images de haute résolution et à des fichiers de taille raisonnable, et de tester l’affichage sur chaque type d’appareil. 

Ajouter une image latérale

Pour ajouter une image latérale :

1. Accédez à la section Styles et faites défiler jusqu’aux paramètres Image latérale.
2. Sélectionnez Image de gauche ou Image de droite, selon l’endroit où vous souhaitez que l’image apparaisse.
   
3. Sélectionnez une image. Par défaut, les formulaires comportant des images latérales ont une largeur de 780 px et sont de taille moyenne. Toutefois, cette valeur peut être modifiée dans la section Image latérale de l’onglet Styles en fonction de la taille du formulaire ou de la taille d’image latérale souhaitée.

Remarque : les images latérales sont définies au niveau de chaque étape. Vous pouvez ainsi définir des images distinctes pour chaque étape de votre formulaire. Pour en savoir plus sur les options d’affichage des images latérales, consultez notre article expliquant comment ajouter des images latérales dans les formulaires d’inscription. 

Ajouter une image d’arrière-plan

Pour ajouter une image d’arrière-plan :

1. Activez le paramètre Image d’arrière-plan sous Arrière-plan du formulaire.
2. Téléchargez votre image en utilisant le bouton Parcourir.
3. Modifiez les paramètres d’affichage à votre convenance.
   

Si vous ajoutez une image latérale ou d’arrière-plan à votre formulaire, vous pouvez prévisualiser toutes les étapes du formulaire, y compris le message de réussite, en sélectionnant chaque étape dans la barre de menu supérieure. Par défaut, la hauteur de votre formulaire s’ajuste en fonction du contenu et des champs de formulaire de chaque étape. Le formulaire peut donc être plus ou moins étendu selon l’étape. Si votre formulaire contient une image, le contenu de l’image peut être coupé sur les étapes de plus petite taille. Pour éviter cela, définissez une hauteur minimale sous Type de formulaire dans la section Styles. 

Options de couleur et d’espacement

Utilisez les paramètres Styles de formulaire et Styles des champs de saisie pour définir les couleurs, les couleurs des bordures, le remplissage et les marges. Ces paramètres s’appliquent à toutes les étapes de votre formulaire, à moins que vous n’appliquiez des paramètres contradictoires (par exemple, pour le texte ou les couleurs) dans les paramètres de mise en forme d’un bloc de contenu spécifique.

Polices et styles de texte

Modifiez le texte (par exemple, la police, la taille, la couleur, etc.) de vos blocs de contenus (par exemple, un champ d’adresse e-mail ou de numéro de téléphone) sous Styles de texte des champs de saisie.

Pour modifier le texte d’un bloc de contenu spécifique, cliquez sur le bloc dans l’aperçu du formulaire et utilisez le menu d’options Texte qui s’affiche. L’éditeur de formulaires de Klaviyo utilise la norme d’encodage UTF-8 qui prend en charge les caractères latins, les emojis, les caractères codés sur deux octets, etc.

Pour votre formulaire d’inscription, vous pouvez utiliser les polices adaptées aux pages web natives des éditeurs Klaviyo, l’une de nos polices personnalisées hébergées par Klaviyo ou vos propres polices personnalisées. Découvrez comment utiliser des polices personnalisées dans les formulaires d’inscription. 

Icônes de fermeture

Vous pouvez modifier la taille, la couleur et le style de l’icône de fermeture de votre formulaire (la croix ou X dans le coin supérieur droit). Cliquez sur l’icône X dans l’éditeur de formulaires, puis modifiez les paramètres dans l’éditeur de gauche. En savoir plus sur la mise en forme de l’icône de fermeture d’un formulaire. 

Si vous avez choisi un formulaire pleine page, vos acheteurs doivent forcément cliquer sur l’icône de fermeture pour le fermer. Cela permet de capter leur attention. Assurez-vous toutefois que l’icône de fermeture est bien visible afin que les acheteurs ne soient pas agacés par l’affichage de votre formulaire pleine page.

Contenus HTML et CSS personnalisés

L’éditeur de formulaires d’inscription de Klaviyo ne prend actuellement pas en charge les contenus HTML ou CSS personnalisés. Si vous avez besoin de conseils ou d’inspiration pour personnaliser votre formulaire à l’aide de l’éditeur de Klaviyo, rendez-vous sur le forum de la communauté. 

Conclusion

Vous savez désormais comment modifier les différents paramètres de style dans l’éditeur de formulaire pour concevoir votre formulaire d’inscription.

Prochaines étapes

Une fois que vous avez mis en forme votre formulaire d’inscription, découvrez comment définir ses comportements, et notamment sélectionner les visiteurs pour lesquels il doit s’afficher et le moment où il doit s’afficher. Consultez notre article expliquant comment choisir les paramètres de ciblage et de comportement des formulaires.

Une fois que vous avez publié votre formulaire d’inscription, personnalisez votre e-mail de confirmation de l’opt-in, si le double opt-in est activé pour votre liste. Puis, créez une série de bienvenue pour envoyer l’offre de votre formulaire (par exemple, une réduction ou des frais de port gratuits sur la première commande) et présenter votre marque aux nouveaux abonnés.

Ressources supplémentaires

• Démarrer avec les formulaires d’inscription
• Comment réaliser un test A/B sur un formulaire d’inscription
• Formation sur la création de formulaires d’inscription stratégiques