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 style s’appliquent à l’ensemble 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. De plus, vous devez vous assurer qu’il est facile à lire et à suivre.

Avant de commencer

Avant de mettre en forme votre formulaire d’inscription, accédez à Formulaires d’inscription > Créer un formulaire. Si vous êtes invité à choisir un canal, saisissez un nom, sélectionnez Web, puis cliquez sur Créer. 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 tous les blocs de contenu et de saisie que vous souhaitez 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, choisissez un type de formulaire: Pop-up, Pleine page, Volant, Intégré ou Bannière.

• 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. Les formulaires d’inscription intégrés sont les formulaires d’inscription les moins intrusifs et sont généralement utilisés dans le pied de page d’un site pour collecter des adresses e-mail.
• 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 affichent un taux de conversion élevé, car ils ne peuvent pas être facilement ignorés. Cependant, cela les rend aussi plus intrusifs, car les acheteurs doivent interagir avec le formulaire pour le fermer.
  • Envisagez d’ utiliser un formulaire pleine page comme landing page 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 contenu 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 déclencher un autre formulaire à partir d’une bannière, cliquez sur le bouton de la bannière dans l’aperçu, puis définissez Action sur Ouvrir un autre formulaire. Choisissez une pop-up active, un volant, ou un formulaire pleine page sous Formulaire à ouvrir. Les formulaires intégrés peuvent également utiliser cette action, mais un formulaire intégré, une bannière, ou un formulaire de retour en stock ne peut pas être le formulaire qui s’ouvre.

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 les champs de votre formulaire.

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.
  • Réduire les dimensions en pixels d’une image ou la compresser peut réduire la taille de son fichier, mais peut aussi réduire sa qualité. Trouvez le bon compromis entre qualité et temps de chargement lorsque vous choisissez des images.
• Utilisez une image de qualité raisonnablement élevée pour obtenir les meilleurs résultats.
  
  • 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 du formulaire peuvent faire moins de 600 pixels.
    • Si vous utilisez un formulaire d’inscription pleine page, vous aurez besoin d’une image plus grande en haute résolution (par exemple, avec une largeur minimale de 1 980 px) pour l’adapter au formulaire plus grand. Gardez à l’esprit que cela peut tout de même 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.

Les formulaires d’inscription s’affichent dans les navigateurs web, tandis que les e-mails s’affichent dans les clients de messagerie. Utilisez des images de haute résolution avec des tailles de fichier raisonnables, et testez leur affichage sur chaque type d’appareil. Les images importées via l’éditeur de formulaires doivent faire 5 MB ou moins.

Ajouter une image latérale

Des images latérales sont disponibles pour les formulaires pop-up, volants, intégrés et pleine page. 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. Cliquez sur la zone vide de l’image latérale dans l’aperçu du formulaire, puis cliquez sur Sélectionner une image pour choisir une image dans votre bibliothèque ou en importer une nouvelle.

Par défaut, l’ajout d’une image latérale définit les formulaires pop-up, volant et intégrés à une largeur de 780 px, avec une image latérale Moyenne. Ajustez la part de l’image dans le formulaire dans Styles > Image latérale. Ajustez la largeur globale du formulaire dans Paramètres de pop-up, Paramètres de volant ou Paramètres d’intégration. Pour les formulaires en pleine page, ajustez la largeur du contenu dans Paramètres de pleine page.

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 comment ajouter des images latérales dans les formulaires d’inscription.

Les images latérales sont masquées par défaut sur les appareils mobiles. Pour en afficher une sur mobile également, accédez à Styles > Image latérale et sélectionnez Tous les appareils. Prévisualisez la mise en page mobile après avoir effectué cette modification.

Ajouter une image d’arrière-plan

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

