Créer et modifier des formulaires à l’aide de l’éditeur de formulaires

Créez des formulaires en plusieurs étapes pour encourager les utilisateurs à remplir plusieurs segments de formulaire au lieu d'un seul formulaire long. Pour ajouter une étape de formulaire dans un formulaire à plusieurs étapes :

• Dans votre compte HubSpot, accédez àFormulaires marketing>.  
• Créez un nouveau formulaire ou survolez un formulaire existant et cliquez sur Edit. 
• Dans le panneau de droite, passez la souris entre deux étapes existantes et cliquez sur l'icône + ajouter. Une nouvelle section d'étape apparaît. Ensuite, vous pouvez configurer des champs de formulaire et des éléments de formulaire supplémentaires dans le panneau d’étape.
   

• Pour réorganiser l'ordre d'une étape, survolez-la. Ensuite, en haut à gauche de la marche, cliquez et faites glisser Step [x] pour la repositionner. 
• Pour cloner une étape, passez le curseur de la souris sur l’étape et cliquez sur l’icône Cloner duplicate . Vous ne pouvez pas cloner des étapes qui incluent un e-mail, un reCAPTCHA ou des champs de confidentialité des données.
• Pour supprimer une étape, survolez-la et cliquez sur l'icône de suppression delete .  
• Une barre de progression indique visuellement la quantité de formulaire qu’un utilisateur a complétée, ce qui améliore le taux d’achèvement du formulaire. Pour modifier la barre de progression : 
  • Survolez la barre de progression et cliquez sur l'icône edit crayon. 

• • Dans le panneau de gauche, vous pouvez modifier la barre de progression et l'activer ou la désactiver : 

• • • La barre de progression est ajoutée par défaut à tous les formulaires. Pour désactiver la barre de progression, désactivez l'interrupteur Barre de progression. Cela supprimera la barre de progression de toutes les étapes du formulaire.
    • Dans la section Format, choisissez la façon dont vous voulez que le texte apparaisse sur la barre de progression. Vous pouvez choisir parmi les options suivantes : Afficher le pourcentage d'achèvement, Afficher le nombre d'étapes, ou Afficher aucun texte. 

Modifier la disposition des étapes et la bannière d'arrière-plan 

Choisissez parmi des dispositions d'étapes prédéfinies à l'aide du sélecteur rapide de dispositions et personnalisez la bannière d'arrière-plan de votre formulaire. 

• Dans votre compte HubSpot, accédez à Marketing > Formulaires.
• Créez un nouveau formulaire ou survolez un formulaire existant et cliquez sur Edit. 
• Survolez l'étape du formulaire et cliquez sur l'icône du crayon edit en haut à droite. 
• Dans le panneau de gauche, cliquez sur l’onglet Style et sélectionnez une mise en page par étape. 
• Pour supprimer la mise en page, cliquez sur Supprimer la mise en page en haut à droite. 

• Cliquez sur Banner background pour développer la section :
  
  • Activez l’option Couleur d’arrière-plan pour personnaliser la bannière d’arrière-plan de votre formulaire.

• • Sélectionnez une couleur et une opacité .
  • Cliquez sur le menu déroulant Gradient pour ajouter un dégradé.
  • Utilisez une image pour l'arrière-plan de la bannière. Vous pouvez charger une image à partir de vos fichiers HubSpot, parcourir les images du disque dur de votre ordinateur ou utiliser des assistants IA pour générer des images. 

Style du formulaire

Personnalisez le texte, les champs de saisie, le bouton et l'arrière-plan de votre formulaire et de ses étapes. Les options de style configurées dans l'onglet Global Styling seront appliquées à toutes les étapes du formulaire. Il n'est pas possible de styliser séparément les différentes étapes du formulaire. 

Pour styliser votre formulaire : 

• Dans votre compte HubSpot, accédez à Marketing > Formulaires.
• Créez un nouveau formulaire ou survolez un formulaire existant et cliquez sur Edit. 
• Sur le côté gauche, cliquez sur l’icône Style.

• Lorsque vous personnalisez votre Texte, Champs de saisie, ou Bouton, vous pouvez choisir parmi les styles existants à l'aide de Quick field input styles. Vous pouvez également personnaliser manuellement le style de chaque composant de votre formulaire :
  • Champs : personnalisez le champ, y compris l’arrière-plan et les bordures. Vous pouvez également personnaliser la police, la taille de la police et les couleurs de vos libellés, ainsi que les couleurs de votre texte d'aide, de vos espaces réservés et de votre texte d'erreur. 
  • Boutons : personnalisez la hauteur du bouton, son angle arrondi, son arrière-plan et son dégradé, et ajoutez une ombre portée au bouton. Vous pouvez également personnaliser la police, la taille de la police et la couleur du texte du bouton. 
  • Paragraphe (texte enrichi) : personnalisez le style, la taille et la couleur du corps du texte. 
  • En-tête : personnalisez la police et la couleur du texte de votre en-tête. Vous pouvez choisir d’ajouter une ombre portée à votre texte d’en-tête. 
  • Arrière-plan : personnaliser l'arrière-plan de votre formulaire et de ses étapes. Vous pouvez choisir de définir une couleur d'arrière-plan ou d'utiliser une image pour l'arrière-plan. Vous pouvez utiliser l'assistant IA pour générer des images. Vous pouvez également choisir de définir une bordure pour votre formulaire.
  • Barre de progression : personnalisez la barre de progression de votre formulaire, y compris la couleur de la ligne de progression et la police de la barre de progression. 

Personnaliser les paramètres du formulaire

Configurer les paramètres du formulaire, y compris ce qu'il advient du contact correspondant après l'envoi du formulaire, les paramètres de notification de l'utilisateur et la langue par défaut du formulaire. Vous pouvez définir le statut marketing du contact, l'étape du cycle de vie, et plus encore. Certaines options peuvent ne pas être affichées en fonction de votre abonnement à HubSpot. 

• Dans votre compte HubSpot, accédez à Marketing > Formulaires.
• Créez un nouveau formulaire ou survolez un formulaire existant et cliquez sur Edit. 
• Dans le panneau de gauche, cliquez sur l'icône settings settings.
• Dans l'onglet General, configurez les paramètres généraux suivants du formulaire :
  
  • Créer automatiquement de nouveaux contacts à partir d’adresses e-mail inconnues : sélectionnez cette option pour créer une nouvelle fiche d’informations d’un contact pour chaque soumission avec une adresse e-mail unique. Si l'adresse e-mail soumise correspond à une fiche d'informations de contact existante dans votre base de données, les détails de la fiche d'informations existante seront mis à jour.
    • Si cette option est désactivée, HubSpot tentera d'abord d'associer la soumission à un contact existant avec l'adresse e-mail soumise. Si aucun contact n'existe à cette adresse e-mail, HubSpot reconnaîtra et mettra à jour vos contacts en fonction des cookies présents dans leurs navigateurs. Cela peut entraîner l'écrasement des contacts si le même formulaire est soumis plusieurs fois depuis le même appareil.
    • Si cette option est activée, lorsqu'un contact soumet le formulaire via une adresse e-mail différente sur un navigateur où il existe déjà un cookie, les vues de ce contact ne seront pas suivies. L'option Pré-remplir les champs de contact avec des valeurs connues sera également désactivée automatiquement.
  • Définir les nouveaux contacts comme contacts marketing : si votre compte HubSpot a accès aux contacts marketing, vous pouvez automatiquement définir tous les contacts ayant soumis ce formulaire comme contacts marketing. Cela inclut des contacts nouveaux et existants.
  • Pré-remplir les champs pour les visiteurs qui reviennent: si un contact a déjà visité votre site et soumis un formulaire, et que HubSpot a pu stocker et suivre ses cookies, toutes les valeurs de champ connues peuvent être pré-remplies sur le formulaire. Cette option est activée par défaut. Découvrez-en davantage sur les champs de formulaire pré-remplis.
    
  • Raccourcissement de formulaire : si vous avez acheté des crédits Breeze Intelligence, vous pouvez rationaliser vos formulaires en masquant automatiquement tous les champs de formulaire pouvant être remplis par l’enrichissement des données. En savoir plus sur les formulaires raccourcis .
  • Ajouter à une campagne marketing: si vous avez un abonnement "Marketing Hub" Professional ou Enterprise, vous pouvez associer le formulaire à une campagne :
    • Pour associer votre formulaire à une campagne existante, cliquez sur le menu déroulant Campaign et sélectionnez une campagne .
    • Pour associer votre formulaire à une nouvelle campagne, cliquez sur le menu déroulant Campagne et cliquez sur Créer une campagne. Ensuite, continuez à configurer votre campagne. 

• • Lors de la soumission, mettre à jour le contact et entreprise cycle de vie phase : cliquez sur le menu déroulant Définir cycle de vie phase sur et sélectionnez une phase cycle de vie. Worsque les visiteurs soumettent le formulaire, tous les enregistrements, nouveaux ou existants, sont placés à l'étape du cycle de vie sélectionnée. 
    • Vous ne pouvez pas rétrograder la phase du cycle de vie d’une fiche d’informations. Si un contact ou une entreprise existante dont la phase du cycle de vie est ultérieure soumet un formulaire, la phase du cycle de vie ne sera pas mise à jour. 
    • L'étape du cycle de vie définie dans un formulaire remplacera l'étape du cycle de vie par défaut configurée dans vos paramètres HubSpot.

