Créer votre formulaire

Le générateur est l’endroit où vous décidez des questions posées par un formulaire de demande. Vous y ajoutez des champs, vous les regroupez en lignes, vous découpez le formulaire en pages et vous configurez chaque champ. L’aperçu au centre affiche le formulaire tel que les personnes acheteuses le voient sur votre boutique.

Note

Pour ouvrir le générateur, accédez à Forms dans Sami B2B Onboarding et cliquez sur Edit à côté d’un formulaire, ou cliquez sur le nom du formulaire. Seul le personnel ayant le rôle d’administrateur peut modifier les formulaires.

Le générateur en un coup d’œil

Zone	Emplacement	À quoi elle sert
Rail des sections	Tout à gauche	Permet de passer d’une section à l’autre : Elements, Appearance, After submit, Email et Integrations. Collapse réduit le rail à ses icônes.
Panneau Elements	À gauche	Le plan du formulaire : Header en haut, Content, chaque page avec ses champs et ses lignes, Add page, et Footer en bas.
Aperçu	Au centre	Le formulaire tel que les personnes acheteuses le voient. Cliquez sur un champ, un titre de page, l’en-tête ou les boutons pour le sélectionner.
Panneau des paramètres	À droite	S’ouvre lorsque vous sélectionnez un élément et affiche ses paramètres. Cliquez sur × (Close) pour le fermer.
Barre d’outils	Au-dessus de l’aperçu	La zone Form name, le badge Active ou Draft, … (More actions), Language, les boutons d’aperçu pour ordinateur et mobile, le bouton d’inspection et Preview.

Le panneau Elements liste chaque page, ligne et champ dans l’ordre où les personnes acheteuses les rencontrent.

Les autres sections du rail ont leurs propres pages :

Section	Ce que vous y configurez	Pour en savoir plus
Appearance	La mise en page, la largeur, la police, le style des champs et les couleurs.	Personnaliser l’apparence du formulaire
After submit	Le message de remerciement, ou une page vers laquelle rediriger les personnes acheteuses.	Après l’envoi du formulaire
Email	Qui est informé de ce formulaire, et la version propre à ce formulaire de chaque e-mail.	Modifier les modèles d’e-mail et Choisir qui est notifié
Integrations	L’endroit où les réponses sont enregistrées dans Shopify, ainsi que Klaviyo, les webhooks, la saisie automatique d’adresse et le captcha.	Associer les réponses à Shopify

Ajouter un champ

1. Ouvrir la liste des champs

   Utilisez l’option la plus proche :

   • Dans le panneau Elements, cliquez sur + (Add field) à côté du nom de la page, ou sur Add field à la fin de la page. Dans une ligne, cliquez sur Add element pour ajouter le champ à cette ligne.
   • Dans l’aperçu, cliquez sur Add a field à la fin de la page.
   • Dans l’aperçu, pointez le bord d’un champ et cliquez sur le + qui apparaît. Son infobulle indique Add field above, Add field below, Add field to the left ou Add field to the right. Gauche et droite placent le nouveau champ à côté de celui-ci, dans une ligne.

2. Trouver le champ

   Faites défiler la liste, ou saisissez du texte dans Search fields pour l’affiner.

   

   Les champs sont regroupés par type, et Add all sur un bloc d’adresse ajoute une adresse complète en un clic.

3. L’ajouter

   Cliquez sur le champ. Il est ajouté à la page et sélectionné, et ses paramètres s’ouvrent à droite. Donnez-lui un libellé et configurez-le (voir Paramètres d’un champ).

Attention

Chaque formulaire conserve un champ Email et un champ enregistré comme nom de l’entreprise. Le champ Email ne peut être ni supprimé ni masqué, et Save est refusé avec le message Map a field to Company · Name. si aucun champ n’est enregistré comme nom de l’entreprise.

Les champs disponibles

Groupe	Champ	Ce que la personne acheteuse obtient
Basic fields	Short text	Une zone de texte d’une ligne.
	Long text	Une zone de texte sur plusieurs lignes.
	Number	Une zone qui n’accepte que des nombres.
	Email	Une zone qui vérifie que la réponse ressemble à une adresse e-mail.
	Phone	Une zone de numéro de téléphone, avec drapeau du pays, indicatif et vérification du numéro en option.
	Country	Une liste de pays.
	State / province	Une liste des États ou provinces du pays choisi dans le champ Country placé avant lui sur la page. Elle s’affiche dès que la personne choisit un pays qui compte des États, et devient une simple zone de texte quand aucun champ Country ne le précède.
	Dropdown	Une liste pour choisir une seule option, ou plusieurs avec Allow multiple choices.
	Checkbox	Une case à cocher unique, par exemple « J’accepte les conditions ». Lorsqu’elle est obligatoire, la personne doit la cocher.
	Checkboxes	Une liste d’options dont la personne peut cocher autant qu’elle le souhaite.
	Radio buttons	Une liste pour choisir une seule option, avec une option Other facultative que la personne saisit elle-même.
	Date and time	Un sélecteur de date, une heure, ou les deux.
	File upload	Une zone de téléversement. Par défaut, elle accepte les fichiers PDF, JPG, JPEG et PNG jusqu’à 10 Mo.
