Formulaires HubSpot

Last updated:
APPLICABLE PRODUCTS
  • Marketing Hub
    • Starter or Enterprise
  • Sales Hub
    • Starter, Professional, or Enterprise
  • Service Hub
    • Starter, Professional, or Enterprise
  • CMS Hub
    • Professional or Enterprise

Utilisez des formulaires HubSpot pour capturer les informations des utilisateurs auxquelles vous pouvez accéder via HubSpot. Les données de formulaire capturées peuvent être utilisées dans des éléments tels que le contenu intelligent, les listes, les workflows, la personnalisation du contenu, etc.

Les formulaires font partie intégrante de la suite HubSpot et peuvent être créés dans un compte HubSpot de n'importe quel niveau d'abonnement. Vous pouvez partager des liens vers des formulaires directement avec les utilisateurs, soumettre des données de formulaire via l'API et les intégrer sur les pages de votre site web à l'aide du CMS.

Dans ce guide, découvrez comment intégrer des formulaires dans votre site web avec le CMS. Pour savoir comment créer des formulaires sur HubSpot, consultez la base de connaissances de HubSpot.

Ajouter des formulaires à des pages de site web

Après avoir créé un formulaire HubSpot, vous pouvez l'ajouter à vos modèles et pages. Il existe plusieurs façons d'ajouter un formulaire à un modèle. Celle que vous choisirez dépend de votre cas d'utilisation. Découvrez ci-dessous comment ajouter des formulaires à un modèle à l'aide des méthodes suivantes :

Utiliser le module de formulaire

À l'aide du module de formulaire par défaut, les créateurs de contenu peuvent sélectionner des formulaires et configurer des options de formulaire dans l'éditeur de page. Pour cela, vous pouvez ajouter le module de formulaire à une zone de glisser-déposer dans votre modèle.   

{% dnd_area "dnd_area" class='body-container body-container__landing', label='Main section' %} {% dnd_section vertical_alignment='MIDDLE' %} {% dnd_column width=6, offset=6 %} {% dnd_row %} <!-- Form module tag for use in templates --> {% dnd_module path='@hubspot/form' %} {% end_dnd_module %} {% end_dnd_row %} {% end_dnd_column %} {% end_dnd_section %} {% end_dnd_area %}

Si vous n'utilisez pas de zone de glisser-déposer dans votre modèle codé, vous pouvez générer le module de formulaire avec la syntaxe suivante. En utilisant cette balise, vous pouvez également spécifier des détails de formulaire, tels que la définition d'un formulaire spécifique ou de ses options de redirection. Vous pouvez en savoir plus sur l'utilisation de la balise HubL de formulaire dans la section ci-dessous.

{% module "form" path="@hubspot/form" %}

Utilisation d'un module personnalisé

Dans certains cas, vous pouvez créer un module personnalisé qui incorpore un formulaire avec d'autres contenus tels que des images ou des blocs de texte. Pour ce faire, vous pouvez utiliser le champ de formulaire ou cloner le module de formulaire existant et créer votre nouveau module comme point de départ. 

Le champ de formulaire est une version simplifiée du module de formulaire qui propose des fonctionnalités de formulaire de base, comme :

Options Description
Menu déroulant de sélection de formulaire Un menu déroulant qui permet aux créateurs de contenu de sélectionner un formulaire existant. 
Redirection vers la soumission de formulaire Une option permettant de choisir si la personne à l'origine de la soumission sera redirigée vers ou verra message de remerciement en ligne lors de la soumission du formulaire.
Lien de redirection Si vous choisissez de rediriger la personne à l'origine de la soumission, vous pouvez saisir l'URL de la page vers laquelle il sera redirigé.
Message de remerciement Si vous choisissez d'afficher un message de remerciement en ligne, vous pouvez saisir votre message ici.

Vous pouvez ajouter le champ de formulaire à un module dans le gestionnaire de conception en le sélectionnant via Ajouter un champ > Sélecteurs > Formulaire.

Ajouter le champ de formulaire à votre module

À partir de là, vous pouvez copier le bloc de texte du champ de formulaire à ajouter à votre module personnalisé en choisissant Actions > Copier le bloc de texte lorsque vous survolez le champ dans l'éditeur.

Copier le bloc de texte de formulaire pour votre champ

Si vous choisissez de cloner le module de formulaire par défaut, vous obtiendrez tout à partir du champ de formulaire ci-dessus, y compris ce qui suit :

Options Description
Titre Ajoutez un élément qui s'affichera au-dessus du formulaire lorsqu'il sera restitué.
Remplacement de notification par e-mail Un bouton qui vous permet de remplacer l'adresse e-mail par défaut pour les notifications de formulaire. Si cette option est activée, vous verrez un champ de texte pour ajouter les nouvelles adresses e-mail.
Ajouter au workflow Un bouton qui vous permettra d'inscrire des soumissions dans le workflow souhaité. Si cette option est activée, un menu déroulant s'affichera afin de choisir un workflow.
E-mail de suivi Une bascule qui vous permettra d'envoyer un e-mail de suivi une fois le formulaire soumis. Si cette option est activée, un menu déroulant s'affichera pour vous permettre de choisir un e-mail de suivi. Si vous n'en avez pas, vous aurez la possibilité d'en créer un nouveau.
Campagne Salesforce Spécifie la campagne Salesforce dans laquelle inscrire les contacts qui soumettent le formulaire. Disponible uniquement si l'intégration Salesforce est installée.
Lien GoToWebinar Spécifie le webinaire GoToWebinar auquel inscrire les contacts qui soumettent le formulaire. Disponible uniquement si l'intégration GoToWebinar est installée.

