Je formulier bouwen

In de bouwer bepaal je wat een aanvraagformulier vraagt. Je voegt velden toe, groepeert ze in rijen, verdeelt het formulier over pagina’s en stelt elk veld in. Het voorbeeld in het midden toont het formulier zoals kopers het in je webshop zien.

Opmerking

Om de bouwer te openen, ga je in Sami B2B Onboarding naar Forms en klik je naast een formulier op Edit, of klik je op de naam van het formulier. Alleen medewerkers met de beheerdersrol kunnen formulieren bewerken.

De bouwer in het kort

Gebied	Waar	Waarvoor
Sectiebalk	Uiterst links	Schakelt tussen Elements, Appearance, After submit, Email en Integrations. Collapse klapt hem in tot pictogrammen.
Paneel Elements	Links	De opzet van het formulier: Header bovenaan, Content, elke pagina met de velden en rijen, Add page en Footer onderaan.
Voorbeeld	Midden	Het formulier zoals kopers het zien. Klik op een veld, een paginakop, de header of de knoppen om het te selecteren.
Instellingenpaneel	Rechts	Opent als je iets selecteert en toont de instellingen ervan. Klik op × (Close) om het te sluiten.
Werkbalk	Boven het voorbeeld	Het vak Form name, de badge Active of Draft, … (More actions), Language, de knoppen voor desktop- en mobiel voorbeeld, de inspectorknop en Preview.

Het paneel Elements toont elke pagina, rij en elk veld in de volgorde waarin kopers ze tegenkomen.

De andere secties van de balk hebben hun eigen pagina’s:

Sectie	Wat je er instelt	Meer lezen
Appearance	Indeling, breedte, lettertype, veldstijl en kleuren.	Het formulier vormgeven
After submit	Het bedankbericht, of een pagina waarheen je kopers stuurt.	Nadat de koper het formulier heeft verstuurd
Email	Wie over dit formulier hoort en de eigen versie van elke e-mail voor dit formulier.	E-mailsjablonen bewerken en Kiezen wie een melding krijgt
Integrations	Waar antwoorden in Shopify naartoe gaan, plus Klaviyo, webhooks, automatisch aanvullen van adressen en captcha.	Antwoorden koppelen aan Shopify

Een veld toevoegen

1. De veldenlijst openen

   Gebruik wat het dichtstbij is:

   • Klik in het paneel Elements op + (Add field) naast de naam van de pagina, of op Add field aan het eind van de pagina. Klik binnen een rij op Add element om het veld aan die rij toe te voegen.
   • Klik in het voorbeeld op Add a field aan het eind van de pagina.
   • Wijs in het voorbeeld de rand van een veld aan en klik op de + die verschijnt. De tooltip zegt Add field above, Add field below, Add field to the left of Add field to the right. Links en rechts zetten het nieuwe veld in een rij naast dit veld.

2. Het veld zoeken

   Scrol door de lijst of typ in Search fields om hem te verkleinen.

   

   Velden zijn gegroepeerd per soort en Add all bij een adresblok voegt een heel adres toe met één klik.

3. Het toevoegen

   Klik op het veld. Het wordt aan de pagina toegevoegd en geselecteerd en de instellingen openen rechts. Geef het een label en stel het in (zie Veldinstellingen).

Opgepast

Elk formulier houdt één veld Email en één veld dat is opgeslagen als de bedrijfsnaam. Het veld Email kan niet worden verwijderd of verborgen en Save wordt geweigerd met Map a field to Company · Name. als geen enkel veld is opgeslagen als bedrijfsnaam.

Velden die je kunt toevoegen

Groep	Veld	Wat de koper krijgt
Basic fields	Short text	Een tekstvak van één regel.
	Long text	Een tekstvak voor meerdere regels.
	Number	Een vak dat alleen getallen accepteert.
	Email	Een vak dat controleert of het antwoord op een e-mailadres lijkt.
	Phone	Een vak voor een telefoonnummer, met optioneel een landvlag, een landcode en een nummercontrole.
	Country	Een lijst met landen.
	State / province	Een lijst met de staten of provincies van het land dat is gekozen in het veld Country ervoor op de pagina. Het verschijnt zodra de koper een land met staten kiest en is een gewoon tekstvak als er geen veld Country voor staat.
	Dropdown	Een lijst om één keuze te kiezen, of meerdere met Allow multiple choices.
	Checkbox	Een enkel selectievakje, zoals “I agree to the terms”. Als het verplicht is, moet de koper het aanvinken.
	Checkboxes	Een lijst met keuzes waarvan de koper er zoveel kan aanvinken als hij of zij wil.
	Radio buttons	Een lijst om één keuze te kiezen, met een optionele keuze Other die de koper zelf typt.
	Date and time	Een datumkiezer, een tijd of beide.
	File upload	Een uploadvak. Standaard accepteert het PDF-, JPG-, JPEG- en PNG-bestanden tot 10 MB.
