8 techniques avancées de formulaire Pardot

8 techniques avancées de formulaire Pardot4 minutes de lecture

Actualisé et republié le 3 septembre 2021

Cet article a été initialement publié le 29 mai 2018 et a été remanié et mis à jour pour plus d’exactitude et d’exhaustivité.

Vous voulez faire quelque chose avec votre formulaire Pardot qui n’est pas disponible dans l’éditeur ? Essayez d’utiliser JavaScript ! Améliorez vos formulaires en utilisant ces 6 techniques avancées de formulaire Pardot. Découvrez comment ajouter du texte entre les champs de formulaire, comment capturer des paramètres d’URL dans des champs masqués, etc.

Ajout de JavaScript à vos formulaires Pardot

JavaScript personnalisé peut être placé dans vos formulaires Pardot sous Aspect et sensation > Formulaire ci-dessous. Cliquez sur le bouton HTML dans l’éditeur WYSIWYG et ajoutez le JavaScript.

1. Ajouter du texte entre les champs du formulaire

Modifiez le champ de formulaire auquel vous souhaitez ajouter le texte avant dans l’éditeur de formulaire. Clique sur le onglet Avancé et ajoutez une classe CSS avec le nom « ajouter-texte-avant ».

Une fois la classe ajoutée au champ du formulaire, vous pouvez ajouter le JS suivant à votre formulaire et mettre à jour le message.

<br> <script type="text/javascript">function insertBefore(el, referenceNode) { referenceNode.parentNode.insertBefore(el, referenceNode); }</script>

var newEl = document.createElement('div'); // replace this line with your message newEl.innerHTML = 'ENTER YOUR TEXT HERE';

var ref = document.querySelector('.add-text-before');

insertBefore(newEl, ref);

="text/javascript">

function insertBefore(el, referenceNode) {

referenceNode.parentNode.insertBefore(el, referenceNode);

}

var newEl = document.createElement('div');

// replace this line with your message

newEl.innerHTML = 'ENTER YOUR TEXT HERE';

var ref = document.querySelector('.add-text-before');

insertBefore(newEl, ref);

2. Rediriger vers une page de remerciement en fonction des valeurs de champ

Cette astuce vient du Documents d’aide de Pardot, mais avec quelques mises à jour. L’article recommande d’utiliser l’encodage JavaScript pour les balises variables à l’aide de {js}. Je n’ai jamais eu de succès en utilisant cette méthode. Au lieu de cela, utiliser ce JavaScript fait l’affaire.

<br> <script type="text/javascript">switch('%%Free_Trial_Live_Demo%%') { case 'Free Trial': document.location='http://www.yoursite.com/thank-you-free-trial/'; break; case 'Live Demo': document.location='http://www.yoursite.com/thank-you-live-demo/'; break; }</script>

="text/javascript">

switch('%%Free_Trial_Live_Demo%%') {

case 'Free Trial':

document.location='http://www.yoursite.com/thank-you-free-trial/';

break;

case 'Live Demo':

document.location='http://www.yoursite.com/thank-you-live-demo/';

break;

}

3. Utilisez un champ masqué pour capturer l’URL de la page

Modifiez le champ de formulaire masqué, cliquez sur le onglet Avancé et ajoutez une classe CSS avec le nom « get-page-url ».

Insérez ce JS dans votre formulaire pour capturer l’url de la page dans le champ masqué.

Noter: Cela ne fonctionnera pas si vous avez un formulaire iFramed sur une page Web.

<br> <script>document.querySelector(".get-page-url input").value = window.location.href;</script>

document.querySelector(".get-page-url input").value = window.location.href;

4. Utilisez un champ masqué pour capturer le nom de la page

Modifiez le champ de formulaire masqué, cliquez sur le onglet Avancé et ajoutez une classe CSS avec le nom « get-page-name ».

Noter: Cela ne fonctionnera pas si vous avez un formulaire iFramed sur une page Web.

Insérez ce JS dans votre formulaire pour capturer l’url de la page dans le champ masqué.

<br> <script>document.querySelector(".get-page-name input").value = document.title;</script>

document.querySelector(".get-page-name input").value = document.title;

5. Transmettez les paramètres d’URL à un formulaire Pardot

Vous pouvez utiliser ce script pour analyser les paramètres d’URL et les placer dans des champs de votre formulaire Pardot. Dans cet exemple, je passe utm_source, utm_medium et utm_campaign dans des champs de formulaire masqués.

En savoir plus sur les paramètres UTM dans Pardot dans cet article

<br> <script>// Parse the URL function getParameterByName(name) { name = name.replace(/[[]/, "\[").replace(/[]]/, "\]"); var regex = new RegExp("[\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results === null ? "" : decodeURIComponent(results[1].replace(/+/g, " ")); } // Give the URL parameters variable names var source = getParameterByName('utm_source'); var medium = getParameterByName('utm_medium'); var campaign = getParameterByName('utm_campaign');</script>

// Put the variable names into the hidden fields in the form. selector should be "p.YOURFIELDNAME input" document.querySelector("p.source input").value = source; document.querySelector("p.medium input").value = medium; document.querySelector("p.campaign input").value = campaign;

dix

// Parse the URL

function getParameterByName(name) {

name = name.replace(/[[]/, "\[").replace(/[]]/, "\]");

var regex = new RegExp("[\?&]" + name + "=([^]*)"),

results = regex.exec(location.search);

return results === null ? "" : decodeURIComponent(results[1].replace(/+/g, " "));

}

// Give the URL parameters variable names

var source = getParameterByName('utm_source');

var medium = getParameterByName('utm_medium');

var campaign = getParameterByName('utm_campaign');

// Put the variable names into the hidden fields in the form. selector should be "p.YOURFIELDNAME input"

document.querySelector("p.source input").value = source;

document.querySelector("p.medium input").value = medium;

document.querySelector("p.campaign input").value = campaign;

6. Transformez vos étiquettes de formulaire en texte d’espace réservé

Il n’y a actuellement aucune fonctionnalité pour les formulaires Pardot qui vous permet d’utiliser du texte d’espace réservé au lieu du texte de l’étiquette. Ainsi, dans ce didacticiel, je vais vous montrer comment ajouter un peu de JavaScript à vos formulaires Pardot pour utiliser les étiquettes de champ comme espaces réservés.

Source de l’article traduit automatiquement en Français