Vous pouvez également créer votre formulaire avec des options supplémentaires qui peuvent être utilisées parallèlement au module de formulaire par défaut. Vous trouverez ci-dessous un exemple de module par défaut cloné encadré dans une balise <section> avec un champ de couleur supplémentaire pour ajouter une couleur d'arrière-plan à la section.

Ajout dans le module de formulaire cloné

Utilisation de la balise HubL de formulaire

Le champ de formulaire de module génère une balise HubL de formulaire lorsque vous copiez un bloc de texte, comme mentionné ci-dessus. La balise HubL contient de nombreux paramètres que vous pouvez fournir. Il est plus facile d'utiliser Copier le bloc de texte lorsque vous travaillez à partir du gestionnaire de conception. Si vous travaillez localement, reportez-vous à la documentation sur les balises HubL, qui détaille tous les paramètres disponibles.

{% module "form" path="@hubspot/form" form={ "form_id": "9e633e9f-0634-498e-917c-f01e355e83c6", "response_type": "redirect", "message": "Thanks for submitting the form.", "redirect_id": null, "redirect_url": "http://www.google.com" } %}

Utilisation du code d'intégration de formulaire

Vous pouvez utiliser un code d'intégration JavaScript pour ajouter un formulaire à une page où un module ou une balise HubL ne constitue pas une solution idéale, par exemple sur des pages externes. En utilisant cette méthode, vous pouvez également étendre la fonctionnalité du formulaire grâce à des options avancées. Vous trouverez ci-dessous un exemple du code d'intégration du formulaire avec des fonctionnalités étendues. 

<!--[if lte IE 8]> <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script> <![endif]--> <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> <script> hbspt.forms.create({ portalId: "[YourPortalIdHere]", formId: "00000000-0000-0000-0000-000000000000", cssClass: "class-applied-to-form", submitButtonClass: "class-applied-to-submit-button", onFormSubmit: function($form) { // YOUR SCRIPT HERE } }); </script>

Style de formulaire

Bien que HubSpot propose un style de formulaire à partir d'un paramètre global et un niveau de paramètre spécifique au formulaire, vous pouvez également créer un style de formulaire en fonction de son ajout à vos pages CMS.

Remarque : Tous les formulaires générés sur le CMS Hub (sauf via le code d'intégration de formulaire) ignoreront les styles configurés via les paramètres de formulaire globaux ou les paramètres spécifiques à chaque formulaire. 

Styliser des formulaires via le module de formulaire par défaut ou la balise HubL

Les formulaires HubSpot ajoutés aux pages HubSpot peuvent être stylisés à l'aide de la CSS de votre site web. HubSpot comprend un certain nombre de classes et d'attributs différents sur les formulaires générés où vous pouvez appliquer un style. Pour commencer, veuillez consulter la CSS de formulaire du boilerplate HubSpot, qui présente les bonnes pratiques pour styliser les formulaires.

Styliser des formulaires via un module personnalisé

Les formulaires à l'intérieur de modules personnalisés peuvent être stylisés via une CSS dans le volet CSS du module dans le gestionnaire de conception. En étendant la CSS au module, le style accompagnera le module chaque fois qu'il sera ajouté à une page. Il est recommandé d'ajouter un wrapper au formulaire, puis d'utiliser ce wrapper en tant que sélecteur de niveau principal pour la CSS. Cela empêchera le style de formulaire de votre module personnalisé d'être remplacé par des styles supplémentaires dans la feuille de style principale de vos sites web. Voici une capture d'écran du module personnalisé avec un style de formulaire ajouté au volet CSS.

Module personnalisé avec CSS

Styliser des formulaires ajoutés via le code d'intégration de formulaire

Lorsque vous utilisez le code d'intégration de formulaire, vous pouvez styliser le formulaire en utilisant les paramètres de style de formulaire globaux ou en utilisant la CSS de votre site web.

L'utilisation des paramètres de style de formulaire globaux vous permet de configurer les paramètres par défaut pour chaque formulaire du compte. Vous pouvez également remplacer ces styles pour un formulaire dans l'éditeur de formulaire.

Styles de formulaire globaux

Lorsque vous choisissez de styliser le formulaire à l'aide de la CSS de votre site web, vous devez d'abord activer l'option Définir comme formulaire HTML brut dans l'éditeur de formulaire. Cela permet au formulaire d'être restitué sur la page en HTML au lieu d'un iFrame, ce qui facilite le style. Découvrez-en davantage sur le style des formulaires intégrés dans la base de connaissances.

Paramètre Définir comme formulaire HTML brut


Cet article vous a-t-il été utile ?
Ce formulaire est destiné à recueillir les avis sur la documentation pour les développeurs. Si vous souhaitez faire part de votre avis sur les produits HubSpot, veuillez le partager sur le forum des idéesde la communauté.