Company fields	Company name	Een tekstvak dat is opgeslagen als de bedrijfsnaam.
	Tax ID	Een tekstvak voor het belasting- of btw-nummer van het bedrijf. De btw-nummercontroles van de app lezen dit veld.
	Website	Een tekstvak voor de website van het bedrijf.
Document fields	Business license, Tax certificate, Tax registration, Reseller certificate	Een uploadvak. Het bestand wordt bij de aanvraag bewaard als dat type document. Zie Documenten.
Static text	Heading	Een titel met optioneel een bijschrift eronder.
	Paragraph	Opgemaakte tekst, zoals instructies.
	HTML	Je eigen HTML-opmaak.
	Divider	Een horizontale lijn.
Address blocks	Shipping address	Tien velden in één rij: Recipient / department, First name, Last name, Phone, Address line 1, Address line 2, City, Country, State / province en ZIP / postal code. Klik op Add all.
	Billing address	Een selectievakje Same as shipping address, daarna tien factuurvelden (Department / attention, Billing first name enzovoort) in een rij die verborgen is zolang het vakje is aangevinkt. Klik op Add all.
Layout	Row	Een lege rij om velden in te zetten. Zie Velden groeperen in rijen.

Om een enkel adresveld toe te voegen in plaats van een heel blok, klik je onder Address blocks op Show the individual address fields. De velden die een adresblok toevoegt, worden pas in Shopify opgeslagen als je ze koppelt. Zie Antwoorden koppelen aan Shopify.

Veldinstellingen

Klik op een veld in het voorbeeld of in het paneel Elements. De instellingen openen rechts in secties. Je ziet alleen de secties die bij dat soort veld horen.

Sectie	Instellingen
Content	Label, de vraag die de koper leest. Placeholder, de vage tekst in een leeg vak. Help text, getoond onder het veld. Default, een antwoord dat is ingevuld wanneer het formulier opent (bij een enkele Checkbox: Ticked by default).
Options	Voor Dropdown, Checkboxes en Radio buttons. Klik op Add option of Change om de keuzes te bewerken: typ het Label van elke keuze, sleep om te herordenen, Add another option of Bulk add met één keuze per regel. Customer tags worden toegevoegd aan de Shopify-klant wanneer een koper die die keuze koos, wordt goedgekeurd (maximaal 40 tekens per tag). Zet Use the label as the value uit om iets anders op te slaan dan wat de koper leest. Een Dropdown heeft ook Allow multiple choices. Radio buttons hebben ook Other option, Other label en Other placeholder.
Upload	Voor File upload en documentvelden. Accepted: Only certain file types (geef ze dan op in File types) of Any file type. Max size: 1 tot 20 MB. Allow more than one file.
Phone number	Show country flag and dial code. Als dat aanstaat: Check the number is valid en Default country (From the buyer’s browser tenzij je er een kiest).
Date and time	Asks for: Date, Time of Date and time. Date format, Time format, Other language voor de datumkiezer en Limit the range met Earliest en Latest.
Validation	Required. Als dat aanstaat, Error message, getoond als het veld leeg blijft. Typ {{ label }} om het label van het veld op te nemen. Limit characters met Min characters en Max characters, voor Short text, Long text, Email, Phone en Tax ID. Laat een grens leeg voor geen grens.
Layout	Icon, getekend aan het begin van het vak (niet voor Checkbox, Checkboxes, Radio buttons of uploads). Hide label, met Keep the label’s space en Still show the required mark. Column width, van 1 tot 12. Number of options per line, van 1 tot 5, voor Checkboxes en Radio buttons.
Visibility	Conditional display: toon, verberg, verplicht of schakel het veld uit op basis van eerdere antwoorden. Zie Velden tonen, verplichten of uitschakelen met regels.
Custom CSS	Custom CSS class, een klassenaam waarmee je kunt stylen met de CSS van je eigen thema. Alleen gewone klassenamen blijven behouden.

Bij Dropdown, Country en State / province is de placeholder de eerste regel van de lijst, standaard Select…. Als je hem leegmaakt, komt Select… terug.

