Comment intégrer un formulaire Pardot sur votre site Web de la bonne manière3 minutes de lecture
31 octobre 2020 ->
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:
- Permettre un profilage progressif
- Validation des e-mails intégrée
- La possibilité d’utiliser l’éditeur glisser-déposer pour modifier les champs de formulaire
- 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.
="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.contentWindow.min.js" defer> |
É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.
="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js"> |
É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
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.
="text/javascript"> iFrameResize({log:true}); |
Voici le code du site Web complété:
1 2 3 4 5 6 7 8 9 dix 11 12 13 14 15 16 17 18 19 20 21 22 |
="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js"> ="text/javascript"> iFrameResize({log:true});
|
C’est tout!
Votre formulaire Pardot intégré doit maintenant s’ajuster en fonction du contenu. Avoir des questions? Envoyez-moi un courriel, envoyez-moi un tweet @jennamolby, ou laissez un commentaire