Company fields	Company name	Une zone de texte enregistrée comme nom de l’entreprise.
	Tax ID	Une zone de texte pour le numéro fiscal ou de TVA de l’entreprise. Les vérifications de numéro fiscal de l’application lisent ce champ.
	Website	Une zone de texte pour le site web de l’entreprise.
Document fields	Business license, Tax certificate, Tax registration, Reseller certificate	Une zone de téléversement. Le fichier est conservé avec la demande comme document de ce type. Voir Documents.
Static text	Heading	Un titre avec une légende facultative en dessous.
	Paragraph	Du texte mis en forme, comme des instructions.
	HTML	Votre propre code HTML.
	Divider	Une ligne horizontale.
Address blocks	Shipping address	Dix champs sur une même ligne : Recipient / department, First name, Last name, Phone, Address line 1, Address line 2, City, Country, State / province et ZIP / postal code. Cliquez sur Add all.
	Billing address	Une case Same as shipping address, puis dix champs de facturation (Department / attention, Billing first name, etc.) dans une ligne masquée tant que la case est cochée. Cliquez sur Add all.
Layout	Row	Une ligne vide dans laquelle placer des champs. Voir Regrouper des champs en lignes.

Pour ajouter un seul champ d’adresse plutôt qu’un bloc entier, cliquez sur Show the individual address fields sous Address blocks. Les champs ajoutés par un bloc d’adresse ne sont pas enregistrés dans Shopify tant que vous ne les avez pas associés. Voir Associer les réponses à Shopify.

Paramètres d’un champ

Cliquez sur un champ dans l’aperçu ou dans le panneau Elements. Ses paramètres s’ouvrent à droite, répartis en sections. Vous ne voyez que les sections qui s’appliquent à ce type de champ.

Section	Paramètres
Content	Label, la question lue par la personne acheteuse. Placeholder, le texte estompé à l’intérieur d’une zone vide. Help text, affiché sous le champ. Default, une réponse préremplie à l’ouverture du formulaire (pour une Checkbox unique : Ticked by default).
Options	Pour Dropdown, Checkboxes et Radio buttons. Cliquez sur Add option ou Change pour modifier les options : saisissez le Label de chaque option, faites glisser pour les réordonner, Add another option, ou Bulk add pour ajouter une option par ligne. Les Customer tags sont ajoutés au client Shopify lorsque la personne acheteuse qui a choisi cette option est approuvée (40 caractères maximum chacun). Désactivez Use the label as the value pour enregistrer autre chose que ce que la personne lit. Un Dropdown propose aussi Allow multiple choices. Les Radio buttons proposent aussi Other option, Other label et Other placeholder.
Upload	Pour File upload et les champs de document. Accepted : Only certain file types (listez-les ensuite dans File types) ou Any file type. Max size : de 1 à 20 Mo. Allow more than one file.
Phone number	Show country flag and dial code. Lorsque cette option est activée : Check the number is valid et Default country (From the buyer’s browser sauf si vous en choisissez un).
Date and time	Asks for : Date, Time ou Date and time. Date format, Time format, Other language pour le sélecteur de date, et Limit the range avec Earliest et Latest.
Validation	Required. Lorsque cette option est activée, Error message, affiché quand le champ reste vide ; saisissez {{ label }} pour y inclure le libellé du champ. Limit characters avec Min characters et Max characters, pour Short text, Long text, Email, Phone et Tax ID. Laissez une limite vide pour ne pas en fixer.
Layout	Icon, dessinée au début de la zone (pas pour Checkbox, Checkboxes, Radio buttons ni les téléversements). Hide label, avec Keep the label’s space et Still show the required mark. Column width, de 1 à 12. Number of options per line, de 1 à 5, pour Checkboxes et Radio buttons.
Visibility	Conditional display : afficher, masquer, rendre obligatoire ou désactiver le champ selon les réponses précédentes. Voir Afficher, exiger ou désactiver des champs avec des règles.
Custom CSS	Custom CSS class, un nom de classe que vous pouvez styliser avec le CSS de votre thème. Seuls les noms de classe simples sont conservés.

Pour Dropdown, Country et State / province, le texte indicatif est la première ligne de la liste, Select… par défaut. Si vous le videz, Select… revient.