Statische tekst heeft minder instellingen. Een Heading heeft de tekst in Label, plus Caption en Heading tag (Heading 1 tot Heading 6). Een Paragraph heeft Text en HTML heeft Markup. Hun Label is alleen de naam die je ziet in het paneel Elements. Alle statische tekst heeft ook Column width, Visibility en Custom CSS.

De instellingen van een veld zijn gegroepeerd in secties, van wat de koper leest tot wanneer het veld verschijnt.

Velden rangschikken

Een veld verplaatsen

• In het paneel Elements: sleep een veld aan de greep. Zet het neer op een ander veld om het erboven of eronder te plaatsen, op de naam van een pagina om het naar het eind van die pagina te verplaatsen, of op de naam van een rij om het in die rij te zetten.
• In het voorbeeld: klik op een veld en sleep het aan de greep links in de werkbalk (Drag to move this field). Zet het neer op de boven- of onderrand van een ander veld om het erboven of eronder te plaatsen. Zet het neer op de linker- of rechterrand om de twee naast elkaar in een rij te zetten.

Kolombreedtes instellen

Breedtes worden geteld uit 12 kolommen en elk nieuw veld begint op 12, de volle breedte. Velden die op elkaar volgen, delen een regel als hun breedtes passen, dus twee velden van 6 staan naast elkaar en drie van 4 maken drie kolommen.

• Sleep Layout › Column width in de instellingen van het veld, of
• Klik in het voorbeeld op Change width in de werkbalk van het geselecteerde veld. Het schakelt door een derde, de helft en de volle breedte.

Als het formulier smaller is dan 480 pixels, bijvoorbeeld op een telefoon, neemt elk veld de hele regel.

Velden groeperen in rijen

Een rij houdt velden bij elkaar en kan ze openen met een kop: een label en een beschrijving boven de velden. Je kunt een hele rij in één keer tonen, verbergen of verplaatsen.

Om een rij te maken, doe je een van deze dingen:

• Open de veldenlijst en klik onder Layout op Row. Er verschijnt een lege rij in het paneel Elements. Klik erin op Add element om velden toe te voegen.
• Open de veldenlijst en klik op Select fields (getoond als de pagina twee of meer velden buiten rijen heeft). Vink de velden aan in het paneel Elements en klik op Group into row.
• Voeg een veld links of rechts van een ander toe, of zet er een naast een ander neer in het voorbeeld.

Klik op de naam van de rij in het paneel Elements om de instellingen te openen:

Instelling	Wat ze doet
Label	De titel van de rij. Kopers zien hem boven de velden van de rij.
Hide the heading block	Verbergt het label en de beschrijving voor kopers. Ze blijven bewaard en komen terug als je dit uitzet.
Description	Tekst onder het label.
Icon	Een pictogram naast het label.
Conditional display	Toon of verberg de hele rij op basis van eerdere antwoorden. Zie Velden tonen, verplichten of uitschakelen met regels.
Ungroup row	Breekt de rij op. De velden blijven op de pagina staan.

In het paneel Elements verbergt het oogpictogram van de rij alle velden ervan en kopieert Duplicate row de rij. Om één veld uit een rij te halen, selecteer je het veld en klik je op Remove from row.

Het formulier Wholesale application gebruikt rijen met een verborgen kopblok, omdat elke sectie al begint met een veld Heading.

Meerdere pagina’s gebruiken

1. Een pagina toevoegen

   Klik onderaan het paneel Elements op Add page. Er wordt een pagina met de naam Untitled page 2 toegevoegd en de instellingen ervan openen. Typ een nieuwe Page name en druk op Enter.

2. Pagina’s omzetten in stappen

   Klik in het paneel Elements op Content en zet Show step progress bar aan. Kies Step labels: Name and number, Name only of Number only.

   Kopers zien nu één pagina tegelijk met bovenaan een stappenbalk. Elke pagina eindigt met een knop Continue die de antwoorden van de pagina controleert voordat ze doorgaan, en de laatste pagina eindigt met de verzendknop. Zonder de stappenbalk worden alle pagina’s na elkaar getoond in één formulier.

3. Kiezen of kopers terug kunnen gaan

   Elke stap na de eerste heeft een knop Back, omdat Let buyers go back a step standaard aanstaat. Om dat te wijzigen, klik je in het paneel Elements op Footer. Zet Let buyers go back a step uit om de knop te verwijderen, of wijzig Back label. Deze instellingen verschijnen alleen als de stappenbalk aanstaat en het formulier twee of meer pagina’s heeft.

Klik op de naam van een pagina in het paneel Elements voor de instellingen ervan:

