• Accueil / Pardot / Comment intégrer un…
, Comment intégrer un formulaire Pardot sur votre site Web de la bonne manière<span class="wtr-time-wrap after-title"><span class="wtr-time-number">3</span> minutes de lecture</span>

Comment intégrer un formulaire Pardot sur votre site Web de la bonne manière3 minutes de lecture


31 octobre 2020 ->

, Comment intégrer un formulaire Pardot sur votre site Web de la bonne manière<span class="wtr-time-wrap after-title"><span class="wtr-time-number">3</span> minutes de lecture</span>

Actualisé et republié le 4 octobre 2020

Ce message a été initialement publié sur 25 février 2016 et a été repensé et mis à jour pour plus d’exactitude et d’exhaustivité.

Offres Pardot 2 méthodes pour intégrer des formulaires sur votre site Web; intégration à l’aide d’un iframe, et gestionnaires de formulaires. Alors que les formulaires iFrame intégrés permettent aux spécialistes du marketing de contrôler la mise à jour et la configuration des formulaires, l’utilisation d’un iFrame n’est pas toujours idéale pour la convivialité du site Web. Dans ce didacticiel, je vais vous montrer comment tirer parti des formulaires Pardot iFrame et leur donner une belle apparence intégrée à votre site Web.

Pourquoi utiliser les formulaires Pardot intégrés?

L’utilisation de formulaires Pardot sur les gestionnaires de formulaires Pardot présente de nombreux avantages, notamment:

  1. Permettre un profilage progressif
  2. Validation des e-mails intégrée
  3. La possibilité d’utiliser l’éditeur glisser-déposer pour modifier les champs de formulaire
  4. Ajoutez / supprimez facilement des champs de formulaire et affichez instantanément les modifications sur votre site Web

Intégrer les formulaires Pardot sur votre site Web

Le problème

Le formulaire Pardot intégré (qui est dans un iFrame) doit avoir une hauteur définie. Cela signifie que lorsque vous intégrez le formulaire, vous devez calculer la hauteur (en pixels) et mettre à jour le code fourni par Pardot.

Exemple

Si vous ajoutez des champs supplémentaires au formulaire, la hauteur du formulaire devra changer. Vous devez également prendre en compte les messages de validation intégrés qui peuvent également modifier la hauteur du formulaire.

La solution

Redimensionner automatiquement l’iFrame en utilisant Javascript. Même si vous n’êtes pas un développeur, il est assez facile à mettre en œuvre car il suffit de copier-coller.

Étape 1: ajoutez du code à votre formulaire Pardot

Accédez à votre formulaire dans Pardot et collez ce code dans le regarder dans la sensation section en cliquant sur l’icône HTML.

, Comment intégrer un formulaire Pardot sur votre site Web de la bonne manière<span class="wtr-time-wrap after-title"><span class="wtr-time-number">3</span> minutes de lecture</span>

Étape 2: Téléchargez le plugin et ajoutez jQuery

Téléchargez ce fichier et liez le javascript sur votre site Web. Ou liez cette version hébergée sur votre site Web comme ceci et ajoutez le plugin jQuery.

Étape 3: Intégrez le formulaire sur votre site Web

Afin d’intégrer le formulaire Pardot sur votre site Web, vous devrez saisir l’URL du formulaire de Pardot. Accédez à la page de présentation du formulaire et copiez le lien à condition de

, Comment intégrer un formulaire Pardot sur votre site Web de la bonne manière<span class="wtr-time-wrap after-title"><span class="wtr-time-number">3</span> minutes de lecture</span>

Ajoutez ce morceau de code à l’endroit où vous souhaitez que le formulaire apparaisse sur la page. Remplacez l’URL par l’URL que vous avez copiée ci-dessus.

Enfin, ajoutez du javascript personnalisé à votre site Web pour lancer le redimensionnement iFrame.

Voici le code du site Web complété: