Créer et modifier des formulaires à l'aide du nouvel éditeur de formulaires (BETA)

• Pour ajouter une propriété connectée, dans le panneau de gauche, cliquez sur pour développer la section Propriété connectée. Cliquez sur la propriété que vous souhaitez connecter au champ de formulaire. 
• Pour utiliser une propriété existante comme propriété connectée à un champ de votre formulaire, utilisez la barre de recherche pour rechercher une propriété existante. Le type d'objet du champ ajouté peut déterminer si la soumission du formulaire apparaît sur la chronologie de l'activité des enregistrements associés.

• Pour créer une nouvelle propriété et l'utiliser comme propriété connectée à un champ de votre formulaire, cliquez sur Créer un nouveau.
  • Sélectionnez le type de champ de formulaire. 
  • Dans le panneau de droite, configurez votre champ de formulaire .
  • Passez en revue vos règles de propriété, puis cliquez sur Créer. Par défaut, l'option Show in forms, pop-up forms, and bots est sélectionnée. Après avoir créé votre nouvelle propriété, celle-ci sera automatiquement associée au champ du formulaire. Apprenez à gérer vos propriétés.

• Après avoir ajouté votre champ de formulaire, pour modifier les options d'un champ :
  • Dans le panneau de droite, cliquez sur le champ dans l'aperçu du formulaire. 
  • Dans le panneau de gauche, cliquez sur pour développer la section Field options. Les options ici peuvent varier en fonction du type de propriété du champ, en savoir plus sur les options supplémentaires de personnalisation des champs disponibles.
    
    • Texte d'aide : texte affiché sous le libellé pour aider le visiteur à remplir le champ.
    • Texte d'espace réservé : texte affiché dans la zone de saisie du champ. Ce texte disparaît lorsque le visiteur saisit une valeur dans le champ et ne sera pas soumis même si le visiteur ne saisit aucune valeur.
    • Valeur par défaut : valeur qui sera soumise si elle n'est pas modifiée par le visiteur.
    • Champ caché: lorsque cette option est activée, la valeur du champ est définie lors de la soumission du formulaire, mais le champ n'apparaît pas au visiteur. Une fois le paramètre activé, définissez la valeur par défaut qui passera dans la propriété lorsque le formulaire sera soumis.
    • Champ obligatoire : lorsque cette option est activée, le champ doit être rempli pour soumettre le formulaire. Si un champ de formulaire a été défini comme obligatoire, il ne peut pas être masqué. 

Ajouter des éléments de formulaire supplémentaires

Ajoutez à votre formulaire des éléments supplémentaires tels que Text & Media ou Security & Privacy . Comme pour les champs de formulaire, ces éléments peuvent être placés au-dessus, au-dessous ou à côté d'autres champs. Pendant la phase bêta de , certains éléments peuvent ne pas être disponibles. 

• Dans votre compte HubSpot, accédez à Marketing > Formulaires.
• Créez un nouveau formulaire ou survolez un formulaire existant et cliquez sur Edit. 
• En haut à gauche, cliquez sur l'icône + plus.
• Dans le panneau de gauche, cliquez sur Other.
• Cliquez et faites glisser les éléments  sur l'aperçu du formulaire à droite pour les inclure dans votre formulaire.
   
   
  

Ajouter une logique conditionnelle aux formulaires (Content Hub ou Marketing Hub Professional et Entreprise seulement)

Après avoir ajouté les champs de votre formulaire, vous pouvez mettre en place une logique conditionnelle pour masquer ou afficher les champs pertinents, ou rediriger les visiteurs vers d'autres pages HubSpot en fonction de leurs réponses précédentes.

Pour chaque formulaire, vous pouvez ajouter jusqu'à 30 règles avec 10 conditions par règle.

Pour mettre en place une logique conditionnelle sur votre formulaire : 

• Dans votre compte HubSpot, accédez à Marketing > Formulaires.
• Créez un nouveau formulaire ou survolez un formulaire existant et cliquez sur Edit. 
• En haut à gauche, cliquez sur l'icône githubBranch logique.
• Dans le panneau de gauche, cliquez sur Add logic.
• Dans la section logic, configurez vos règles de logique conditionnelle. Par exemple, si vous filtrez par City et que vous sélectionnez is any of Dublin , la règle de logique conditionnelle ne s'appliquera qu'aux enregistrements ayant la valeur Dublin.
  
• Pour supprimer un filtre, cliquez sur l'icône de suppression deletee . 
• Pour cloner un filtre, cliquez sur l'icône duplicate clone. 
• Pour ajouter des filtres supplémentaires à la règle, cliquez sur add Ajouter un filtre à ce groupe.
• Pour ajouter un groupe supplémentaire à la règle, cliquez sur add Ajouter un groupe. 
• Si vous avez ajouté plusieurs filtres ou groupes à la règle, cliquez sur le menu déroulant ET OU entre les filtres et les groupes pour appliquer la logique ET ou OU: 
  • AND: Tous les filtres de la règle doivent être vrais pour que la règle soit déclenchée. 
  • OR: un seul filtre du groupe doit être vrai pour que la règle soit déclenchée. En savoir plus sur la logique ET ou OU. 