Le texte statique a moins de paramètres. Un Heading a son texte dans Label, plus Caption et Heading tag (Heading 1 à Heading 6). Un Paragraph a Text, et HTML a Markup. Leur Label n’est que le nom que vous voyez dans le panneau Elements. Tout texte statique a aussi Column width, Visibility et Custom CSS.

Les paramètres d’un champ sont regroupés en sections, de ce que la personne acheteuse lit jusqu’au moment où le champ s’affiche.

Organiser les champs

Déplacer un champ

• Dans le panneau Elements : faites glisser un champ par sa poignée. Déposez-le sur un autre champ pour le placer au-dessus ou en dessous, sur le nom d’une page pour le déplacer à la fin de cette page, ou sur le nom d’une ligne pour le mettre dans cette ligne.
• Dans l’aperçu : cliquez sur un champ, puis faites-le glisser par la poignée à gauche de sa barre d’outils (Drag to move this field). Déposez-le sur le bord supérieur ou inférieur d’un autre champ pour le placer au-dessus ou en dessous. Déposez-le sur le bord gauche ou droit pour placer les deux champs côte à côte dans une ligne.

Définir la largeur des colonnes

Les largeurs se comptent sur 12 colonnes, et chaque nouveau champ commence à 12, soit la pleine largeur. Les champs consécutifs se partagent une ligne lorsque leurs largeurs le permettent : deux champs à 6 sont côte à côte et trois champs à 4 forment trois colonnes.

• Faites glisser Layout › Column width dans les paramètres du champ, ou
• Cliquez sur Change width dans la barre d’outils du champ sélectionné, dans l’aperçu. La largeur passe successivement au tiers, à la moitié et à la pleine largeur.

Lorsque le formulaire est plus étroit que 480 pixels, par exemple sur un téléphone, chaque champ occupe toute la ligne.

Regrouper des champs en lignes

Une ligne garde des champs ensemble et peut les introduire par un en-tête : un libellé et une description au-dessus des champs. Vous pouvez afficher, masquer ou déplacer une ligne entière en une seule fois.

Pour créer une ligne, procédez de l’une des manières suivantes :

• Ouvrez la liste des champs et cliquez sur Row sous Layout. Une ligne vide apparaît dans le panneau Elements. Cliquez sur Add element à l’intérieur pour y ajouter des champs.
• Ouvrez la liste des champs et cliquez sur Select fields (affiché quand la page compte au moins deux champs hors des lignes). Cochez les champs dans le panneau Elements, puis cliquez sur Group into row.
• Ajoutez un champ à gauche ou à droite d’un autre, ou déposez-en un à côté d’un autre dans l’aperçu.

Cliquez sur le nom de la ligne dans le panneau Elements pour ouvrir ses paramètres :

Paramètre	Ce qu’il fait
Label	Le titre de la ligne. Les personnes acheteuses le voient au-dessus des champs de la ligne.
Hide the heading block	Masque le libellé et la description pour les personnes acheteuses. Ils sont conservés et reviennent quand vous désactivez cette option.
Description	Le texte affiché sous le libellé.
Icon	Une icône à côté du libellé.
Conditional display	Affiche ou masque la ligne entière selon les réponses précédentes. Voir Afficher, exiger ou désactiver des champs avec des règles.
Ungroup row	Dissout la ligne. Ses champs restent sur la page.

Dans le panneau Elements, l’icône en forme d’œil de la ligne masque tous ses champs et Duplicate row la copie. Pour retirer un champ d’une ligne, sélectionnez-le et cliquez sur Remove from row.

Le formulaire Wholesale application utilise des lignes dont le bloc d’en-tête est masqué, car chaque section commence déjà par un champ Heading.

Utiliser plusieurs pages

1. Ajouter une page

   Cliquez sur Add page en bas du panneau Elements. Une page nommée Untitled page 2 est ajoutée et ses paramètres s’ouvrent. Saisissez un nouveau Page name et appuyez sur Enter.

2. Transformer les pages en étapes

   Cliquez sur Content dans le panneau Elements et activez Show step progress bar. Choisissez Step labels : Name and number, Name only ou Number only.

   Les personnes acheteuses voient désormais une page à la fois, avec une barre d’étapes en haut. Chaque page se termine par un bouton Continue qui vérifie les réponses de la page avant de passer à la suivante, et la dernière page se termine par le bouton d’envoi. Sans la barre d’étapes, toutes les pages s’affichent l’une après l’autre dans un seul formulaire.

3. Choisir si les personnes acheteuses peuvent revenir en arrière

   Chaque étape après la première a un bouton Back, car Let buyers go back a step est activé par défaut. Pour le modifier, cliquez sur Footer dans le panneau Elements. Désactivez Let buyers go back a step pour supprimer le bouton, ou modifiez Back label. Ces paramètres ne s’affichent que lorsque la barre d’étapes est activée et que le formulaire compte au moins deux pages.

