• Accueil / Pardot / Façons créatives de…
, Façons créatives de pimenter vos formulaires Pardot : Partie 3<span class="wtr-time-wrap after-title"><span class="wtr-time-number">6</span> minutes de lecture</span>

Façons créatives de pimenter vos formulaires Pardot : Partie 36 minutes de lecture


La 3ème et dernière partie de la série de personnalisation de formulaires est enfin là ! Dans la première partie, je vous ai montré comment mettre en œuvre la technique populaire des étiquettes flottantes et comment créer des listes déroulantes consultables et conviviales. Dans la partie 2, je vous ai montré comment créer un formulaire conversationnel de style paragraphe et comment créer un formulaire sur une seule ligne. Dans cet article, je vais vous montrer comment ajouter des images à votre case à cocher et à vos boutons radio.

Cases à cocher avec des images

Le concept est de masquer les cases à cocher par défaut et de les remplacer par des images. Lorsqu’une des images est sélectionnée, la bordure et la couleur d’arrière-plan de la boîte changent pour informer le prospect que l’option a été sélectionnée.

, Façons créatives de pimenter vos formulaires Pardot : Partie 3<span class="wtr-time-wrap after-title"><span class="wtr-time-number">6</span> minutes de lecture</span>

Étape 1 : Ajoutez les images et le texte à votre formulaire

La première étape consiste à ajouter le texte et les images aux cases à cocher de votre formulaire. Pour ce faire, rendez-vous sur le des champs de votre formulaire et modifiez ou ajoutez le champ des cases à cocher. Cliquez sur l’onglet valeurs et ajoutez les valeurs. Le texte dans la première case est le texte qui sera stocké dans Pardot. La deuxième case est la afficher le texte aka le texte que le prospect verra en remplissant le formulaire. C’est là que vous ajouteriez les images pour chaque option.

, Façons créatives de pimenter vos formulaires Pardot : Partie 3<span class="wtr-time-wrap after-title"><span class="wtr-time-number">6</span> minutes de lecture</span>

La valeur devrait ressembler à ceci :

Ajoutez l’URL de votre image, définissez la largeur de l’image (facultatif) et ajoutez votre texte (enveloppé dans une balise SPAN).

Voici à quoi ressemble mon formulaire une fois que j’ai ajouté les images aux cases à cocher.

, Façons créatives de pimenter vos formulaires Pardot : Partie 3<span class="wtr-time-wrap after-title"><span class="wtr-time-number">6</span> minutes de lecture</span>

Maintenant, ajoutons du CSS pour le rendre plus beau…

Étape 2 : ajouter le CSS

Ajoutez ce CSS pour styliser les cases à cocher.

Noter: Je n’ai qu’UNE case à cocher dans mon formulaire, mais si vous avez PLUSIEURS cases à cocher dans votre formulaire, cela les stylisera toutes. Pour styliser une seule case à cocher, remplacez .pd-case à cocher au sein du CSS pour .YOURFIELDNAME

Voyez-le en action

Voici à quoi ressemble mon exemple en action.

Voir le stylo
Formulaires Pardot : personnalisation des cases à cocher
de Jenna Molby (@jennamolby)
au Stylo de code.

Boutons radio avec images

Le concept est le même que l’exemple des cases à cocher. Nous allons masquer les boutons radio par défaut et les remplacer par des images. Lorsqu’une des images est sélectionnée, la bordure et la couleur d’arrière-plan de la boîte changent pour informer le prospect que l’option a été sélectionnée.

, Façons créatives de pimenter vos formulaires Pardot : Partie 3<span class="wtr-time-wrap after-title"><span class="wtr-time-number">6</span> minutes de lecture</span>

Étape 1 : Ajoutez les images et le texte à votre formulaire

La première étape consiste à ajouter le texte et les images aux boutons radio de votre formulaire. Pour ce faire, rendez-vous sur le des champs de votre formulaire et modifiez ou ajoutez le champ radio. Cliquez sur l’onglet valeurs et ajoutez les valeurs. Le texte dans la première case est le texte qui sera stocké dans Pardot. La deuxième case est la afficher le texte aka le texte que le prospect verra en remplissant le formulaire. C’est là que vous ajouteriez les images pour chaque option. La valeur devrait ressembler à ceci :

, Façons créatives de pimenter vos formulaires Pardot : Partie 3<span class="wtr-time-wrap after-title"><span class="wtr-time-number">6</span> minutes de lecture</span>

La valeur devrait ressembler à ceci :

Ajoutez l’URL de votre image, définissez la largeur de l’image (facultatif) et ajoutez votre texte (enveloppé dans une balise SPAN).

Voici à quoi ressemble mon formulaire une fois que j’ai ajouté les images aux boutons radio.

, Façons créatives de pimenter vos formulaires Pardot : Partie 3<span class="wtr-time-wrap after-title"><span class="wtr-time-number">6</span> minutes de lecture</span>

Étape 2 : ajouter le CSS

Ajoutez ce CSS pour styliser les boutons radio.

Noter: Je n’ai qu’UN seul champ radio dans mon formulaire, mais si vous avez PLUSIEURS champs radio dans votre formulaire, cela les stylisera tous. Pour styliser UN SEUL champ radio, remplacez .pd-radio au sein du CSS pour .YOURFIELDNAME

Voyez-le en action

Voici à quoi ressemble mon exemple en action.

Voir le stylo
Formulaires Pardot : personnalisation des boutons radio
de Jenna Molby (@jennamolby)
au Stylo de code.

Des questions?

Envoyez-moi un tweet @jennamolby, ou laissez un commentaire.





Source de l’article traduit automatiquement en Français

Besoin d'aide ?
Vous utilisez Pardot depuis un certain temps mais vous n'êtes pas sûr d'en
exploiter tout le potentiel

Notre analyse de votre Pardot offerte dès aujourd'hui
Merci, vous pouvez compléter notre questionnaire
Nous allons revenir vers vous rapidement !

Fermer