Formulaires HubSpot

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 :

Utilisation du module de formulaire par défaut
Ajout d’un champ de formulaire à un module personnalisé
Intégration à l’aide du code d’intégration de formulaire

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.

Cloner le 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.

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:{{ module.color_field.color }}">

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.

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

Collez le bloc de texte dans le champ HTML du module.

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 :

Paramètre	Type	Description
`disable_inline_form_editing`	Chaîne	Permet de définir la propriété `disable_inline_form_editing` sur la valeur `true` pour masquer tous les contrôles de modification de formulaire intraligne 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	Un tableau qui indique les formulaires pouvant être sélectionnés en fonction des types de propriétés des champs de formulaire. Les valeurs sont : `"CONTACT"`, `"COMPANY"` 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."
  }
}

Utiliser le code d’intégration de formulaire

Lorsqu’un module ou une balise HubL n’est pas la solution idéale, ou si vous souhaitez ajouter un formulaire à une page externe, vous pouvez l’intégrer à la place en utilisant le code d’intégration de formulaire. Vous pouvez également personnaliser le code d’intégration du formulaire pour étendre les fonctionnalités du formulaire. Affichez toutes les options de personnalisation du code d’intégration de formulaire et plus encore dans le guide de référence des formulaires.

Remarque :

Les options de personnalisation de formulaire sont uniquement disponibles pour les formulaires créés dans HubSpot qui ont été définis comme HTML brut. Le compte HubSpot doit disposer d’un abonnement Marketing Hub ou Content Hub Pro ou Entreprise.
Les formulaires HubSpot ne doivent être chargés qu’à l’aide du fichier JavaScript hébergé par HubSpot. Faire une copie du code d’intégration du formulaire et l’héberger soi-même n’est pas pris en charge. Les améliorations apportées par HubSpot pour améliorer la sécurité, l’antispam, l’accessibilité et les performances ne se répercuteront pas sur votre formulaire si vous décidez d’héberger vous-même le code intégré de formulaire HubSpot.

Vous trouverez ci-dessous un exemple de code d’intégration de formulaire sans aucune personnalisation.

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "123456",
    formId: "df93f0c1-2919-44ef-9446-6a29f9a7f",
  });
</script>

Paramètre	Type	Description
`portalId`	Nombre ou chaîne	L’ID du compte HubSpot dans lequel le formulaire a été créé. Il est utilisé pour récupérer la définition du formulaire.
`formId`	Chaîne	L’ID du formulaire, qui est utilisé pour récupérer la définition du formulaire.
`region`	String	La région du compte dans laquelle le formulaire a été créé. Il est utilisé pour récupérer la définition du formulaire. Les valeurs possibles sont : `na1` ou `eu1`.

Ajouter une internationalisation

Par défaut, HubSpot fournit un nombre de messages de validation dans de nombreuses langues différentes, auxquels vous pouvez accéder à l’aide du paramètre locale. Vous pouvez également ajouter des langues personnalisées ou remplacer les messages d’erreur et les mois/jours du sélecteur de date affichés sur le formulaire à l’aide du paramètre translation. Découvrez-en davantage sur l’internationalisation et les messages d’erreur de validation de formulaire dans la documentation de référence sur les formulaires.

hbspt.forms.create({
  portalId: "",
  formId: "",
  locale: "en",
  translations: {
    en: {
      fieldLabels: {
        email: "Electronic mail",
      },
      required: "Hey! That's required!",
      submitText: "Custom Submit Button Text",
      submissionErrors: {
        MISSING_REQUIRED_FIELDS: "Please fill in all required fields!",
      },
    },
  },
});

Événements de formulaires

Les formulaires offrent deux façons de lier des fonctionnalités à des événement : les rappels dans le code intégré de formulaire HubSpot et les événements de formulaire global. Pour en savoir plus sur les rappels de code d’intégration de formulaire disponibles et les événements de formulaire globaux, consultez la documentation de référence sur les formulaires.

// Example form embed code callback
hbspt.forms.create({
  portalId: "",
  formId: "",
  onBeforeFormSubmit: function ($form) {
    // YOUR SCRIPT HERE
  },
});

// Example listener
window.addEventListener("message", event => {
  if (event.data.type === "hsFormCallback" && event.data.eventName === "onFormSubmitted") {
    someAnalyticsLib("formSubmitted");
    console.log("Form Submitted! Event data: ${event.data}");
  }
});

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

Définir un style personnalisé pour les formulaires intégrés

Si vous disposez d’un abonnement Marketing Hub ou CMS Hub Pro ou Entreprise, vous pouvez utiliser les définitions de variables CSS pour définir des styles globaux, personnaliser des boutons et d’autres entrées, ainsi que styliser vos formulaires à plusieurs étapes et vos barres de progression. Découvrez-en davantage sur l’application de définitions CSS personnalisées à votre formulaire intégré.

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.

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.

Introduction

Composants

Fonctionnalités

Le module de formulaire par défaut

Cloner le module par défaut

Champs de formulaire dans les modules personnalisés

Limiter les options de formulaire dans l’éditeur

Utiliser le code d’intégration de formulaire

Remarque :

Ajouter une internationalisation

Événements de formulaires

Style de formulaire

Remarque :

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

Styliser des formulaires via un module personnalisé

Définir un style personnalisé pour les formulaires intégrés

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

​Le module de formulaire par défaut

​Cloner le module par défaut

​Champs de formulaire dans les modules personnalisés

​Limiter les options de formulaire dans l’éditeur

​Utiliser le code d’intégration de formulaire

​Remarque :

​Ajouter une internationalisation

​Événements de formulaires

​Style de formulaire

​Remarque :

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

​Styliser des formulaires via un module personnalisé

​Définir un style personnalisé pour les formulaires intégrés

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

Le module de formulaire par défaut

Cloner le module par défaut

Champs de formulaire dans les modules personnalisés

Limiter les options de formulaire dans l’éditeur

Utiliser le code d’intégration de formulaire

Remarque :

Ajouter une internationalisation

Événements de formulaires

Style de formulaire

Remarque :

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

Styliser des formulaires via un module personnalisé

Définir un style personnalisé pour les formulaires intégrés

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