Een standaardformulier bouwen

Hier loop je het hele formulier door, in de volgorde waarin de editor het presenteert.

1. De Customize-editor openen

   Ga naar Quote settings. Zoek op de pagina Request a Quote de kaart Customize en klik op Customize. De editor wordt op volledig scherm geopend.

2. Het tabblad Quote form openen

   De editor heeft vier tabbladen: Button & widget, Quote form, Quote cart page en Success message. Open Quote form.

3. Beginnen met een sjabloon

   Form template toont het sjabloon waarop je formulier is gebouwd, met een korte beschrijving voor wie het geschikt is.

   Klik op Change. Er wordt een kiezer geopend met de kop Choose a form template en de opmerking “Select a starting point. The form fields will change only after you confirm.” Er zijn er drie:

   Sjabloon	Hoe de app het omschrijft	Label
   Simple quote form	"Best for most stores. Includes login autofill, contact details, company, quantity, request message, and file upload."	Fast setup · 7 fields
   Detailed quote form	"For custom orders, delivery, installation, or project-based quotes. Includes login autofill guidance."	More details · 14 fields
   B2B customer form	"For wholesale or business buyers who need company, shipping, billing, and payment term information"	B2B

   Kies het sjabloon waarvan de beschrijving past bij het werk waarvoor je offreert en klik dan op Use this template om te bevestigen. Met Cancel blijft je huidige formulier ongemoeid. Doe dit nu, voordat je velden gaat bewerken.

   

   Begin met een sjabloon in plaats van een leeg formulier.

   Opgepast

   Als je een ander sjabloon kiest, vervangt dat de huidige veldenlijst. De secties en velden op het scherm worden vervangen door die van het nieuwe sjabloon, dus elke sectie die je hebt toegevoegd, elk veld dat je hebt hernoemd en alles wat je hebt verwijderd, gaat mee. Kies eerst het sjabloon en pas daarna aan.

4. Beslissen of het formulier op productpagina’s verschijnt

   Vink onder Product page form display — “Show the quote form directly on product pages” — Enable product page form display aan als je wilt dat klanten het formulier invullen zonder het product te verlaten.

   Als je het aanvinkt, verschijnt Form position on product page, een keuzelijst met drie opties:

   Positie	Waar het formulier terechtkomt
   Below Add to Cart button	Hoog op de pagina, direct onder de koopknoppen: de meest zichtbare optie.
   Below product description	Na de verkooptekst, voor een koper die die heeft gelezen.
   Below product information	Aan het einde van het blok met productinformatie.

   

   Zet deze instelling uit als je liever hebt dat klanten eerst een offertewagen samenstellen.

5. De Form builder doorlopen

   De Form builder — “Manage sections, rows, fields, and validation with the visual form builder” — bevat je vragen, gegroepeerd in secties. Welke secties er zijn, hangt af van het sjabloon dat je zojuist hebt gekozen:

   Sjabloon	Secties in de builder
   Simple quote form	Contact information · Extra info
   Detailed quote form	Contact information · Shipping address · Extra info
   B2B customer form	Contact information · Company information · Shipping address · Billing address · Payment terms · Extra info

   Drie dingen die je met een sectie kunt doen:

   • In- of uitschakelen. Open de instellingen van de sectie en vink Enable aan of uit. Een uitgeschakelde sectie wordt niet aan de klant getoond, hoeveel velden hij ook bevat.
   • Hernoemen. Hetzelfde instellingenpaneel heeft een Label. Wijzig dat in wat je kopers het zouden noemen.
   • Verplaatsen. Sleep de sectie aan zijn handgreep om het formulier opnieuw te ordenen.

   Klap een sectie uit met zijn pijltje om de velden erin te zien en gebruik Add element om nog een veld aan die sectie toe te voegen.

   Contact- en adresvelden worden behandeld in Klantgegevensvelden; bedrijf, facturering en betalingsvoorwaarden in Een B2B-formulier bouwen.

   Opmerking

   Grijze besturingselementen in de builder met een slotregel die luidt “🔐 This feature is available on …” betekenen dat de functie in een hoger abonnement zit. Er is niets kapot. Open Pricing plans in de app om te zien wat je abonnement bevat.