Cliquez sur le nom d’une page dans le panneau Elements pour ouvrir ses paramètres :

Paramètre	Ce qu’il fait
Page name	Le nom de la page dans le générateur et dans la barre d’étapes.
Hide the heading block	Fait commencer la page à son premier champ. Le titre et la description sont conservés pour plus tard.
Heading et Description	Affichés en haut de la page.
Continue button label	Le texte du bouton Continue de la page. Non affiché sur la dernière page.
Icon	Remplace le numéro de cette étape dans la barre d’étapes. Affichée uniquement lorsque la barre d’étapes est activée.
Header and footer	Use custom header et Use custom footer donnent à cette étape son propre texte d’en-tête et sa propre note. Tant que les personnes acheteuses peuvent revenir en arrière, le pied de page personnalisé propose aussi Show Back button on this step. Affichés uniquement lorsque la barre d’étapes est activée.
Visibility	Affiche ou masque la page entière selon les réponses données sur les pages précédentes.
Delete page	Supprime la page et ses champs. Un formulaire a besoin d’au moins une page, et la page qui contient le champ Email ne peut pas être supprimée tant que vous n’avez pas déplacé ce champ.

En-tête et pied de page

Cliquez sur Header en haut du panneau Elements, ou sur le titre dans l’aperçu :

• Show store logo, puis Upload image : un fichier .jpg, .png ou .svg de 1 Mo maximum, d’environ 200×60 pixels.
• Heading et Subheading en haut du formulaire.
• Show this block pour afficher ou masquer l’ensemble de l’en-tête.

Cliquez sur Footer en bas du panneau Elements, ou sur les boutons dans l’aperçu :

• Submit label, le texte du bouton d’envoi.
• Reset button et Reset label, un bouton qui vide le formulaire.
• Full-width buttons, ou Alignment : Left, Center ou Right.
• Note, un texte affiché avec les boutons, et Put the note above the buttons.

Masquer, copier ou supprimer un champ

• Hide this block (l’icône en forme d’œil dans le panneau Elements ou dans la barre d’outils du champ) retire le champ du formulaire pour les personnes acheteuses, mais le conserve avec ses paramètres dans le générateur. Le champ disparaît de l’aperçu et apparaît grisé dans le panneau Elements. Cliquez sur son œil à cet endroit pour le rétablir.
• Duplicate field place une copie juste après le champ et la sélectionne.
• Remove field (dans la barre d’outils ou en bas du panneau des paramètres) supprime le champ à l’enregistrement.

Prévisualiser le formulaire

• Desktop preview et Mobile preview changent la largeur de l’aperçu.
• Le bouton d’inspection (l’icône en forme de cible) bascule entre la modification et le test. L’inspecteur est activé à l’ouverture du générateur, et le bouton indique Deactivate inspector : un clic sélectionne des éléments à modifier, et les règles ne s’exécutent pas, de sorte qu’un champ qu’une règle masquerait reste visible. Cliquez dessus pour désactiver l’inspecteur et remplir l’aperçu comme une personne acheteuse : les règles s’exécutent, et Continue et le bouton d’envoi vérifient vos réponses. Rien n’est envoyé. Cliquez de nouveau (Activate inspector) pour revenir à la modification. Le raccourci est ⌘ Shift I sur Mac ou Ctrl Shift I sur Windows.
• Language affiche le formulaire dans une langue dans laquelle vous l’avez traduit. Les mots non encore traduits s’affichent en anglais. Pour traduire, choisissez Translate this form dans … (More actions), qui ouvre Traduire.
• Preview (l’icône en forme d’œil) ouvre la page du formulaire sur votre boutique dans un nouvel onglet. Elle fonctionne une fois le formulaire enregistré et publié.

Enregistrer vos modifications

Cliquez sur Save dans la barre d’enregistrement. Un message Form saved s’affiche et, si le formulaire est Active, les personnes acheteuses obtiennent immédiatement la nouvelle version. Discard annule tout ce qui a été fait depuis le dernier enregistrement.

Si quelque chose doit être corrigé, l’enregistrement est refusé et une bannière en haut de l’aperçu liste chaque problème, comme Enter a form name ou deux champs enregistrés dans le même champ Shopify. Lorsqu’une ligne se termine par un bouton en forme de flèche, cliquez dessus pour accéder directement au champ ou au paramètre concerné.

Étapes suivantes

• Afficher, exiger ou désactiver des champs avec des règles — ne posez une question que lorsqu’une réponse précédente le justifie.
• Associer les réponses à Shopify — choisissez où chaque réponse est enregistrée lors de l’approbation.
• Personnaliser l’apparence du formulaire — accordez le formulaire à l’aspect de votre boutique.
• Créer et publier un formulaire — publiez le formulaire et vérifiez-le sur votre boutique.