Formulaires HubSpot

Last updated:

Utilisez des formulaires HubSpot pour capturer les informations des visiteurs du site, auxquelles vous pouvez accéder via HubSpot. 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.

Les formulaires font partie intégrante de HubSpot et peuvent être créés dans un compte HubSpot de n'importe quel niveau d'abonnement. Non seulement les formulaires sont importants pour la conversion des clients, mais aussi parce que les données des formulaires peuvent être utilisées dans d'autres outils et ressources HubSpot, tels que le contenu intelligent, les listes, les workflows, la personnalisation du contenu, etc.

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, en fonction de votre cas d'utilisation :

Le module de formulaire par défaut

Si votre modèle comporte des zones de glisser-déposer, les créateurs de contenu peuvent ajouter le module de formulaire par défaut à une page à partir de l'éditeur de page, puis configurer les options de formulaire dans la barre latérale gauche.

Pour coder un module de formulaire directement dans un modèle avec des zones de glisser-déposer, mentionnez-le en tant que dnd_module. 

{% 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 %}

Pour ajouter un module de formulaire à un modèle en dehors d'une zone de glisser-déposer, mentionnez-le plutôt comme un module standard. 

{% 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" } %}

Avec l'une ou l'autre implémentation, vous pouvez ajouter des paramètres au libellé de module pour spécifier des paramètres tels que le formulaire à utiliser et les options de redirection, comme indiqué dans l'exemple de code ci-dessus. Voir la documentation des modules par défaut pour plus d'informations sur les paramètres disponibles.

Clonage du module par défaut

En plus d'utiliser le module par défaut tel quel, vous pouvez le cloner pour le rendre modifiable, ce qui vous permet de le personnaliser au besoin. Par exemple, vous pouvez cloner le module de formulaire par défaut, ajouter un champ de couleur, puis envelopper le code HTML du module dans un libellé <section> avec un style pour ajouter la couleur en arrière-plan :

  • Dans le gestionnaire de conception de la barre latérale gauche, accédez au dossier @hubspot, puis cliquez avec le bouton droit sur form.module et sélectionnez Cloner le module.
clone-form-module
  • Dans la barre latérale droite, cliquez sur Ajouter un champ, puis sélectionnez Couleur.
  • Ajoutez un libellé <section> autour du contenu HTML, puis ajoutez un style pour référencer le champ de couleur, tel que :

<section style="background:">

default-form-module-clone-section

Champs de formulaire dans les modules personnalisés

Lors de la création d'un module personnalisé, vous pouvez y inclure un formulaire en ajoutant un champ de formulaire, ainsi que le bloc de code du champ au module HTML. Par exemple, vous pouvez ajouter un formulaire de demande de consultation à un module qui contient une image d'un produit et une proposition de valeur descriptive.

Pour ajouter un champ de formulaire à un module personnalisé à partir du gestionnaire de conception :

  • Dans la barre latérale droite de l'éditeur de module, cliquez sur Ajouter un champ, puis sélectionnez Formulaire.
design-manager-select-form-field
  • Après avoir ajouté le champ, passez la souris sur le champ dans la barre latérale droite, puis cliquez sur Actions et sélectionnez Copier le bloc de code.
module-field-copy-snippet
  • Collez le bloc de code dans le champ HTML du module.

module-field-paste-snippet

Limiter les options de formulaire dans l'éditeur

Une fois ajouté à une page, les créateurs de contenu ont généralement le contrôle sur de nombreux aspects du formulaire, y compris le formulaire à utiliser et les champs de formulaire eux-mêmes. Cependant, vous pouvez limiter la quantité de contrôle donnée dans l'éditeur de page en modifiant localement le fichier fields.json du module de formulaire pour inclure les champs suivants :

Use this table to describe parameters / fields
ParameterTypeDescription
disable_inline_form_editing
Chaîne

Définissez la propriété disable_inline_form_editing sur vraipour masquer tous les contrôles de modification de formulaire en ligne dans le module de formulaire. Cela inclut les champs du formulaire, le texte du bouton d'envoi, les options de confidentialité et de consentement des données et le CAPTCHA.

required_property_types
Tableau

Tableau qui spécifie les formulaires pouvant être sélectionnés en fonction des types de propriétés des champs de formulaire. Les valeurs comprennent : « CONTACT », « ENTREPRISE » et « TICKET ».

Par exemple, si vous avez créé un module qui ne doit être utilisé que pour les formulaires permettant aux visiteurs de contacter les différents services de votre entreprise, vous pouvez autoriser les créateurs de contenu à ne sélectionner que les formulaires qui utilisent les propriétés des tickets.

// Form field { "id" : "843b4f0f-0ed7-5b10-e86a-5cc8a0f11a0c", "name" : "form_field_1", "display_width" : null, "label" : "Form", "required" : false, "locked" : false, "type" : "form", "disable_inline_form_editing": true, "required_property_types": ["TICKET"], "default" : { "response_type" : "inline", "message" : "Thanks for submitting the form." } }

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

Si vous disposez d'un abonnement Marketing Hub ou CMS Hub Pro ou Entreprise, vous pouvez sélectionner l'option Définir comme formulaire HTML brut lors de la création d'un formulaire. Ce paramètre restitue le formulaire en HTML au lieu d'un iFrame, ce qui facilite le style du formulaire incorporé avec la CSS. 

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é.