• Dans la section Puis, cliquez sur le menu déroulant pour sélectionner on-form actions. Vous avez le choix entre les options suivantes :
  • Afficher un champ: si les réponses de l'utilisateur correspondent aux critères définis dans vos règles, affichez un champ spécifique. 
  • Masquer un champ: si les réponses de l'utilisateur correspondent aux critères définis dans vos règles, affichez un champ spécifique. 
  • Passer à l'étape: si les réponses de l'utilisateur correspondent aux critères définis dans vos règles, passez à une étape spécifique. Pour utiliser cette option, le formulaire doit comporter au moins trois étapes. En savoir plus sur l'ajout d'étapes de formulaire. 
  • Redirection vers: si les réponses de l'utilisateur correspondent aux critères définis dans vos règles, redirigez-les vers une page HubSpot ou une URL externe. Les utilisateurs d'un compte "Sales Hub" Professional ou Service Hub Professional peuvent rediriger les formulaires vers un lien de réunion sur une page de planification.

• En fonction de l'action sélectionnée, remplissez les champs requis. 
• Pour appliquer la logique conditionnelle, cliquez sur Save and Activate. 

Gérer les règles de logique conditionnelle

• Dans votre compte HubSpot, accédez à Marketing > Formulaires.
• Créez un nouveau formulaire ou survolez un formulaire existant et cliquez sur Edit. 
• En haut à gauche, cliquez sur l'icône githubBranch logique.
• Pour ajouter une autre règle, cliquez sur Add logic.
• Pour modifier une règle, cliquez sur le menu déroulant Actions et sélectionnez Editer. 
• Pour supprimer une règle, cliquez sur le menu déroulant Actions et sélectionnez Supprimer. 

Ajouter et modifier des étapes de formulaire

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 à Marketing > Capture de leads > Formulaires.
• 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 supprimer une étape, survolez-la et cliquez sur l'icône de suppression delete . 

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, sélectionnez un modèle d'é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'interrupteur Background color 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 télécharger une image à partir de vos fichiers HubSpot, parcourir des images à partir du disque dur de votre ordinateur ou utiliser AI assistants 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. 
• En haut à gauche, cliquez sur l'icône du 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 :
  • Texte : personnaliser la police, la taille de la police et la couleur de l'en-tête et du corps du texte. Vous pouvez choisir d'ajouter une ombre portée à votre texte d'en-tête ou de mettre en évidence votre corps de texte. 

• • Champs de saisie : personnaliser 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. 
  • Bouton : personnaliser la hauteur du bouton, l'arrondi des coins, l'arrière-plan, le dégradé et ajouter une ombre portée au bouton. Vous pouvez également personnaliser la police, la taille de la police et la couleur du texte du bouton. 
  • 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.

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 un contact pour une nouvelle adresse e-mail : sélectionnez cette option pour créer une fiche d'informations de 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 contacts créés comme contacts marketing : si votre compte HubSpot a accès aux contacts marketing, vous pouvez automatiquement définir tous les contacts qui ont soumis ce formulaire comme étant des contacts marketing. Cela inclut des contacts nouveaux et existants.
  • Pré-remplir les champs avec des valeurs connues : si un contact a précédemment visité votre site et soumis un formulaire (et que HubSpot était en mesure de stocker et de suivre ses cookies), les valeurs connues peuvent être pré-remplies dans le formulaire. Cette option est activée par défaut, en savoir plus sur champs de formulaire pré-remplis. 
    
  • Personnaliser l'étape du cycle de vie : cliquez sur le menu déroulant Définir l'état du cycle de vie et sélectionnez une étape du 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 : 

  • Notifications par e-mail aux visiteurs : cochez la case Envoyer les notifications de soumission par e-mail au propriétaire du contact pour envoyer automatiquement une notification au propriétaire du contact. Si un contact n'a pas de propriétaire, aucune notification ne sera envoyée. Pour en savoir plus sur la propriété des objets dans HubSpot. 

  • Notifications de soumission par e-mail : cliquez sur le menu déroulant Send submission email notifications to pour sélectionner les équipes ou les personnes par défaut auxquelles 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.

• Pour personnaliser les paramètres linguistiques de votre formulaire, cliquez sur l'onglet Langue et région. 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 activer/désactiver la validation en direct des champs du 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/désactivez l'interrupteur Enable live validation of form fields.
• En bas à gauche, cliquez sur Save. 

Publier ou partager votre formulaire

Après avoir créé un nouveau formulaire ou effectué des mises à jour, publiez votre formulaire pour que les modifications soient prises en compte. 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 à Marketing > Capture de leads > Formulaires.
• Créez un nouveau formulaire ou survolez un formulaire existant et cliquez sur Edit. 
• En haut à droite, cliquez sur Publish pour publier les mises à jour de votre formulaire.
• Pour intégrer votre formulaire sur une page HubSpot, naviguez vers votre contenu, puis ajoutez le module de formulaire et sélectionnez le formulaire .
• Pour partager votre formulaire ou l'intégrer à un site externe, cliquez en haut à droite sur Share, puis sélectionnez l'une des options suivantes :
  • 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.