Websites & Trechters: Het nieuwe bestelformulier instellen en aanpassen

Met het vernieuwde bestelformulier (Order Form) in Voluit Suite maak je een checkout voor je trechters en websites die past bij je huisstijl. Je kunt binnen hetzelfde element wisselen tussen een indeling met één stap, twee stappen of twee kolommen. Je hoeft je checkout dus niet opnieuw op te bouwen.

Je kunt ook aangepaste CRM-velden toevoegen, producten en extra aanbiedingen tijdens het afrekenen instellen en de vormgeving aanpassen. In dit artikel lees je hoe je het nieuwe bestelformulier instelt en hoe je bestaande bestelformulieren overzet wanneer je daar klaar voor bent.

Wat is het nieuwe bestelformulier?

Het nieuwe bestelformulier is één checkout-element waarmee je klantgegevens verzamelt, producten toont en betalingen ontvangt. Je hebt geen aparte elementen meer nodig voor een formulier met één of twee stappen: je kiest binnen hetzelfde element uit drie indelingen en kunt die later wijzigen.

Je beheert contactvelden, producten, extra aanbiedingen, checkout-instellingen, teksten en vormgeving op één plek. Naast de instellingen zie je een livevoorbeeld van je wijzigingen. Zo hoef je niet steeds tussen verschillende panelen te wisselen.

Met ondersteunde aangepaste CRM-velden verzamel je aanvullende klantgegevens. Voor het bestelformulier en de extra aanbiedingen zijn aparte instellingen voor de vormgeving beschikbaar.

De voordelen van het nieuwe bestelformulier

Je bepaalt hoe klanten afrekenen en hoe de checkout aansluit op je huisstijl. Omdat je de indeling, velden, producten en vormgeving op één plek beheert, kun je wijzigingen doen zonder je formulier opnieuw op te bouwen.

Drie indelingen: wissel tussen één stap, twee stappen en twee kolommen. Je instellingen voor velden, producten, teksten en vormgeving blijven behouden.
Alle instellingen op één plek: beheer de checkout, teksten, producten en vormgeving met een livevoorbeeld ernaast.
Aangepaste CRM-velden: verzamel tijdens het afrekenen extra klantgegevens met de ondersteunde veldtypen.
Uitgebreide vormgeving: kies uit zes vooraf ingestelde ontwerpen en pas meer dan 80 vormgevingsinstellingen aan.
Aparte vormgeving voor extra aanbiedingen: geef deze aanbiedingen een eigen ontwerp, los van het hoofdformulier.
Flexibel productbeheer: voeg producten toe, stel aantallen in, toon productinformatie en bepaal of klanten coupons kunnen gebruiken.
Aanpasbare teksten: wijzig veldlabels, voorbeeldteksten in velden, foutmeldingen, knoppen en andere teksten die je klanten zien.
Optioneel overstappen: zet bestaande bestelformulieren die hiervoor geschikt zijn afzonderlijk over. Je andere formulieren blijven ongewijzigd.

Het nieuwe bestelformulier instellen

Stel de indeling, klantvelden en producten in voordat je de checkout publiceert. Controleer daarna altijd de gepubliceerde pagina, zodat je weet of alles werkt zoals bedoeld.

De nieuwe bestelformulieren activeren

Het vernieuwde bestelformulier zet je aan in Labs. Ga naar Instellingen (Settings) → Labs en zet de functie voor de nieuwe bestelformulieren aan.

Stap 1: een bestelformulier aan je pagina toevoegen

Open het juiste account.
Ga naar Sites → Trechters (Funnels) of open de websitebouwer.
Open de trechter of website met je checkoutpagina.
Selecteer de pagina die je wilt bewerken.
Open de paginabouwer.
Klik op Elementen toevoegen (Add Elements).
Zoek het element Bestelformulier en voeg het toe.
Selecteer het element en klik op Bestelformulier aanpassen (Customize order form).

Je opent nu de omgeving waarin je de checkout instelt.