1. Dans Styles, activez Image d’arrière-plan.
2. Cliquez sur Sélectionner une image pour choisir une image dans votre bibliothèque ou en importer une nouvelle.
3. Choisissez la façon dont l’image s’adapte : Couverture remplit la zone et peut rogner l’image ; Contenir affiche l’image entière et peut laisser de l’espace vide ; Personnalisé vous permet de définir sa largeur. Ajustez l’alignement pour positionner l’image.

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. Lorsque votre formulaire inclut une image, une partie du contenu de l’image peut être coupée sur les étapes de plus petite taille. Pour les formulaires pop-up, volants et intégrés, ajustez la hauteur min sous Paramètres du pop-up, Paramètres du volant ou Paramètres d’intégration dans Styles. Les formulaires en pleine page ne disposent pas de ce paramètre. Vérifiez également l’ajustement et l’alignement de l’image à chaque étape et pour chaque taille d’appareil.

Options de couleur et d’espacement

Dans Styles, utilisez Couleur d’arrière-plan, Bordure, Marges internes et Marge pour ajuster les couleurs et l’espacement du formulaire. Utilisez les styles de champ de saisie pour mettre en forme les champs de saisie. La marge n’est pas disponible pour les formulaires intégrés. Ces paramètres s’appliquent à toutes les étapes de votre formulaire, à moins que vous n’appliquiez des paramètres contradictoires dans un bloc spécifique.

Polices et styles de texte

Utilisez Styles > Texte du champ de saisie pour modifier la police, la taille, et la couleur des champs de saisie, tels que les champs de e-mail et de numéro de téléphone. Utilisez Texte et titres pour définir des styles partagés pour les blocs de texte, en sélectionnant Corps ou un niveau de titre avant d’ajuster son apparence.

Pour modifier le texte d’un bloc Texte spécifique, cliquez sur le bloc dans l’aperçu du formulaire et utilisez l’éditeur Contenu 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.

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

Icônes de fermeture

Vous pouvez ajuster la taille, la couleur et le style de l’icône de fermeture de votre formulaire (le X dans le coin supérieur droit par défaut). Cliquez sur l’icône X dans l’aperçu du formulaire, puis ajustez les paramètres Close icon. Les formulaires intégrés n’ont pas d’icône de fermeture. En savoir plus sur la mise en forme de l’icône de fermeture d’un formulaire.

Les acheteurs peuvent fermer un formulaire pleine page à l’aide de l’icône de fermeture ou de la touche Échap. Veillez à ce que l’icône de fermeture soit claire et bien visible afin que les acheteurs ne soient pas frustrés par l’interruption de votre formulaire pleine page.

Contenus HTML et CSS personnalisés

Les comptes Klaviyo payants peuvent utiliser du HTML et du CSS personnalisés dans les formulaires d’inscription. Ces fonctionnalités sont destinées aux personnes à l’aise avec l’écriture de code. Klaviyo ne fournit pas d’assistance pour le code personnalisé, et du code incorrect peut empêcher votre formulaire de fonctionner correctement. Prévisualisez et testez votre formulaire sur ordinateur et sur mobile avant de le publier.

• Pour modifier le style avec CSS, accédez à Styles > CSS personnalisé, puis activez Activer le CSS personnalisé. Saisissez votre code dans Code CSS personnalisé. Découvrez comment utiliser le CSS personnalisé dans les formulaires d’inscription.
• Pour ajouter du contenu personnalisé, faites glisser un bloc HTML depuis Ajouter des blocs sur votre formulaire, puis sélectionnez-le pour saisir votre balisage. Cela ajoute du contenu dans le bloc ; cela ne modifie pas le HTML des blocs existants. Utilisez uniquement les tags et attributs pris en charge. Découvrez comment utiliser un bloc HTML personnalisé dans les formulaires d’inscription.

Pour obtenir des conseils et de l’inspiration afin de personnaliser votre formulaire à l’aide de l’éditeur de Klaviyo, rendez-vous sur le forum de la Communauté.

Résultat

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.

Vos modifications de style doivent être publiées avant d’apparaître sur votre site web, y compris les modifications apportées à un formulaire déjà en ligne. Une fois la conception et le ciblage prêts, suivez les étapes pour publier et tester votre formulaire d’inscription.

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