Instelling	Wat ze doet
Page name	De naam van de pagina in de bouwer en in de stappenbalk.
Hide the heading block	Laat de pagina bij het eerste veld beginnen. De kop en de beschrijving blijven bewaard voor later.
Heading en Description	Getoond bovenaan de pagina.
Continue button label	De tekst van de knop Continue van de pagina. Niet getoond op de laatste pagina.
Icon	Vervangt het nummer van deze stap in de stappenbalk. Alleen getoond als de stappenbalk aanstaat.
Header and footer	Use custom header en Use custom footer geven deze stap een eigen koptekst en opmerking. Zolang kopers terug kunnen gaan, heeft de aangepaste footer ook Show Back button on this step. Alleen getoond als de stappenbalk aanstaat.
Visibility	Toon of verberg de hele pagina op basis van antwoorden op eerdere pagina’s.
Delete page	Verwijdert de pagina en de velden ervan. Een formulier heeft minstens één pagina nodig en de pagina met het veld Email kan niet worden verwijderd totdat je dat veld verplaatst.

Header en footer

Klik bovenaan het paneel Elements op Header, of op de kop in het voorbeeld:

• Show store logo, daarna Upload image: een .jpg-, .png- of .svg-bestand tot 1 MB, ongeveer 200×60 pixels.
• Heading en Subheading bovenaan het formulier.
• Show this block om de hele header te tonen of te verbergen.

Klik onderaan het paneel Elements op Footer, of op de knoppen in het voorbeeld:

• Submit label, de tekst van de verzendknop.
• Reset button en Reset label, een knop die het formulier leegmaakt.
• Full-width buttons, of Alignment: Left, Center of Right.
• Note, tekst die bij de knoppen wordt getoond, en Put the note above the buttons.

Een veld verbergen, kopiëren of verwijderen

• Hide this block (het oogpictogram in het paneel Elements of op de werkbalk van het veld) haalt het veld van het formulier voor kopers, maar bewaart het met de instellingen in de bouwer. Het veld verdwijnt uit het voorbeeld en is grijs in het paneel Elements. Klik daar op het oog om het terug te halen.
• Duplicate field plaatst een kopie direct na het veld en selecteert die.
• Remove field (op de werkbalk of onderaan het instellingenpaneel) verwijdert het veld wanneer je opslaat.

Het formulier bekijken

• Desktop preview en Mobile preview wisselen de breedte van het voorbeeld.
• De inspectorknop (het doelwitpictogram) schakelt tussen bewerken en testen. De inspector staat aan als de bouwer opent en de knop zegt Deactivate inspector: klikken selecteert dingen om te bewerken en regels worden niet uitgevoerd, dus een veld dat een regel zou verbergen, wordt toch getoond. Klik erop om de inspector uit te zetten en het voorbeeld in te vullen als een koper: regels worden uitgevoerd en Continue en de verzendknop controleren je antwoorden. Er wordt niets verstuurd. Klik opnieuw (Activate inspector) om terug te gaan naar bewerken. De sneltoets is ⌘ Shift I op Mac of Ctrl Shift I op Windows.
• Language toont het formulier in een taal waarin je het hebt vertaald. Woorden die nog niet zijn vertaald, worden in het Engels getoond. Om te vertalen, kies je Translate this form via … (More actions), wat Vertalen opent.
• Preview (het oogpictogram) opent de pagina van het formulier in je webshop in een nieuw tabblad. Het werkt zodra het formulier is opgeslagen en gepubliceerd.

Je wijzigingen opslaan

Klik in de opslagbalk op Save. Er verschijnt een melding Form saved en als het formulier Active is, krijgen kopers de nieuwe versie meteen. Discard gooit alles weg sinds de laatste keer opslaan.

Als er iets moet worden opgelost, wordt het opslaan geweigerd en toont een banner bovenaan het voorbeeld elk probleem, zoals Enter a form name of twee velden die in hetzelfde Shopify-veld worden opgeslagen. Eindigt een regel met een pijlknop, klik er dan op om direct naar het veld of de instelling te gaan.

Volgende stappen

• Velden tonen, verplichten of uitschakelen met regels: stel een vraag alleen als een eerder antwoord daarom vraagt.
• Antwoorden koppelen aan Shopify: kies waar elk antwoord bij goedkeuring wordt opgeslagen.
• Het formulier vormgeven: laat het formulier aansluiten op het uiterlijk van je winkel.
• Een formulier maken en publiceren: publiceer het formulier en controleer het in je webshop.