Comment utiliser un bloc HTML personnalisé dans les formulaires d’inscription

Objectif de cet article

Découvrez comment utiliser le bloc HTML personnalisé pour ajouter votre propre balisage aux formulaires d’inscription Klaviyo, au-delà des blocs disponibles dans l’éditeur de formulaires. Le bloc HTML vous offre un contrôle précis du contenu et de la mise en page — titres personnalisés, texte mis en forme, listes, tableaux, images et liens — afin que vos formulaires correspondent exactement à votre marque et à votre message.

Pour des raisons de sécurité, le bloc HTML ne prend en charge qu’un ensemble spécifique de tag et d’attributs. Tout ce qui ne fait pas partie de cet ensemble est automatiquement supprimé lors du rendu de votre formulaire. Ainsi, tout le HTML que vous écrivez n’apparaîtra pas forcément sur votre site. Les sections ci-dessous indiquent quels tags et attributs sont pris en charge et lesquels sont toujours supprimés.

Avant de commencer

Notez les points suivants avant d’utiliser du code HTML personnalisé :

• Le bloc HTML personnalisé est disponible uniquement avec les forfaits Klaviyo payants. Cette fonctionnalité est déployée progressivement, il est donc possible que vous ne la voyiez pas encore dans votre compte.
• Votre code HTML est automatiquement assaini pour des raisons de sécurité. Le bloc HTML ne conserve que les tags et les attributs pris en charge et supprime tout le reste — y compris les scripts et les gestionnaires d’événements — lors de l’affichage de votre formulaire. Cela protège les visiteurs de votre site contre le code malveillant. Par conséquent, une partie du code HTML que vous écrivez peut ne pas apparaître sur votre site si elle n’est pas prise en charge. Veuillez consulter la liste des tags pris en charge ci-dessous.
• Le bloc HTML personnalisé ajoute uniquement du nouveau contenu. Le bloc HTML vous permet d’ajouter vos propres éléments à un formulaire. Vous ne pouvez pas l’utiliser pour modifier le HTML des blocs existants de votre formulaire.
• L’assistance Klaviyo ne peut pas dépanner le code personnalisé. Les problèmes causés par du HTML personnalisé (par exemple, des mises en page cassées, du contenu qui ne s’affiche pas, des problèmes de style) relèvent de votre responsabilité pour le déboguer et les corriger. Si un formulaire avec du HTML personnalisé ne s’affiche pas ou ne se comporte pas correctement, supprimez d’abord le bloc HTML pour vérifier si votre code en est la cause.
• Testez avant de publier. Le code HTML personnalisé peut affecter la mise en page et la facilité d’utilisation du formulaire. Prévisualisez et testez toujours votre formulaire sur ordinateur et sur mobile avant de le publier.

Ajouter un bloc HTML à votre formulaire

Pour ajouter du HTML personnalisé à un formulaire :

1. Accédez à Formulaires d’inscription et ouvrez votre formulaire dans l’éditeur.
2. Dans le panneau Blocs, recherchez le bloc HTML et faites-le glisser sur votre formulaire à l’endroit où vous souhaitez que le contenu personnalisé apparaisse.

3. Sélectionnez le bloc HTML pour ouvrir ses paramètres. Un éditeur de code apparaît dans la barre latérale du bloc.

Le bloc HTML fonctionne comme n’importe quel autre bloc dans l’éditeur de formulaires : vous pouvez en ajouter plusieurs, les repositionner et les supprimer. Le HTML personnalisé est contenu dans son bloc, il n’affecte donc pas le reste de la structure de votre formulaire.

Rédigez votre HTML

L’éditeur de code démarre vide. Saisissez directement votre HTML, en n’utilisant que les tag et attributs pris en charge. Les tag et attributs non pris en charge sont supprimés automatiquement lorsque votre formulaire s’affiche.

Exemple

<h2 class="promo-heading">Join our list</h2>
<p>Sign up for <strong>15% off</strong> your first order, plus:</p>
<ul>
  <li>Early access to new drops</li>
  <li>Members-only offers</li>
</ul>
<p><a href="https://www.example.com/terms" target="_blank">See terms and conditions</a></p>

Pour mettre en forme votre HTML, ajoutez vos propres noms class aux éléments et ciblez-les avec du CSS personnalisé. Par exemple, définissez class="promo-heading" sur votre en-tête, puis mettez .promo-heading en forme dans l’éditeur de CSS personnalisé. Consultez Comment utiliser le CSS personnalisé dans les formulaires d’inscription pour savoir comment activer et rédiger du CSS personnalisé.

Balises HTML et attributs pris en charge

Pour des raisons de sécurité, le bloc HTML prend en charge les tags et attributs suivants. Tout tag ou attribut qui ne figure pas sur cette liste est supprimé lors de l’affichage de votre formulaire.

Attributs globaux — ils sont autorisés sur tous les tags pris en charge : id, class, dir, lang, role et aria-* (attributs d’accessibilité).

Les tableaux ci-dessous répertorient les attributs supplémentaires autorisés sur des tag spécifiques, au-delà des attributs globaux ci-dessus.

Texte et mise en forme

Titres

Listes

Tableaux

Médias et liens

Schémas d’URL autorisés

Les liens (href) et les sources d’images (src) ne peuvent utiliser que ces schémas d’URL : http, https, mailto, tel, ainsi que des chemins relatifs ou des ancres #fragment. Les URL utilisant tout autre schéma (comme javascript: ou data:) sont supprimées. Lorsqu’un lien utilise target="_blank", rel="noopener noreferrer" est appliqué automatiquement pour garder le lien sécurisé.