Stap 2: de indeling van je checkout kiezen

Open Stappen (Steps) in de instellingen van het bestelformulier.
Kies een indeling:

Eén stap (One-step): alle onderdelen op één scherm.
Twee stappen (Two-step): eerst contactgegevens, daarna de betaling.
Twee kolommen (Split): het formulier en het overzicht van je aanbod naast elkaar.

Bekijk de indeling in het livevoorbeeld.
Wissel zo nodig van indeling totdat deze past bij je checkout.

Je ingestelde velden, producten, extra aanbiedingen, teksten en vormgeving blijven behouden als je van indeling wisselt.

Stap 3: contactvelden instellen

Open Contactvelden (Contact fields).
Bekijk de standaardcontactvelden.
Toon of verberg de velden waarvoor dat mogelijk is.
Stel waar mogelijk in welke velden verplicht zijn.
Pas de volgorde van de velden aan.
Kies per veld voor volledige of halve breedte.
Voeg via de veldkiezer ondersteunde aangepaste CRM-velden toe.
Controleer het aangepaste formulier in het voorbeeld.

Volledige naam en e-mailadres blijven verplicht. Bestaat een aangepast veld dat je nodig hebt nog niet in je CRM? Maak het dan eerst aan via Instellingen (Settings) → Aangepaste velden (Custom Fields). Daarna kun je het selecteren in het bestelformulier.

Stap 4: producten instellen

Open Producten (Products).
Zoek de producten en prijzen die je wilt aanbieden.
Voeg de gewenste producten toe.
Controleer de productregels.
Bewerk, dupliceer, verplaats of verwijder productregels waar nodig.
Stel zo nodig in dat klanten meerdere exemplaren kunnen bestellen.
Stel het maximale aantal in.
Kies of je productafbeeldingen en beschrijvingen wilt tonen.
Stel zo nodig in dat klanten meerdere producten kunnen selecteren.
Schakel het invoerveld voor coupons in als klanten geldige kortingscodes moeten kunnen gebruiken.

Let op: wijzigingen aan producten van een trechterstap kunnen invloed hebben op andere bestelformulieren binnen diezelfde stap. Controleer de bestaande producten voordat je iets aanpast.

Stap 5: extra aanbiedingen instellen

Met een extra aanbieding (Order bump) bied je tijdens het afrekenen een aanvullend product aan.

Open Extra aanbieding.
Stel het product in dat je als aanvullende aankoop wilt aanbieden.
Vul de kop van de aanbieding in.
Voeg een toelichting toe.
Stel zo nodig een afwijkende afbeelding in.
Bepaal of de aanbieding bij het openen van de checkout al is geselecteerd.
Kies een van de vooraf ingestelde ontwerpen.
Pas de vormgeving aan met de aparte instellingen voor extra aanbiedingen.
Controleer de aanbieding in het checkoutvoorbeeld.

Stap 6: checkoutopties instellen

Open Checkoutopties (Checkout options).
Bekijk de beschikbare instellingen voor het afrekenen.
Stel de gewenste opties in, zoals coupons, voorwaarden en andere ondersteunde checkoutopties.
Controleer of de instellingen passen bij je producten en de manier waarop je klanten wilt laten afrekenen.

Controleer deze instellingen zorgvuldig voordat je publiceert, vooral als je checkout abonnementen, kortingen, belastingen of extra aankoopopties bevat.

Stap 7: de teksten van je checkout aanpassen

Open Inhoud (Content).
Pas de koppen en toelichtingen van de stappen aan.
Wijzig veldlabels en voorbeeldteksten in de velden.
Pas foutmeldingen bij ongeldige of ontbrekende invoer aan.
Wijzig de labels in het productoverzicht en teksten over de betaling.
Pas de tekst op de afrekenknop aan.
Gebruik je de indeling met twee stappen? Pas dan ook de teksten voor het wisselen tussen de stappen aan.
Controleer alle teksten in het voorbeeld.

Gebruik korte, duidelijke teksten, zodat klanten weten wat ze bij elke stap moeten doen.