6. Een veld bewerken

   Klik op een veld in de builder en de eigen instellingen ervan worden geopend, met de naam van het veld en “Customize how this field appears on the form.” als kop.

   Instelling	Wat het doet
   Label	De tekst die de klant leest. Dit is de instelling die winkeliers het vaakst wijzigen.
   Hide label	Behoudt het veld maar laat het label erboven weg.
   Placeholder	De grijze voorbeeldtekst in het lege vak. Gebruik het voor het gewenste formaat: "e.g. 500 units" is beter dan een leeg vak.
   Help text	Een regel onder het veld, voor alles wat te lang is voor een placeholder.
   Type	Wat voor soort veld het is en wat de klant erin kan typen.
   Required	Het formulier kan zonder dit niet worden verzonden. Vraag zo weinig mogelijk verplichte velden als je kunt missen.
   Options / Add option	De keuzes bij een keuzelijst, een groep keuzerondjes of een groep selectievakjes.
   Choose default value	Waarmee het veld begint wanneer het formulier laadt.
   Limit characters	Schakelt Min characters en Max characters in.
   Column width	Hoeveel van de rij het veld inneemt, zodat twee korte velden naast elkaar kunnen staan.
   Custom HTML class	Een klassenaam voor je eigen CSS. Zie Eigen CSS toevoegen.
   Remove	Verwijdert het veld. Dit geldt alleen voor je eigen velden: de ingebouwde contact- en adresvelden zijn beschermd en hebben geen Remove.

   

   Klik op elk element en stel het verder in (indien nodig)

   Sluit af met Save changes in het veldpaneel, of Cancel om de bewerking te laten vallen.

   Opgepast

   Limit characters wordt tijdens het typen gevalideerd: Min characters en Max characters moeten elk een geheel getal van 0 of hoger zijn en het minimum mag niet groter zijn dan het maximum. Als het niet klopt, blokkeert de editor het opslaan.

7. De velden in de gewenste volgorde zetten

   Velden orden je door te slepen. Pak een veld bij de sleephandgreep aan het linkeruiteinde van de rij en zet het neer waar je het wilt hebben. Secties hebben hun eigen sleephandgreep en verplaats je op dezelfde manier.

   De volgorde is belangrijker dan het lijkt: een formulier dat om een bezorgpostcode vraagt voordat het om een naam vraagt, leest als een database, niet als een gesprek.

   

   Sleep het element om de positie of volgorde in het offerteformulier te wijzigen

8. Je eigen vragen toevoegen

   Extra info begint met wat je sjabloon er neerzet, en dat verschilt per sjabloon. Het Simple quote form komt met Quantity en Upload files, het Detailed quote form met Project detail en Delivery service en het B2B customer form met Message.

   Gebruik Add element om alles toe te voegen wat je verder nodig hebt: levertijd, bezorgdatum, projectreferentie.

   Als een groep vragen bij elkaar hoort en niet in een bestaande sectie past, gebruik dan Add section om een nieuwe te maken.

   Gevaar

   Eén veld is niet optioneel: het formulier moet een element bevatten waarvan de naam het woord email bevat. De app blokkeert het opslaan en meldt dat: Add an element whose name contains “email”. Otherwise, customers won’t receive the quote email. Zonder dit bereikt niets wat je offreert ooit de klant.

   

   Klik op Add element om meer eigen velden aan het offerteformulier toe te voegen

   

