• Accueil / Pardot / Des moyens créatifs…
, Des moyens créatifs pour pimenter vos formulaires Pardot: Partie 2<span class="wtr-time-wrap after-title"><span class="wtr-time-number">1</span> minutes de lecture</span>

Des moyens créatifs pour pimenter vos formulaires Pardot: Partie 21 minutes de lecture


31 octobre 2019 ->

La 2ème partie de la série de personnalisation de formulaire est enfin là! Dans la partie 1, je vous ai montré comment mettre en œuvre la technique d’étiquette flottante populaire et comment créer des listes déroulantes conviviales et consultables. Dans cet article, je vais vous montrer comment créer un formulaire conversationnel de style paragraphe et comment créer un formulaire sur une seule ligne.

C’est partie 2 du Série en 3 parties. Avez-vous récemment rencontré un formulaire et ne saviez pas répliquer la fonctionnalité dans Pardot? Partagez-le avec moi par e-mail, un tweet @jennamolby, ou dans les commentaires.

Créer un formulaire de style paragraphe

Ce formulaire «conversationnel» de style paragraphe est un moyen unique d’afficher votre formulaire Pardot. Cela nécessite la modification de votre modèle de mise en page et l’ajout de javascript et CSS personnalisés. Voici un aperçu de son apparence.

, Des moyens créatifs pour pimenter vos formulaires Pardot: Partie 2<span class="wtr-time-wrap after-title"><span class="wtr-time-number">1</span> minutes de lecture</span>

Modifiez votre modèle de mise en page

Pour que cette méthode fonctionne, vous devez apporter des mises à jour à votre modèle de mise en page. Accédez à votre modèle de mise en page et cliquez sur le FORME languette. Remplacez le code par le code ci-dessous.

Qu’est ce qui a changé?

Les balises de paragraphe entourant les entrées ont été remplacées par des DIV et le code de description a été déplacé d’après l’entrée vers avant l’entrée.

Modifiez votre formulaire

Comme il s’agit d’une technique avancée, la configuration du formulaire est un peu unique. Les étiquettes du formulaire feront office de «texte de paragraphe» et l’option de description sera utilisée comme espace réservé dans les champs.

Voici à quoi ressemble la configuration de mon formulaire une fois les étiquettes mises à jour et le texte de description ajouté.

, Des moyens créatifs pour pimenter vos formulaires Pardot: Partie 2<span class="wtr-time-wrap after-title"><span class="wtr-time-number">1</span> minutes de lecture</span>

, Des moyens créatifs pour pimenter vos formulaires Pardot: Partie 2<span class="wtr-time-wrap after-title"><span class="wtr-time-number">1</span> minutes de lecture</span>

Ajoutez le Javascript

Ce javascript prendra le texte de description du formulaire et les transformera en texte d’espace réservé.

Ajoutez le CSS

Le CSS est assez simple. Flottez toutes les étiquettes et entrées vers la gauche, stylisez le texte d’espace réservé et les messages d’erreur.

Personnalisations supplémentaires

Renvoyer le texte sur une autre ligne

Par défaut, les champs du formulaire apparaîtront sur une ligne différente et s’habilleront en fonction de la largeur de votre formulaire. Si vous souhaitez forcer une nouvelle ligne, parcourez le champ de formulaire qui doit commencer sur un nouvelle ligne dans l’éditeur. Clique sur le Avancée onglet et ajouter la classe saut de ligne comme indiqué ci-dessous.

, Des moyens créatifs pour pimenter vos formulaires Pardot: Partie 2<span class="wtr-time-wrap after-title"><span class="wtr-time-number">1</span> minutes de lecture</span>

Ajouter un point à la fin d’une phrase

Vous pouvez également ajouter un point à la fin d’une phrase. Ajoutez simplement la classe fin où vous voulez que la période apparaisse.

, Des moyens créatifs pour pimenter vos formulaires Pardot: Partie 2<span class="wtr-time-wrap after-title"><span class="wtr-time-number">1</span> minutes de lecture</span>

Le résultat

Stylying minimal
Version stylée

Créer un formulaire sur une seule ligne

Je reçois beaucoup de demandes de renseignements sur la façon de mettre les champs de formulaire et le bouton d’envoi sur une seule ligne. Maintenant, j’ai enfin trouvé le temps de le documenter. Voici un exemple de l’apparence du formulaire.

, Des moyens créatifs pour pimenter vos formulaires Pardot: Partie 2<span class="wtr-time-wrap after-title"><span class="wtr-time-number">1</span> minutes de lecture</span>

Modifiez votre modèle de mise en page

Pour que cette méthode fonctionne, vous devez apporter des mises à jour à votre modèle de mise en page. Accédez à votre modèle de mise en page et cliquez sur le FORME languette. Remplacez le code par le code ci-dessous.

Qu’est ce qui a changé?

Les balises de paragraphe entourant les entrées ont été remplacées par des DIV.

Ajoutez le CSS

Le résultat

Style minimal avec un seul champ
Style minimal avec plusieurs champs
Agencé avec un champ
Stylé avec plusieurs champs

Des questions?

Envoyez-les moi par e-mail, envoyez-moi un tweet @jennamolbyou laissez un commentaire.





Source de l’article traduit automatiquement en Français