Stap 8: een thema kiezen en de vormgeving aanpassen

Open Thema en stijl (Theme & style).
Kies een vooraf ingesteld thema.
Stel je huisstijlkleuren in.
Pas de typografie en de vormgeving van de invoervelden aan.
Wijzig de knoppen, productweergave en stapindicatoren.
Pas waar mogelijk de afmetingen, tussenruimte en uitlijning per apparaat aan.
Controleer het resultaat in het livevoorbeeld.
Ga terug naar de vormgevingsinstellingen van de extra aanbieding als je die apart wilt aanpassen.

Stap 9: opslaan, publiceren en testen

Sla de instellingen van je bestelformulier op.
Sla de checkoutpagina op en publiceer deze.
Open de gepubliceerde pagina.
Controleer of de juiste indeling wordt getoond.
Controleer of de standaardvelden en aangepaste velden goed worden weergegeven.
Bekijk de productkeuze, prijzen en instellingen voor aantallen.
Test of coupons en extra aanbiedingen werken zoals bedoeld.
Controleer de verplichte velden en het wisselen tussen de checkoutstappen.
Test het afrekenen volgens de testprocedure van je betaalprovider.
Controleer de checkout op desktop en mobiel.

Let op: het voorbeeld in de bouwer toont tijdelijke betaalvelden en berekent totalen lokaal. Controleer daarom altijd de gepubliceerde checkout en vertrouw niet alleen op de bedragen in het voorbeeld.

De indelingen van het bestelformulier

Het nieuwe bestelformulier heeft drie indelingen. Daarmee bepaal je hoe klanten hun contactgegevens, betaalgegevens en productoverzicht zien tijdens het afrekenen.

Eén stap

Bij deze indeling staat het hele afrekenproces op één scherm. Klanten vullen hun contactgegevens in, controleren hun producten en betalen zonder tussen checkoutstappen te wisselen.

Deze indeling past als je alle benodigde informatie bij elkaar wilt tonen en het aankoopproces overzichtelijk wilt houden.

Twee stappen

Deze indeling verdeelt het afrekenen over twee stappen:

Stap 1: de klant vult contactgegevens in. Het formulier controleert deze gegevens.
Stap 2: de klant gaat naar de betaling en rondt de aankoop af.

De contactgegevens uit de eerste stap worden meegenomen naar de betaalstap. Deze indeling past als je klanten eerst hun gegevens wilt laten invullen voordat ze betalen.

Twee kolommen

Bij deze indeling staan het bestelformulier en het overzicht van je aanbod naast elkaar. Klanten kunnen zo de productinformatie bekijken terwijl ze het formulier invullen.

Wordt het element te smal? Dan komen de kolommen automatisch onder elkaar te staan.

Let op: je kunt van indeling wisselen zonder het bestelformulier opnieuw te maken. De ingestelde velden, producten, extra aanbiedingen, teksten en vormgeving blijven behouden.

Contactvelden en aangepaste CRM-velden

Met contactvelden bepaal je welke klantgegevens je tijdens het afrekenen verzamelt. Je kunt standaardvelden aanpassen en ondersteunde aangepaste CRM-velden toevoegen voor informatie die relevant is voor je bedrijf of aanbod.

Standaardcontactvelden

Het bestelformulier ondersteunt negen standaardvelden:

Volledige naam (Full Name)
E-mailadres (Email)
Telefoonnummer (Phone)
Bedrijf (Company)
Adres (Address)
Plaats (City)
Staat/provincie (State/Province)
Postcode (Postal Code)
Land (Country)

Voor de velden die dit ondersteunen, kun je het volgende instellen:

Zichtbaarheid: toon of verberg velden op basis van de gegevens die je wilt verzamelen.
Verplicht invullen: bepaal welke velden klanten moeten invullen om af te rekenen.
Volgorde: verplaats velden naar de gewenste plek in het formulier.
Breedte: toon velden op volledige of halve breedte.