9. Het formulier opmaken

   Style toont de voorinstelling die je formulier gebruikt, met een knop Change die de rest opent. De voorinstellingen zijn Material filled, Classic, Flat, Flat round, Classic round, Line, Line round en Material outlined, elk getoond als een klein plaatje van het invoerveld, dus kies op het oog in plaats van op naam.

   Ernaast staat Match theme styling if possible. Vink het aan en het formulier leent in plaats daarvan de eigen lettertypen en invoervelden van je thema, wat meestal de kortste weg is naar een formulier dat er niet bijgeplakt uitziet. De app merkt op dat “Theme styling applies on your storefront and is not shown in this preview”, dus beoordeel dit in je webshop, niet hier.

   Met Customize text stel je de Font style, de Title bar font size en de Title bar font weight in. Met Customize form color stel je de afzonderlijke kleuren in: Title bar color, Title bar background, Color, Background color, Border color, Button color, Button background color, Button border en Quote popup primary color.

   

   Alle details: Je thema-stijl overnemen.

10. Het formulier teruglezen in Preview

    Het paneel Preview staat naast de editor en wordt opnieuw getekend terwijl je werkt. Twee besturingselementen op de werkbalk zijn de moeite waard om te gebruiken voordat je opslaat:

    • De knop voor de klantstatus, die de preview wisselt tussen Guest en Logged-in. Ze zien verschillende formulieren.
    • De schakelaar voor desktop en mobiel, want een lang formulier is op een telefoon iets heel anders.

11. Opslaan en zelf testen

    Zodra je iets wijzigt, verschijnt de opslagbalk van Shopify met Save en Discard changes. Klik op Save. Als een veld nog een validatiefout heeft, weigert de editor en meldt “Please resolve validation errors before saving.” Herstel het veld dat wordt genoemd en sla opnieuw op.

    Ga daarna naar je webshop en verstuur een echte testaanvraag. Controleer of die in Quote list aankomt met alles wat je verwachtte.

    

    Het formulier in de webshop, met Quote form appearance ingesteld op Multiple step.

Opmerking

Het sjabloon bepaalt je beginpunt, niet je plafond. Alles wat het sjabloon meebrengt, kun je bewerken of verwijderen, en alles wat het weglaat, kun je toevoegen met Add element of Add section. Bedenk alleen dat later van sjabloon wisselen een herstart is in plaats van een bewerking: het vervangt de veldenlijst die je hebt gebouwd.

Opgepast

Verstuur altijd zelf een testaanvraag voordat je live gaat. Alleen zo weet je zeker dat de velden, de e-mail en het offerterecord op elkaar aansluiten.

Waar de rest van de instellingen staat

Het tabblad Quote form bevat alleen de vragen. Verschillende dingen waar winkeliers hier naar zoeken, staan op de andere tabbladen van dezelfde editor:

Wat je wilt	Tabblad	Wat je vindt
Het formulier als één pagina of in stappen	Quote cart page	Quote form appearance — "Controls how the quote form looks on the quote cart page" — ingesteld op Multiple step of Single page.
Wat de productrijen tonen	Quote cart page	Product list columns — "The product details shown as columns in the customer's quote cart" — zie Groep offerteproducten.
Klanten producten laten groeperen	Quote cart page	Enable Quote Sections — "Lets customers group the products in their quote cart into named sections" — zie Groep offerteproducten.
De tekst en plaatsing van de knop	Button & widget	Knoptekst, klikactie, knoppositie en wie hem kan zien.
Wat er gebeurt na het verzenden	Success message	De bedanktekst en Redirect to custom URL.

Opmerking

De editor waarschuwt je hier zelf voor als je tijdens het bewerken tussen tabbladen probeert te wisselen: “Save your changes before switching tabs to avoid losing them.”

Volgende stappen

• Klantgegevensvelden — stem af wat je vraagt
• Groep offerteproducten — productkolommen en offertesecties op de pagina van de offertewagen
• reCAPTCHA toevoegen — bescherm het formulier tegen spam
• Een B2B-formulier bouwen — het sjabloon voor zakelijke kopers