• Pour personnaliser les paramètres de soumission, dans le panneau de gauche, cliquez sur l'onglet Paramètres de soumission . Personnalisez les paramètres de soumission de formulaire suivants : 
  • Envoyer au propriétaire du contact : envoyer automatiquement une notification au propriétaire du contact. Si un contact n'a pas de propriétaire, aucune notification ne sera envoyée. Découvrez-en davantage sur la propriété d’objet dans HubSpot.
  • Envoyer à d’autres utilisateurs : sélectionnez les équipes ou les individus à qui envoyer les notifications de soumission par e-mail, quel que soit le propriétaire du contact. Les destinataires indiqués ici seront remplacés par les destinataires indiqués dans les options de formulaire sur les pages de destination HubSpot.

  • Domaines d’e-mail supplémentaires à bloquer : saisissez des domaines d’e-mail spécifiques à bloquer lors de la soumission de formulaire. Par exemple, si vous souhaitez bloquer les soumissions de e-mail@domain.com, vous pouvez ajouter domain.com. Pour bloquer les soumissions de tous les fournisseurs de e-mail gratuits, cliquez sur le bouton Bloquer les fournisseurs de e-mail gratuits . 

• Pour personnaliser les paramètres de langue de votre formulaire, cliquez sur l’onglet Région linguistique & . Cliquez sur le menu déroulant Primary language, puis sélectionnez une langue par défaut pour votre formulaire. Les messages d'erreur, les libellés des propriétés par défaut, le texte d'aide, le texte des espaces réservés et les valeurs par défaut seront traduits dans cette langue.
• Pour créer une traduction AI de votre formulaire ("Marketing Hub" ou "Content Hub" Professional et Enterprise uniquement) :
  • Activez le commutateur Traductions AI activées pour tous les contenus de formulaire AI.
  • Dans le menu déroulant Primary language , sélectionnez la langue dans laquelle vous souhaitez traduire le formulaire. Les messages d'erreur, les libellés des propriétés par défaut, le texte d'aide, le texte des espaces réservés, les valeurs par défaut, les libellés personnalisés, le texte enrichi et le texte de consentement seront traduits automatiquement dans cette langue.
  • Si vous avez mis à jour votre formulaire depuis la précédente traduction, cliquez sur Retranslate now pour mettre à jour la traduction.

Gérer la validation en direct des champs de formulaire

Si vous avez défini des règles de validation pour une propriété, ces règles s'appliqueront aux champs du formulaire, et les visiteurs devront satisfaire à ces exigences pour soumettre le formulaire. La validation en direct des champs de formulaire donne aux visiteurs un retour d'information immédiat sur leurs entrées, ce qui facilite la correction des erreurs et permet de remplir les formulaires avec précision.

Par exemple, si vous avez défini une règle de validation pour la propriété Order Number afin qu'elle ne contienne que des valeurs numériques, les visiteurs recevront un retour d'information leur permettant de corriger toute entrée non numérique.

Par défaut, la validation en direct des formulaires est activée. Pour gérer la validation en direct sur les champs de formulaire :

• Dans votre compte HubSpot, cliquez sur l'icône Paramètres settings dans la barre de navigation principale.

• Dans le menu latéral de gauche, naviguez vers Marketing+ > Formulaires.

• Cliquez sur l'onglet Submission Settings. 
• Activez ou désactivez l’option Activer la validation en direct des champs de formulaire .
• En bas à gauche, cliquez sur Save. 

Utilisez votre formulaire

Après avoir créé un nouveau formulaire ou effectué les mises à jour de celui-ci, vous devrez mettre à jour votre formulaire pour que les modifications soient visibles. Ensuite, ajoutez-la à votre contenu HubSpot, utilisez le code d'intégration du formulaire pour l'ajouter à une page externe, ou partagez-la en tant que page autonome avec un lien de partage .  

• Dans votre compte HubSpot, accédez à Formulaires marketing >. 
• Créez un nouveau formulaire ou survolez un formulaire existant et cliquez sur Edit. 
• Dans l’angle supérieur droit, cliquez sur Vérifier et mettre à jour pour publier vos mises à jour de formulaire.
• Pour partager votre formulaire, l’intégrer à une page HubSpot ou un site externe, dans l’angle supérieur droit, cliquez sur Partager, puis faites votre choix parmi les options suivantes :
  • Intégrer avec HubSpot : intégrez votre formulaire sur une page de site web CMS Hub, une page de destination ou avec des CTA HubSpot. 
  • Obtenir le code d'intégration : utiliser un code d'intégration pour ajouter votre formulaire sur une page hébergée à l'extérieur. Pour suivre l'analyse de votre formulaire sur une page externe, votre code de suivi HubSpot doit être installé sur la page. En savoir plus sur ajouter un formulaire HubSpot à un site externe. 
    • En bas de la page, cliquez sur Copier.
    • Collez le code d'intégration dans le module HTML de votre page.
  • Copier un lien de partage : utiliser une URL pour partager le formulaire en tant que page indépendante.