Let op: volledige naam en e-mailadres zijn altijd verplicht om een bestelling te kunnen indienen. Adresvelden vormen samen een slimme adresgroep die de indeling aanpast aan de beschikbare breedte.

Aangepaste CRM-velden

Met aangepaste CRM-velden verzamel je informatie die niet in de standaardvelden past. Denk aan een gewenste datum voor een dienst, aanvullende instructies of informatie over het product dat de klant koopt.

Het bestelformulier ondersteunt de volgende typen aangepaste CRM-velden:

Tekst
Getal
Telefoonnummer
Geldbedrag
Lang tekstveld
Datum
Keuzevelden
Bestand uploaden
Handtekening

Je voegt deze velden toe via de veldkiezer in de instellingen van het bestelformulier. De instellingen van de velden, zoals keuzelijstopties en andere vooraf ingestelde waarden, beheer je in het CRM. Het bestelformulier gebruikt die instellingen om de velden aan klanten te tonen.

Producten en checkoutopties

Met de productinstellingen bepaal je wat klanten kunnen kopen en hoe je productinformatie tijdens het afrekenen toont. Je beheert de productkeuze, aantallen, weergave en het invoeren van kortingen. Bestaande checkoutfuncties blijven beschikbaar.

Productbeheer

Bij de productinstellingen beheer je de producten en prijzen van je checkout. Je kunt:

Producten en prijzen zoeken en toevoegen.
Bestaande productregels bewerken.
Productregels dupliceren.
De volgorde van producten wijzigen.
Producten verwijderen.
Klanten meerdere exemplaren laten bestellen.
Een maximaal aantal instellen.
Productafbeeldingen tonen of verbergen.
Productbeschrijvingen tonen of verbergen.
Het selecteren van meerdere producten in- of uitschakelen.

Let op: producten zijn gekoppeld aan de trechterstap, niet aan een afzonderlijk bestelformulier. Een wijziging aan de producten van een trechterstap kan dus invloed hebben op alle bestelformulieren in die stap.

Checkoutopties

Met checkoutopties bepaal je hoe klanten je formulier gebruiken en hun aankoop afronden. Het vernieuwde bestelformulier behoudt de ondersteunde checkoutfuncties, waaronder:

Kortingscodes
Belastingen
Cadeaubonnen
Terugkerende prijzen
Contactgegevens onthouden (Sticky Contact)
Algemene voorwaarden (Terms and Conditions)
Doorsturen na aankoop

Je kunt het invoerveld voor coupons in- of uitschakelen. Wil je dat klanten korting kunnen toepassen? Maak dan de bijbehorende coupons aan in Voluit Suite en stel in wanneer ze geldig zijn.

Extra aanbiedingen tijdens het afrekenen

Met een extra aanbieding bied je een aanvullend product aan tijdens het afrekenen. Het vernieuwde bestelformulier heeft hiervoor aparte vormgevingsinstellingen. Zo pas je de aanbieding aan zonder de vormgeving van het hoofdformulier te wijzigen.

Thema's en vormgeving

Met thema's bepaal je de uitstraling van je bestelformulier: kleuren, typografie, knoppen, invoervelden, tussenruimte en productweergave. Je kunt beginnen met een vooraf ingesteld thema en dit daarna aanpassen aan je huisstijl.

Let op: het voorbeeld in de bouwer is bedoeld om de vormgeving in te stellen. Betaalvelden worden als tijdelijke velden getoond en totalen worden lokaal berekend. De bedragen in het voorbeeld kunnen daardoor afwijken van de gepubliceerde checkout.

Teksten in het bestelformulier aanpassen

Duidelijke checkoutteksten helpen klanten begrijpen wat ze moeten invullen, wat ze kopen en hoe ze hun bestelling afronden. Via de inhoudsinstellingen pas je deze teksten aan zonder aangepaste code te gebruiken.

Gebruik duidelijke labels en korte instructies. Zo weten klanten wat er nodig is voordat ze hun bestelling indienen.

