Personnaliser l'apparence du formulaire

Les paramètres Appearance de Sami B2B Onboarding modifient l’aspect de l’ensemble du formulaire : sa police, sa taille, sa largeur, le style des champs et les couleurs. Ils s’appliquent à un seul formulaire : chacun de vos formulaires peut donc avoir son propre aspect, et ils ne modifient jamais votre thème.

Ouvrir les paramètres Appearance

1. Ouvrir le formulaire

   Accédez à Forms et cliquez sur Edit à côté du formulaire. Le générateur s’ouvre.

2. Ouvrir Appearance

   Dans le rail à gauche, cliquez sur Appearance. Le panneau liste tous les paramètres ci-dessous, et l’aperçu au centre change au fur et à mesure de vos modifications.

   

   Chaque paramètre Appearance modifie l’aperçu immédiatement.

3. Enregistrer

   Lorsque le formulaire vous convient, cliquez sur Save dans la barre d’enregistrement. Si le formulaire est publié, les personnes acheteuses voient le nouvel aspect à leur prochaine ouverture.

Paramètres d’apparence

Paramètre	Ce qu’il modifie	Valeur par défaut
Font	La police de l’ensemble du formulaire. Ouvre le panneau Select font.	Theme default
Font size scale	La taille de tous les textes du formulaire, de 80 % à 130 % de la taille de votre thème, par pas de 5 %.	100 %
Width	La plus grande largeur du formulaire, en px (320 à 1 200) ou en % de l’espace dans lequel il se trouve (30 à 100). Le formulaire est centré et se rétrécit sur les petits écrans.	640 px
Layout	Default place les champs directement sur la page. Boxed place le formulaire dans une carte à part, avec marge intérieure et bordure.	Default
Style	L’aspect de chaque zone de champ. Voir Styles de champ.	Classic
Field spacing	L’espace entre les champs : Comfortable ou Compact.	Comfortable
Color scheme	Les couleurs d’arrière-plan, de texte et de boutons du formulaire. Voir Couleurs.	Default
CSS class	Ajoute un nom de classe de votre choix au formulaire, afin que les styles de votre thème puissent le cibler, par exemple wholesale-form.	Vide

Lorsque vous basculez Width entre px et %, la valeur repart de 640 px ou de 100 %.

Choisir une police

1. Ouvrir la liste des polices

   Dans Appearance, cliquez sur la zone Font. Le panneau Select font s’ouvre.

2. Trouver une police

   Saisissez du texte dans Search, ou faites défiler. La liste comporte deux groupes :

   • System fonts : Theme default, la police que votre thème utilise déjà, puis System UI, Helvetica, Arial, Georgia, Times New Roman et Monospace. Rien de supplémentaire ne se charge pour celles-ci.
   • Other fonts : près de 1 000 polices web. Chacune est affichée dans sa propre police. Elles se chargent depuis Google Fonts sur votre vitrine, ce qui peut ralentir un peu le chargement de la page.

3. La choisir, avec son épaisseur

   Cliquez sur une police. L’aperçu change aussitôt. Si la police existe en plusieurs épaisseurs, choisissez-en une dans la liste Weight en bas du panneau, par exemple Regular, Bold ou Italic. Cliquez sur Done.

   La note sous Font confirme votre choix, par exemple Bold. Loads from Google Fonts on the storefront.

Styles de champ

Cliquez sur la zone Style pour voir les huit styles, chacun dessiné sous la forme d’un champ Company name d’exemple. Cliquez sur l’un d’eux pour l’appliquer à tous les champs du formulaire.

Style	Aspect d’un champ
Material filled	Une zone grise avec le libellé à l’intérieur, en haut.
Material outlined	Une zone bordée avec le libellé posé sur son bord supérieur.
Classic	Une zone gris clair avec une ombre légère et des coins arrondis. Le style par défaut.
Classic rounded	Classic, avec des zones d’une ligne entièrement arrondies.
Flat	Une zone grise aux coins carrés et sans ombre.
Flat rounded	Flat, avec des zones d’une ligne entièrement arrondies.
Line	Seulement une ligne sous la réponse.
Line rounded	A le même aspect que Line : un soulignement n’a pas de coins à arrondir.

