Formulaire placé au mauvais endroit sur la page externe

Lorsque vous intégrez un formulaire HubSpot sur votre page externe, il se peut qu'il apparaisse à un endroit différent de celui souhaité.

Cela peut être dû au fait que le formulaire est affiché de manière dynamique sur la page ou à un problème lié à l'ajout de plusieurs codes d'intégration de formulaire dans la même balise <div> de la page HTML.

Ces problèmes peuvent être résolus en personnalisant le code d'intégration du formulaire. Découvrez-en davantage sur la personnalisation du code d’intégration de formulaire dans la documentation pour les développeurs de HubSpot.

Formulaire unique

Un formulaire peut parfois être rendu de manière dynamique sur une page et se charger à différents endroits. Parfois, sur les navigateurs plus anciens, le formulaire ne s'affiche même pas.

Pour vous assurer que le formulaire se charge correctement sur une partie spécifique de la page, vous pouvez ajouter un attribut target au code d’intégration du formulaire pour spécifier le conteneur spécifique dans lequel vous souhaitez que le formulaire s’affiche.

Par exemple, vous pouvez forcer le formulaire à s'afficher dans un conteneur sur la page avec la classe CSS sidebar. Pour ajouter un attribut target au code d'intégration du formulaire : 

1. Dans le code d'intégration du formulaire, ajoutez une virgule (,) après le formId.
2. Ensuite, entrez une nouvelle ligne et saisissez target : '[nom du conteneur]' .

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
region : « na1 »,
portalId : « 1234567 »,
formId : « f0123bdf-4cfa-47cd-8b61-15ce95286047 »,
 target : « .sidebar »
 }) ;
</script>

Formes multiples

Lorsque vous intégrez le même formulaire HubSpot plusieurs fois sur une page externe, les formulaires peuvent apparaître côte à côte ou au mauvais endroit. Cela se produit si les codes d’intégration de formulaire sont ajoutés à la même <div> balise dans le HTML de la page. 

Pour garantir le chargement et l'affichage corrects des formulaires, ajoutez l'attribut formInstanceId et spécifiez une valeur unique pour chaque code d'intégration de formulaire :

1. Dans le code d'intégration du formulaire, ajoutez une virgule (,) après la valeur de l'attribut formId, 
2. Saisissez une nouvelle ligne et formInstanceId : '[number]'.
3. Ajoutez et numérotez chaque formulaire dans l'ordre où il apparaît sur la page. Par exemple, « 1 » pour la première forme, « 2 » pour la seconde, et ainsi de suite.

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
region : « na1 »,
portalId : « 1234567 »,
formId : « f0123bdf-4cfa-47cd-8b61-15ce95286047 »,
formInstanceId : '1'
 }) ) ; 
</script>