Lorsque vous intégrez un formulaire HubSpot dans une page externe, celui-ci est susceptible de s'afficher à différents endroits. Cela peut être dû à l'affichage dynamique du formulaire sur la page, ou au fait que plusieurs codes intégrés soient ajoutés à la même
Affichage dynamique d'un formulaire sur une page
Un formulaire peut être affiché de manière dynamique sur une page et chargé à différents endroits. Pour garantir le chargement du formulaire à un endroit spécifique de la page, ajoutez un attribut cible au code intégré dans le formulaire pour préciser le conteneur spécifique que vous souhaitez utiliser.
Dans le code intégré au formulaire, ajoutez une virgule (,) après la valeur d'attribut formId, puis ajoutez une nouvelle ligne et saisissez target: '[container name]'. Par exemple, il est possible d'obliger le formulaire à s'afficher dans un conteneur sur la page avec la classe CSS Barre latérale.
Pour en savoir plus sur la personnalisation du code intégré aux formulaires, consultez la documentation des développeurs de HubSpot.
Plusieurs codes intégrés ajoutés à la même balise
Lorsque vous intégrez le même formulaire de HubSpot à plusieurs reprises sur une page externe, les formulaires peuvent s'afficher côte à côte ou au mauvais endroit si les codes d'intégration sont ajoutés à la même balise dans le code HTML de la page.
Pour garantir le chargement et l'affichage adéquats des formulaires, ajoutez l'attribut formInstanceId et spécifiez une valeur unique pour chaque code intégré au formulaire. Dans le code intégré du formulaire, ajoutez une virgule (,) après la valeur de l'attribut formId, puis ajoutez une ligne et saisissez formInstanceId: '[number]'.Il est recommandé de numéroter les formulaires selon leur ordre d'affichage sur la page (p.e. « 1 » pour le premier formulaire, « 2 » pour le deuxième formulaire, etc.).
En plus d'identifier chaque formulaire de façon unique, vous pouvez également ajouter un attribut cible à chaque code intégré au formulaire pour préciser le conteneur spécifique que vous souhaitez utiliser.
Pour en savoir plus sur la personnalisation du code intégré aux formulaires, consultez la documentation des développeurs de HubSpot.