Comment utiliser des feuilles de style CSS personnalisées dans les formulaires d’inscription

Apprenez à utiliser des feuilles de style CSS personnalisées pour styliser vos formulaires d’inscription Klaviyo au-delà de ce qui est disponible dans l’éditeur de formulaires. Les feuilles de style CSS personnalisées vous permettent de contrôler avec précision les propriétés telles que la hauteur des lignes, l’espacement entre les lettres et l’espacement entre les éléments, afin que vos formulaires correspondent exactement à votre marque.

Avant de commencer

Notez ce qui suit avant d’utiliser des feuilles de style CSS personnalisées :

• Le CSS personnalisé n’est disponible que pour les abonnements Klaviyo payants. Cette fonctionnalité est déployée progressivement, il se peut donc que vous ne la voyiez pas encore dans votre compte.
• L’assistance Klaviyo ne peut pas résoudre les problèmes liés au code personnalisé. Les problèmes causés par les feuilles de style CSS personnalisées (par exemple, des mises en page cassées, des champs masqués, des problèmes de rendu) relèvent de votre responsabilité. Si un formulaire avec un CSS personnalisé ne s’affiche pas ou ne se comporte pas correctement, désactivez d’abord le CSS personnalisé pour vérifier si votre code en est la cause.
• Le style des feuilles CSS personnalisées n’est appliqué qu’à ces éléments. Vous ne pouvez pas ajouter ou modifier le code HTML de votre formulaire ou de ses blocs via cette fonctionnalité.
• Testez avant de publier. Les feuilles de style CSS personnalisées peuvent affecter l’utilisation des formulaires (par exemple, le fait de masquer accidentellement un champ obligatoire peut empêcher les inscriptions). Prévisualisez et testez toujours votre formulaire avant de le publier.

Activer le CSS personnalisé

Pour activer les feuilles de style CSS personnalisées sur un formulaire :

1. Accédez à Formulaires d’inscription et ouvrez votre formulaire dans l’éditeur.
2. Sélectionnez l’onglet Styles.
3. Faites défiler jusqu’à la section CSS personnalisé en bas du panneau.
4. Activez le Bouton bascule CSS personnalisé.
5. Vérifiez le message d’avertissement. En activant les feuilles de style CSS personnalisées, vous reconnaissez que l’assistance Klaviyo ne peut pas vous aider à résoudre les problèmes causés par votre code personnalisé.

Une fois cette option activée, un éditeur CSS s’affiche et vous permet d’écrire des feuilles personnalisées pour votre formulaire. Les feuilles de style CSS personnalisées sont activées pour chaque formulaire. L’activation de ces feuilles pour un formulaire n’affecte pas vos autres formulaires.

Définir des noms de classe pour les composants de formulaire

Lorsque le CSS personnalisé est activé, chaque composant de votre formulaire reçoit un champ de classe CSS, visible en bas de la barre latérale du composant lorsque vous le sélectionnez. Par défaut, le nom de la classe est le nom du composant. Vous pouvez le remplacer par le vôtre pour faciliter l’accès.

Utilisez ces noms de classe comme sélecteurs dans votre fichier CSS. Définir vos propres noms de classe est le moyen le plus fiable de cibler les éléments de formulaire, car ils restent stables et lisibles.

Si vous désactivez ultérieurement les feuilles de style CSS personnalisées, les noms de vos classes sont conservés et réapparaîtront si vous les réactivez.

Rédigez votre CSS

L’éditeur CSS démarre vide. Il n’affiche pas les styles actuels de votre formulaire, car ils sont générés lorsque le formulaire s’affiche sur votre site. Pour cibler les éléments, utilisez l’une ou l’autre de ces approches :

• Utilisez les noms de vos classes. Référez-vous aux noms de classe que vous avez définis dans vos composants de formulaire (recommandé).
• Inspectez votre formulaire actif. Ouvrez votre formulaire publié sur votre site web, puis utilisez les outils de développement de votre navigateur (clic droit > Inspecter) pour identifier les sélecteurs que vous souhaitez cibler.

Évitez de cibler les noms de classe générés automatiquement par Klaviyo. Ils sont internes, peuvent inclure des valeurs hachées et peuvent être modifiés sans préavis, ce qui briserait silencieusement votre CSS. Utilisez plutôt vos propres noms de classe.

