Het formulier vormgeven

De Appearance-instellingen in Sami B2B Onboarding bepalen hoe het hele formulier eruitziet: het lettertype, de grootte, de breedte, de veldstijl en de kleuren. Ze gelden voor één formulier, dus elk van je formulieren kan een eigen uiterlijk hebben, en ze veranderen nooit iets aan je thema.

De Appearance-instellingen openen

1. Het formulier openen

   Ga naar Forms en klik naast het formulier op Edit. De bouwer opent.

2. Appearance openen

   Klik in de balk links op Appearance. Het paneel toont alle onderstaande instellingen en het voorbeeld in het midden verandert mee terwijl je ze wijzigt.

   

   Elke Appearance-instelling verandert het voorbeeld meteen.

3. Opslaan

   Klik in de opslagbalk op Save als het formulier er goed uitziet. Is het formulier gepubliceerd, dan zien kopers het nieuwe uiterlijk de eerstvolgende keer dat ze het openen.

Appearance-instellingen

Instelling	Wat ze wijzigt	Standaard
Font	Het lettertype van het hele formulier. Opent het paneel Select font.	Theme default
Font size scale	De grootte van alle tekst in het formulier, van 80% tot 130% van de grootte in je thema, in stappen van 5%.	100%
Width	De maximale breedte van het formulier, in px (320 tot 1200) of % van de ruimte waarin het staat (30 tot 100). Het formulier is gecentreerd en wordt smaller op kleine schermen.	640 px
Layout	Default zet de velden direct op de pagina. Boxed zet het formulier in een eigen kaart, met opvulling en een rand.	Default
Style	Het uiterlijk van elk invoervak. Zie Veldstijlen.	Classic
Field spacing	De ruimte tussen velden: Comfortable of Compact.	Comfortable
Color scheme	De achtergrond-, tekst- en knopkleuren van het formulier. Zie Kleuren.	Default
CSS class	Voegt een eigen klassenaam toe aan het formulier, zodat stijlen in je thema het kunnen aanspreken, bijvoorbeeld wholesale-form.	Leeg

Als je Width wisselt tussen px en %, begint het opnieuw bij 640 px of 100%.

Een lettertype kiezen

1. De lettertypelijst openen

   Klik in Appearance op het vak Font. Het paneel Select font opent.

2. Een lettertype zoeken

   Typ in Search of scrol. De lijst heeft twee groepen:

   • System fonts: Theme default, het lettertype dat je thema al gebruikt, daarna System UI, Helvetica, Arial, Georgia, Times New Roman en Monospace. Hiervoor wordt niets extra geladen.
   • Other fonts: bijna 1.000 weblettertypen. Elk wordt getoond in het eigen lettertype. Ze worden in je webshop geladen vanuit Google Fonts, waardoor de pagina iets trager kan laden.

3. Het lettertype en het gewicht kiezen

   Klik op een lettertype. Het voorbeeld verandert meteen. Heeft het lettertype meerdere gewichten, kies er dan een in de lijst Weight onderaan het paneel, bijvoorbeeld Regular, Bold of Italic. Klik op Done.

   De opmerking onder Font bevestigt je keuze, bijvoorbeeld Bold. Loads from Google Fonts on the storefront.

Veldstijlen

Klik op het vak Style om alle acht stijlen te zien, elk getekend als voorbeeldveld Company name. Klik op een stijl om hem toe te passen op elk veld in het formulier.

Stijl	Hoe een veld eruitziet
Material filled	Een grijs vak met het label erin, bovenaan.
Material outlined	Een vak met een rand en het label op de bovenrand.
Classic	Een zacht grijs vak met een lichte schaduw en afgeronde hoeken. De standaard.
Classic rounded	Classic, met volledig ronde vakken van één regel.
Flat	Een grijs vak met vierkante hoeken en zonder schaduw.
Flat rounded	Flat, met volledig ronde vakken van één regel.
Line	Alleen een lijn onder het antwoord.
Line rounded	Ziet er hetzelfde uit als Line: een onderstreping heeft geen hoeken om af te ronden.

