Les formulaires personnalisés vous permettent de créer vos propres formulaires en plusieurs étapes et de les utiliser à la place des fonctionnalités intégrées Lead Collection ou Human Contact Form. Vous choisissez les champs, le message de remerciement et le bouton d'envoi, puis vous associez le formulaire à la section où vous souhaitez qu'il apparaisse.
Où trouver les formulaires
Accédez à Settings > Forms (Paramètres > Formulaires). Cette page liste vos formulaires personnalisés enregistrés. Lorsque vous n'en avez pas encore créé, la mention "No custom forms yet" s'affiche avec un bouton Create your first form (Créer votre premier formulaire).
Créer un formulaire
Cliquez sur New form (Nouveau formulaire) - ou sur Create your first form lorsque la liste est encore vide - pour ouvrir le créateur de formulaires.
Concevoir le formulaire
Le créateur contient tout le nécessaire pour définir le formulaire sur un seul écran, avec un aperçu en direct sur la droite. Dans cet article, nous concevons un exemple de formulaire "Demande de traiteur" pour une pizzeria : l'étape 1 recueille les coordonnées, l'étape 2 pose des questions sur l'événement.
- Form name (Nom du formulaire) - un nom interne afin de pouvoir identifier le formulaire dans les listes déroulantes par la suite.
- Thank-you message (Message de remerciement) - le texte de confirmation affiché après qu'un visiteur a envoyé le formulaire.
- Submit button (Bouton d'envoi) - définissez l'intitulé du bouton, choisissez une icône facultative et sélectionnez sa couleur.
- Onglets Build (Créer) et Custom CSS (CSS personnalisé) - concevez les champs de manière visuelle, ou passez à Custom CSS pour appliquer vos propres styles.
Ajouter des champs
Dans l'onglet Build, donnez à l'étape un titre facultatif, puis cliquez sur le bouton d'un type de champ pour l'ajouter. Vous pouvez ajouter autant de champs que nécessaire, en combinant n'importe lesquels des types ci-dessous dans un seul formulaire.
- Name (Nom) - un champ sur une seule ligne pour le nom du visiteur.
- Email (E-mail) - recueille une adresse e-mail, validée comme telle.
- Phone number (Numéro de téléphone) - recueille un numéro de téléphone.
- Date - un sélecteur de date.
- Time (Heure) - un sélecteur d'heure.
- File upload (Téléversement de fichier) - permet au visiteur de joindre et d'importer un fichier (voir ci-dessous).
- Short answer (Réponse courte) - un champ de texte libre sur une seule ligne.
- Long answer (Réponse longue) - un champ multi-lignes plus grand pour les réponses plus détaillées.
- Checkbox (Case à cocher) - une seule case à cocher, par exemple pour accepter des conditions.
- Dropdown (Liste déroulante) - un menu dans lequel le visiteur sélectionne une seule option dans une liste.
- Single choice (Choix unique) - un ensemble d'options où le visiteur n'en choisit qu'une seule.
- Multiple choice (Choix multiples) - un ensemble d'options où le visiteur peut en cocher plusieurs à la fois.
Chaque champ possède un Label (ce que voit le visiteur) et un Name (la clé interne utilisée dans les exports et les notifications). Vous pouvez marquer un champ comme Required (Obligatoire), définir sa largeur (Width) pour afficher des champs côte à côte, et glisser-déposer les champs pour les réorganiser. Les champs Dropdown, Single choice et Multiple choice prennent également une liste d'options, à raison d'une par ligne.
Ajouter des étapes
Pour les formulaires plus longs, divisez les champs en étapes au lieu d'utiliser un seul écran interminable. Cliquez sur Add step (Ajouter une étape) pour ajouter une autre étape, puis glissez-y ou ajoutez-y des champs. Chaque étape constitue sa propre carte avec un titre facultatif.
Les visiteurs voient chaque étape sous la forme d'un écran distinct dans le chat et passent de l'une à l'autre grâce aux boutons Next (Suivant) et Previous (Précédent), qui s'affichent automatiquement dès qu'un formulaire compte plus d'une étape. Lorsqu'un formulaire comprend plusieurs étapes, le créateur vous permet également de définir l'intitulé, l'icône et la couleur des boutons Next et Previous.
Donnez à chaque étape un titre court et axé sur l'action (par exemple "Vos coordonnées", puis "Votre demande") afin que les visiteurs sachent toujours où ils se trouvent dans le formulaire.
Champs de téléversement de fichiers
Un champ File upload permet à un visiteur de joindre un fichier à sa soumission. Pour chaque champ de fichier, vous pouvez définir :
- Accepted extensions (Extensions acceptées) - une liste séparée par des virgules, par exemple
pdf, png, jpg. Seuls les fichiers portant ces extensions sont autorisés. - Max size (Taille maximale) - la taille maximale du fichier en Mo, jusqu'à 10 Mo.
Les fichiers importés sont vérifiés lors de l'envoi : l'extension doit figurer dans votre liste autorisée, le fichier doit respecter la limite de taille, et son contenu réel doit correspondre au type déclaré.
Aperçu en direct
Le volet Live preview (Aperçu en direct) sur la droite montre le formulaire exactement tel que les visiteurs le verront, en se mettant à jour à mesure que vous ajoutez des champs, insérez des étapes et modifiez le style.
Lorsque le formulaire est prêt, cliquez sur Save (Enregistrer). Le formulaire apparaît désormais dans votre liste sous Settings > Forms.
Utiliser un formulaire personnalisé
Un formulaire personnalisé enregistré n'apparaît pas de lui-même aux visiteurs. Associez-le à une section :
- Settings > Lead Collection - ouvrez le menu déroulant Form shown to the visitor (Formulaire affiché au visiteur) et sélectionnez votre formulaire personnalisé à la place du formulaire intégré.
- Settings > Human Contact Form - ouvrez le menu déroulant Form shown to the visitor et sélectionnez votre formulaire personnalisé à la place du formulaire intégré.
Le visiteur verra ensuite votre formulaire personnalisé dès que cette section sera déclenchée.
À quoi cela ressemble pour le visiteur
Le formulaire s'affiche à l'intérieur de la fenêtre de chat. Voici l'exemple de formulaire "Demande de traiteur" associé à Lead Collection : le visiteur voit l'étape 1 avec les champs de contact et poursuit avec le bouton Next.
L'étape 2 affiche les champs relatifs à l'événement, notamment la Dropdown, la Long answer et le champ File upload. Le visiteur peut revenir en arrière avec Previous ou envoyer le formulaire avec Submit (Envoyer). Après l'envoi, le message de remerciement que vous avez configuré dans le créateur s'affiche dans le chat.
Consulter les soumissions dans l'onglet Leads
Lorsqu'un visiteur envoie un formulaire personnalisé qui est associé à Lead Collection ou au Human Contact Form, la soumission est enregistrée sous forme de lead. Ouvrez l'onglet Leads du bot pour la consulter.
Aux côtés des champs standards Name, Email, Phone, Collected date et Entry point, une colonne Form data (Données du formulaire) affiche la soumission complète : le libellé de chaque champ suivi de la valeur saisie par le visiteur, à raison d'une ligne par champ. Pour un champ File upload, le nom du fichier importé est indiqué ; l'e-mail de notification de lead et l'export CSV (le bouton Export sur l'onglet Leads) contiennent tous deux un lien de téléchargement vers le fichier lui-même.
Depuis chaque lead, vous pouvez également cliquer pour accéder à la Conversation complète afin de voir les échanges entourant la soumission.