Exemple

Supposons que vous définissiez le nom de la classe form-headline sur votre bloc de titre et email-input sur votre bloc de saisie de l’e-mail :

.form-headline {
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.email-input {
  margin-bottom: 12px;
}

Le CSS personnalisé débloque également des éléments de style qui ne sont pas disponibles dans l’éditeur, tels que du texte de droite à gauche :

.form-headline {
  direction: rtl;
  text-align: right;
}

Prévisualiser et publier

Après avoir rédigé votre CSS :

1. Utilisez l’aperçu de l’éditeur pour vérifier l’apparence de votre formulaire.
2. Vérifiez votre formulaire à la fois sur ordinateur et sur mobile, car les feuilles de style CSS personnalisées peuvent chacune avoir un impact différent.
3. Publiez votre formulaire sur une page non publique pour vérifier qu’il s’affiche bien sur le site.
4. Envoyez un test d’inscription sur votre formulaire publié pour confirmer que toutes les saisies et tous les boutons fonctionnent toujours.
5. Publiez votre formulaire publiquement.

Désactiver le CSS personnalisé

Pour supprimer le style personnalisé, désactivez le bouton bascule CSS personnalisé dans l’onglet Styles. Votre formulaire reprend immédiatement son style d’éditeur standard. C’est également le moyen le plus rapide de vérifier si votre code personnalisé est à l’origine d’un problème d’affichage. Votre ancien code CSS sera enregistré si vous choisissez de réactiver les feuilles CSS personnalisées.

Résolution de problèmes

Mon CSS ne s’applique pas.
Confirmez que les feuilles de style CSS personnalisées sont activées, que vos sélecteurs correspondent aux noms de classe définis sur vos composants et que vous avez publié la dernière version du formulaire. Les styles de votre site web peuvent également entrer en conflit avec les styles de formulaire ou les remplacer. Utilisez les outils de développement de votre navigateur pour vérifier quelles règles sont gagnantes.

Mon formulaire semble cassé ou j’ai cessé de collecter des inscriptions.
Désactivez les feuilles de style CSS personnalisées pour confirmer la cause, puis vérifiez votre code. Recherchez en particulier des règles qui masquent ou repositionnent les entrées et les boutons.

Je ne vois pas la section CSS personnalisé.
Les feuilles de style CSS personnalisées ne sont disponibles que pour les abonnements payants et sont déployées progressivement. Si vous avez un abonnement payant et que vous ne le voyez pas encore, revenez bientôt.

Les styles de typographie d’une classe personnalisée ne s’appliquent pas.

Si des styles de mise en page comme margin fonctionnent, mais que des styles de texte comme letter-spacing ou line-height ne fonctionnent pas, la classe personnalisée est probablement attachée au wrapper externe, tandis que le texte visible est rendu dans un élément enfant imbriqué. Dans ce cas, ciblez également les éléments enfants, par exemple : .form-headline, .form-headline * { ... }.

Questions fréquemment posées

Puis-je ajouter du code HTML personnalisé à mon formulaire ?
Non. Vous ne pouvez pas ajouter d’éléments HTML à un formulaire ni modifier le code HTML de blocs existants. Les feuilles de style CSS personnalisées ne modifient que le style des composants existants de votre formulaire.

Les feuilles de style CSS personnalisées fonctionnent-elles sur tous mes formulaires ?
Le CSS personnalisé est activé pour chaque formulaire, pour les formulaires affichés sur votre site web. Activez-le individuellement pour chaque formulaire que vous souhaitez personnaliser.

L’assistance Klaviyo m’aidera-t-elle à rédiger ou à corriger mon CSS ?
Non. L’assistance Klaviyo ne peut pas écrire, vérifier ou résoudre des problèmes liés au code personnalisé. Si un formulaire avec des feuilles de style CSS personnalisées rencontre un problème, il vous sera demandé de désactiver les feuilles de style CSS personnalisées pour l’exclure avant que l’assistance ne puisse poursuivre l’enquête.

Que se passe-t-il avec mon CSS si je désactive la fonctionnalité ?
Le style de votre formulaire revient à la normale. Les noms de vos classes de composants sont enregistrés et restaurés si vous réactivez les feuilles de style CSS personnalisées.