Bestaande bestelformulieren overzetten

Bestaande bestelformulieren blijven werken. Je hoeft ze niet over te zetten naar de nieuwe versie. Voor bestaande elementen die hiervoor geschikt zijn, kun je afzonderlijk overstappen naar het vernieuwde bestelformulier. Je bestaande checkoutinstellingen blijven daarbij behouden.

Het overzetten ongedaan maken

Het overzetten is één actie die je ongedaan kunt maken. Wil je de nieuwe versie niet houden? Gebruik dan Ongedaan maken (Undo) in de bouwer om het oorspronkelijke element terug te zetten.

Aandachtspunten voor aangepaste CSS

Aangepaste CSS-klassen en aangepaste CSS blijven behouden bij het overzetten. De onderliggende structuur van het vernieuwde bestelformulier is wel anders. CSS-selectors die specifiek voor de oude structuur zijn geschreven, werken daardoor mogelijk niet meer voor het nieuwe element.

Controleer en test je aangepaste CSS na het overzetten, zodat de gepubliceerde checkout goed wordt weergegeven.

Let op: overstappen is optioneel, gebeurt per geschikt element en heeft geen verplichte deadline. Bestelformulieren die je niet overzet, blijven met hun bestaande instellingen werken.

Veelgestelde vragen

V: Moet ik al mijn bestaande bestelformulieren overzetten om het nieuwe bestelformulier te gebruiken?

Antwoord: Nee. Je bestaande bestelformulieren blijven werken. Je kunt een nieuw bestelformulier maken en je bestaande formulieren ongewijzigd laten.

V: Kan ik een deel van mijn bestelformulieren overzetten en de rest laten staan?

Antwoord: Ja. Je zet geschikte elementen afzonderlijk over. Je kunt dus één bestelformulier overzetten terwijl je de andere formulieren met hun bestaande instellingen blijft gebruiken.

V: Wat als mijn aangepaste CSS er na het overzetten anders uitziet?

Antwoord: Het nieuwe bestelformulier heeft een andere onderliggende structuur. Je CSS en aangepaste klassen blijven behouden, maar selectors die naar de oude structuur verwijzen, moet je mogelijk aanpassen. Controleer na het overzetten de gepubliceerde checkout.

V: Waarom wijkt het totaal in het voorbeeld van de bouwer af van de gepubliceerde checkout?

Antwoord: De bouwer berekent de voorbeeldtotalen lokaal en neemt niet alle berekeningen van de livecheckout mee. Gebruik de gepubliceerde checkout om de werkelijke prijzen, belastingen en kortingen te controleren.

V: Waar pas ik de opties van een aangepaste keuzelijst aan?

Antwoord: Pas de opties aan in de instellingen van het aangepaste CRM-veld. Het bestelformulier neemt de opties over uit het CRM en beheert geen aparte keuzelijst.

V: Waarom heeft een productwijziging invloed op een ander bestelformulier in dezelfde trechterstap?

Antwoord: Producten zijn gekoppeld aan de trechterstap, niet aan een specifiek bestelformulier. Wijzigingen aan de producten in die stap kunnen daardoor invloed hebben op alle bestelformulieren die eraan zijn gekoppeld.

V: Kan ik extra aanbiedingen anders vormgeven dan de rest van de checkout?

Antwoord: Ja. Extra aanbiedingen hebben eigen vormgevingsinstellingen en vooraf ingestelde ontwerpen. Je kunt ze dus los van het hoofdformulier aanpassen.

V: Waarom zie ik het vernieuwde bestelformulier niet in de bouwer?

Antwoord: Controleer in Instellingen → Labs of de functie voor de nieuwe bestelformulieren aanstaat.

V: Raak ik mijn instellingen kwijt als ik van twee stappen naar twee kolommen wissel?

Antwoord: Nee. Je ingestelde velden, producten, extra aanbiedingen, teksten en vormgeving blijven behouden. Controleer na het wisselen wel of de nieuwe indeling past bij je checkout.