Comment utiliser des placeholders dans un formulaire Salesforce Pardot ?

C’est quoi Salesforce Pardot ?

Salesforce Pardot est une solution de marketing automation permettant à votre entreprise d’automatiser vos actions marketing au travers de campagne email, de création de landing page,  de récupération d’email via des plateformes tierces telles que gotowebinar, eventbrite ou WordPress au travers de plugin comme contact form 7 ou gravity forms.

C’est quoi un placeholder ?

Un placeholder est une valeur en HTML5 permettant d’afficher une information dans un champ texte au lieu d’utiliser un label.

Les placeholders permettent de simplifier le message du formulaire et de réduire la taille de ce dernier.

Par exemple :

Comment utiliser les placeholders dans un formulaire Pardot ?

Première étape, éditer le html de votre landing page.

Afin d’ajouter le code Javascript correpondant, vous devez éditer votre landing page, pour cela :

• Cliquez sur l’onglet Marketing
• Cliquez sur l’onglet Forms
• Après avoir selectionné votre formulaire, cliquez sur l’onglet « Layout Templates », le code HTML de la page s’affiche.

Ajoutez le code suivant sous la balise form à la toute fin de votre code HTML.

Que fait ce code javascript à votre formulaire Salesforce Pardot?

Ce code Javascript copie le texte présent dans les balises « label » et ajoute ce dernier sous la forme d’un placeholder dans votre champ de formulaire.

[code lang= »js »] <script>
var labels = document.querySelectorAll("label");
var i = labels.length;
while (i–) {
var label = labels.item(i);
var text = label.textContent;
label.parentNode.classList.contains("required") && (text += "*");
label.nextElementSibling.setAttribute("placeholder", text);
}
</script>[/code]

L’élement HTML label est ensuite caché via le code CSS ci dessous.

[code lang= »css »]

<style>
label {display:none !important;}
</style>

[/code]

Pour éditer le code CSS de votre landing page c’est très simple, ce dernier se trouve tout en haut du code html.
Il vous suffit donc d’ajouter ce code CSS entre les balises « script ».

Cet article a été librement traduit et adapté de l’article suivant.