Dans les styles arrondis, les zones qui contiennent plusieurs lignes, comme Long text, gardent des coins légèrement arrondis au lieu d’être entièrement arrondies.

Chaque carte montre l’aspect d’un champ dans ce style.

Couleurs

La ligne Color scheme affiche dix palettes prêtes à l’emploi : Default, Forest Light, Cool Ocean, Matcha Calm, Warm Sand, Blush, Slate, Charcoal, Forest Dark et Midnight. Chaque pastille montre ses couleurs d’arrière-plan, de texte et de bouton. Cliquez sur l’une d’elles pour l’utiliser.

• Default reprend les couleurs de la page elle-même, de sorte que le formulaire s’accorde à votre thème. Pour modifier ces couleurs, modifiez les paramètres de votre thème.
• Toute autre palette applique au formulaire son propre arrière-plan. Les boutons et les repères d’étape prennent la couleur de bouton de la palette.

Créer vos propres couleurs

1. Ouvrir la palette

   Sous les pastilles, cliquez sur Edit scheme. Le panneau Editing s’ouvre pour la palette choisie, par exemple Editing Warm Sand.

2. Modifier les couleurs

   Cliquez sur une couleur pour ouvrir le sélecteur de couleurs. Faites glisser dans le carré et les bandes de couleur, saisissez un code hexadécimal, ou utilisez la pipette pour prélever une couleur à l’écran si votre navigateur la propose. Les couleurs que vous pouvez définir :

   Couleur	Ce qu’elle colore
   Background	L’arrière-plan du formulaire.
   Text	Les libellés, les titres et les réponses.
   Solid button background	Les boutons principaux, comme Submit application, et les repères d’étape.
   Solid button label	Le texte de ces boutons.
   Outline button	La bordure des boutons à contour, comme Back.

   Background, Text et Outline button peuvent afficher Theme color, ce qui signifie que le formulaire utilise à cet endroit la couleur de votre thème.

   Dès que vous modifiez une couleur, la palette devient Custom et une pastille Custom est ajoutée à la ligne. Ces couleurs s’appliquent uniquement à ce formulaire. Les palettes de couleurs de votre thème ne changent pas.

   

   Modifiez n’importe quelle couleur et le formulaire obtient sa propre palette Custom.

3. Fermer ou réinitialiser

   Fermez le panneau pour conserver vos couleurs. Pour revenir aux couleurs de votre thème, cliquez sur Remove color scheme en bas du panneau : le formulaire revient à Default.

Ajouter votre logo

Le logo se place dans l’en-tête du formulaire, au-dessus de son titre.

1. Ouvrir l’en-tête

   Dans le rail, cliquez sur Elements, puis sur Header en haut de la liste.

2. Téléverser le logo

   Activez Show store logo, puis cliquez sur Upload image et choisissez le fichier. Il doit s’agir d’une image .jpg, .png ou .svg de 1 Mo maximum. Une taille d’environ 200×60 px convient le mieux.

   Pour le modifier plus tard, cliquez sur Replace image. Pour le retirer, cliquez sur Remove.

3. Enregistrer

   Cliquez sur Save dans la barre d’enregistrement.

Vérifier le design

L’aperçu du générateur affiche votre formulaire avec le même code que celui de votre vitrine : la mise en page, le style des champs, l’espacement et la palette que vous voyez sont donc ceux que les personnes acheteuses obtiennent.

• Utilisez les boutons Desktop preview et Mobile preview au-dessus de l’aperçu pour vérifier les deux tailles d’écran.
• Les paramètres que vous laissez à votre thème, Theme default pour la police et Default pour les couleurs, reprennent la police et les couleurs de votre thème sur la vitrine. Pour les voir, cliquez sur Preview (le bouton en forme d’œil) dans la barre d’outils. Il ouvre la page du formulaire sur votre boutique dans un nouvel onglet, dans son dernier état enregistré.

Étapes suivantes

• Créer votre formulaire — définissez la largeur, le libellé et le texte indicatif de chaque champ.
• Après l’envoi du formulaire — rédigez l’écran de remerciement que voient les personnes acheteuses après ce formulaire.
• Ajouter un formulaire à votre boutique — placez le formulaire terminé dans une page, une section de thème ou n’importe où avec du HTML.