Tags et attributs supprimés pour des raisons de sécurité

Pour protéger votre site et vos visiteurs, le bloc HTML supprime automatiquement tout ce qui pourrait exécuter du code ou détourner votre formulaire — une classe d’attaque connue sous le nom de cross-site scripting (XSS). Les éléments suivants sont toujours supprimés, même s’ils sont courants en HTML :

• Scripts : <script> et <noscript>
• Attributs de gestionnaires d’événements : tout attribut dont le nom commence par on (par exemple, onclick, onload, onerror, onmouseover)
• Cadres et contenus intégrés : <iframe>, <frame>, <frameset>, <object>, <embed>, <applet>, <portal>
• Tag vectoriel et de langage de balisage : <svg>, <math>
• Tag de document et de ressource : <base>, <meta>, <link> et le tag <style>
• Schémas d’URL dangereux dans les liens ou les sources : javascript:, vbscript:, data:, filesystem:
• Attributs de remplacement de l’envoi du formulaire : formaction, formmethod, formtarget, formenctype
• Tags existants ou obsolètes : <marquee>, <bgsound>, <keygen>, <isindex>, <xmp>, <listing>, <plaintext>, <template>, <noembed>

Si une partie de votre code disparaît lors de l’affichage du formulaire, c’est très probablement parce qu’il utilise un tag ou un attribut qui ne figure pas dans la liste des éléments pris en charge ci-dessus.

Aperçu et publier

Après avoir écrit votre code HTML :

1. Utilisez l’aperçu de l’éditeur pour vérifier l’apparence de votre formulaire.
2. Vérifiez votre formulaire sur ordinateur et sur mobile, car le HTML personnalisé peut affecter chacun différemment.
3. Publiez votre formulaire sur une page non accessible au public afin de valider son affichage sur votre site.
4. Envoyez une inscription de test sur votre formulaire publié pour confirmer que toutes les entrées et tous les boutons fonctionnent toujours.
5. Publiez votre formulaire publiquement.

Modifier ou supprimer le code HTML personnalisé

Pour modifier votre HTML, sélectionnez le bloc HTML et mettez à jour le code dans ses paramètres.

Pour supprimer du code HTML personnalisé, sélectionnez le bloc HTML, puis supprimez-le. Cela supprime le bloc et son contenu de votre formulaire ; le reste de votre formulaire n’est pas affecté. Supprimer le bloc est également le moyen le plus rapide de vérifier si un problème d’affichage est causé par votre code personnalisé.

Résolution de problèmes

Une partie de mon HTML n’apparaît pas.
Le bloc HTML supprime tout tag ou attribut qui n’est pas pris en charge lors de l’affichage de votre formulaire. Vérifiez votre code par rapport aux tags et attributs pris en charge ci-dessus, et confirmez que vous n’utilisez pas de tag ou d’attribut supprimé pour des raisons de sécurité.

Mon formulaire semble cassé.
Vérifiez votre HTML pour repérer les tag non fermés ou mal assortis, ainsi que les règles de mise en page qui repositionnent d’autres blocs ou les font se chevaucher. Comme votre code se trouve dans son propre bloc, vous pouvez supprimer le bloc HTML pour confirmer qu’il est en cause, puis le rajouter et tester des modifications plus petites.

Mon style ne s’applique pas à mon HTML.
Confirmez que les noms class dans votre HTML correspondent aux sélecteurs dans votre CSS personnalisé, que le CSS personnalisé est activé et que vous avez publié la dernière version du formulaire. Consultez Comment utiliser du CSS personnalisé dans les formulaire d’inscription.

Je ne vois pas le bloc HTML.
Le HTML personnalisé est uniquement disponible dans les forfaits payants et est déployé progressivement. Si vous êtes sur un forfait payant et que vous ne le voyez pas encore, revenez bientôt vérifier.

Questions fréquemment posées

Puis-je modifier le HTML des blocs existants de mon formulaire ?
Non. Le bloc HTML vous permet d’ajouter du nouveau contenu personnalisé à un formulaire. Il ne modifie pas le HTML des blocs existants de votre formulaire.

Pourquoi une partie de mon code a-t-elle été supprimée ?
Pour des raisons de sécurité, le bloc HTML ne conserve que les tags et les attributs pris en charge et supprime tout le reste (comme les scripts et les gestionnaires d’événements), afin d’empêcher l’exécution de code malveillant sur votre site. Consultez la liste des tags et des attributs supprimés pour des raisons de sécurité ci-dessus.

Puis-je ajouter un <script> ou un autre JavaScript à mon formulaire ?
Non. Les scripts et les attributs de gestionnaire d’événements sont toujours supprimés pour protéger les visiteurs de votre site. Cela ne peut pas être désactivé.

Puis-je mettre en forme mon bloc HTML ?
Oui. Ajoutez vos propres noms de class à vos éléments HTML et ciblez-les avec du CSS personnalisé. Consultez Comment utiliser du CSS personnalisé dans les formulaires d’inscription.

L’assistance Klaviyo peut-elle m’aider à écrire ou corriger mon HTML ?
Non. L’assistance Klaviyo ne peut pas rédiger, examiner ou dépanner du code personnalisé. Si un formulaire avec du HTML personnalisé présente un problème, il vous sera demandé de supprimer le bloc HTML pour l’écarter avant que l’assistance puisse poursuivre son investigation.