In de afgeronde stijlen houden vakken met meerdere regels, zoals Long text, zacht afgeronde hoeken in plaats van volledig rond te worden.

Elke kaart toont hoe een veld eruitziet in die stijl.

Kleuren

De rij Color scheme toont tien kant-en-klare schema’s: Default, Forest Light, Cool Ocean, Matcha Calm, Warm Sand, Blush, Slate, Charcoal, Forest Dark en Midnight. Elk staal toont de achtergrond-, tekst- en knopkleuren. Klik op een staal om het te gebruiken.

• Default neemt de eigen kleuren van de pagina over, zodat het formulier bij je thema past. Om die kleuren te wijzigen, wijzig je de instellingen van je thema.
• Elk ander schema schildert de eigen achtergrond van het formulier erachter. Knoppen en stapmarkeringen nemen de knopkleur van het schema over.

Je eigen kleuren maken

1. Het schema openen

   Klik onder de stalen op Edit scheme. Het paneel Editing opent voor het schema dat je hebt gekozen, bijvoorbeeld Editing Warm Sand.

2. De kleuren wijzigen

   Klik op een kleur om de kleurkiezer te openen. Sleep in het vierkant en de kleurstroken, typ een hexcode of gebruik de pipet om een kleur van je scherm te kiezen als je browser dat biedt. De kleuren die je kunt instellen:

   Kleur	Wat ze kleurt
   Background	Achter het formulier.
   Text	Labels, koppen en antwoorden.
   Solid button background	De hoofdknoppen, zoals Submit application, en de stapmarkeringen.
   Solid button label	De tekst op die knoppen.
   Outline button	De rand van knoppen met omlijning, zoals Back.

   Background, Text en Outline button kunnen Theme color tonen, wat betekent dat het formulier daar de kleur van je thema gebruikt.

   Zodra je een kleur wijzigt, wordt het schema Custom en wordt er een staal Custom aan de rij toegevoegd. Deze kleuren gelden alleen voor dit formulier. De eigen kleurenschema’s van je thema veranderen niet.

   

   Wijzig een kleur en het formulier krijgt een eigen Custom-schema.

3. Sluiten of resetten

   Sluit het paneel om je kleuren te behouden. Om terug te gaan naar de kleuren van je thema, klik je onderaan het paneel op Remove color scheme: het formulier keert terug naar Default.

Je logo toevoegen

Het logo staat in de header van het formulier, boven de kop.

1. De header openen

   Klik in de balk op Elements en klik daarna bovenaan de lijst op Header.

2. Het logo uploaden

   Zet Show store logo aan, klik op Upload image en kies het bestand. Het moet een .jpg-, .png- of .svg-afbeelding van maximaal 1 MB zijn. Een formaat van ongeveer 200×60 px past het best.

   Om het later te wijzigen, klik je op Replace image. Om het te verwijderen, klik je op Remove.

3. Opslaan

   Klik in de opslagbalk op Save.

Het ontwerp controleren

Het voorbeeld in de bouwer tekent je formulier met dezelfde code als je webshop, dus de indeling, veldstijl, afstand en het schema die je ziet, zijn wat kopers krijgen.

• Gebruik de knoppen Desktop preview en Mobile preview boven het voorbeeld om beide schermformaten te controleren.
• Instellingen die je aan je thema overlaat, Theme default voor het lettertype en Default voor de kleuren, nemen in je webshop het lettertype en de kleuren van je thema over. Om die te zien, klik je in de werkbalk op Preview (de oogknop). Dat opent de pagina van het formulier in je webshop in een nieuw tabblad, zoals die voor het laatst is opgeslagen.

Volgende stappen

• Je formulier bouwen: stel de breedte, het label en de placeholder van elk veld in.
• Nadat de koper het formulier heeft verstuurd: schrijf het bedankscherm dat kopers na dit formulier zien.
• Een formulier aan je webshop toevoegen: zet het voltooide formulier op een pagina, in een thema-sectie of overal waar HTML kan.