• Accueil / Pardot / Mise en forme…
, Mise en forme des cases à cocher et des boutons radio dans les formulaires Pardot<span class="wtr-time-wrap after-title"><span class="wtr-time-number">5</span> minutes de lecture</span>

Mise en forme des cases à cocher et des boutons radio dans les formulaires Pardot5 minutes de lecture


31 décembre 2018 ->

Vos formulaires Pardot ne doivent pas être ennuyeux. Avec un peu de CSS supplémentaire, vous pouvez créer de magnifiques formulaires Pardot avec des cases à cocher et des boutons radio personnalisés. Dans ce didacticiel, je vais vous montrer comment créer des cases à cocher et des boutons radio dans les formulaires Pardot avec un codage minimal.

Avant que nous commencions…

Découvrons comment ajouter du CSS personnalisé à vos formulaires Pardot.

Accédez à Marketing> Formulaires> Modèles de présentation et sélectionnez la présentation à laquelle ajouter les styles de formulaire. Collez le CSS juste au dessus le code existant du Forme onglet et enregistrez.

, Mise en forme des cases à cocher et des boutons radio dans les formulaires Pardot<span class="wtr-time-wrap after-title"><span class="wtr-time-number">5</span> minutes de lecture</span>

Cases à cocher de style

L’un des inconvénients de l’utilisation des formulaires Pardot est l’impossibilité de modifier la structure HTML du formulaire, donc je vais utiliser le code HTML Pardot standard pour styliser les cases à cocher.

Le HTML

Le code HTML standard pour une case à cocher dans un formulaire Pardot ressemble à ceci:

Remarquez comment toutes les cases à cocher sont enveloppées dans une balise de paragraphe avec la classe pd-checkbox? C’est ainsi que nous ciblerons l’entrée de case à cocher et l’étiquette de case à cocher dans le CSS.

Le CSS

Pour le CSS, FontAwesome sera chargé pour afficher la coche de la case à cocher. La case à cocher par défaut sera masquée et le :: avant sélecteur sera utilisé pour styliser la nouvelle case à cocher.

Ajoutez la bibliothèque impressionnante de polices dans votre modèle de mise en page entre le TÊTE Mots clés.

Le résultat

Les cases à cocher stylisées ressembleront à ceci une fois le CSS ajouté au formulaire Pardot.

Voir le stylo Pardot Customized Checkboxes Using CSS (option 1) par Jenna Molby (@jennamolby) sur CodePen.

Styling Radio Buttons

Les boutons radio de style sont assez similaires aux cases à cocher, mais avec un peu de CSS supplémentaire pour les faire ressembler à un bouton radio. Tout comme les cases à cocher, nous exploiterons le code HTML fourni par Pardot, donc tout ce que vous avez à faire est d’ajouter du CSS.

Le HTML

Tous les boutons radio du formulaire Pardot sont enveloppés dans une balise de paragraphe avec la classe pd-radio. C’est ainsi que nous ciblerons l’entrée radio et l’étiquette radio dans le CSS.

Le CSS

Tout comme le CSS pour les cases à cocher, FontAwesome sera chargé pour afficher la coche du bouton radio et le bouton radio par défaut sera masqué.

Le résultat

Voir le stylo Boutons radio personnalisés Pardot utilisant CSS (option 1) par Jenna Molby (@jennamolby) sur CodePen.

Des questions?

Envoyez-les moi par e-mail, envoyez-moi un tweet @jennamolby, ou laissez un commentaire





Source de l’article traduit automatiquement en Français