Custom formulieren
Introductie
Vrije formulieren kun je, in tegenstelling tot de standaard formulieren, helemaal zelf definiëren in de webeditor. Hiervoor zijn een aantal veld-typen beschikbaar. Deze zijn in de componenten-keuzelijst te vinden onder 'custom form'.
Je begint een vrij formulier altijd met de keuze voor een 'form' component. Bij dit formulier kun je instellen naar wie de resultaten per email verzonden worden, en wat het onderwerp van deze email zal zijn. Alle velden die je mee wilt sturen moet je binnen dit 'form' component opnemen.
Naast de velden in het voorbeeld-formulier zijn er nog verborgen velden en numerieke velden (met of zonder decimalen) beschikbaar.
Voorbeeld feedback formulier
Custom formulier maken
Bij het maken van een custom formulier gaat er som hier wel het een en ander mis. Hier leggen we verder uit hoe je op de juiste manier een custom formulier aanmaakt.
Het formulier opzetten
Om zelf een formulier te maken, klik je in de webeditor bij het kopje "custom form" op het component "form".
Vervolgens zie je het freeform component. Zoals hier rechts is afgebeeld.
Hier vul je het volgende in:
Action
Deze dient op email te blijven staan (dit kan je ook niet aanpassen).
Email_to
Hier vul je het mailadres in waar dit formulier naar verzonden dient te worden.
Email_to_name
Hier vul je de naam in van degene waar het mailadres naartoe gaat.
Email_cc
Je kan een mailadres in de cc toevoegen. Je klikt dan op het knopje aan de rechterkant en dan komt er een + tevoorschijn. Je vult hier dan vervolgens de gegevens in van de persoon die in de cc staat. Voor elke persoon moet je een item aanmaken en het mailadres en naam invullen.
Email_bcc
Dit werkt hetzelfde als email_cc.
Het verschil tussen cc en bcc is dat als iemand in de cc staat, je dit in de mail kan zien. Als iemand in de bcc staat, dan zie je dit niet in de mail staan.
Email_subject
Hier vul je het onderwerp van de mail in.
Key
Hier geef je een unieke waarde van het formulier mee.
Als je bijvoorbeeld meerdere formulieren op een pagina hebt staan, dan wordt het juiste formulier meegestuurd. Geef je geen unieke waarde mee, dan kunnen er fouten optreden.
Classes
Je zou de class in-flow mee kunnen geven, maar dit staat over het algemeen op - no value -
Success_feedback
Hier geef je de melding welke getoond wordt wanneer het formulier verzonden wordt.
Het formulier vullen met componenten
Nu je het formulier hebt aangemaakt en de juiste gegevens hebt ingevuld, kunnen het formulier verder gaan opbouwen. Als je nu op het +-icoon in het freeform component klikt, dan zie je dat bij de sectie "custom form" nu de overige componenten aanklikbaar zijn.
Als voorbeeld gaan we een contact formulier maken, waarbij een klant zijn naam, mailadres, reden en opmerking achter kan laten waarom hij contact op wilt nemen.
Wanneer je het formulier gaan maken, kan je ook de overige componenten gebruiken om je formulier te vullen, je bent dus niet gelimiteerd aan de componenten die vallen onder "custom form".
Naam en email veld aanmaken
We kiezen voor het component: text-field.
Wanneer je dit component hebt aangeklikt, zie je het component zoals hier rechts is afgebeeld:
Name
Hier vul je de naam van dit veld in.
LET OP: geen spaties en andere speciale tekens!
Vervang desnoods de paties door een laag streepje "_".
Als er spaties en andere speciale tekens gebruikt worden, dan gaat het formulier niet werken.
Type
Hier kan je aangeven of het om een tekst, email of url veld gaat. Dit kan per component verschillen.
Value
Hier kan je een vast waarde aan meegeven, in dit geval willen we de waarde wat de klant zelf in gaat vullen. We laten deze dus leeg.
Value_from
Hiermee kan je aangeven of er automatisch een waarde ingevuld moet worden aan de hand van de ingelogde klant gegevens. Je kan bijvoorbeeld al automatisch de naam van de klant laten invullen. Dit werkt alleen als de klant is ingelogd. Anders blijft de waarde leeg en moet de klant zelf zijn naam nog invullen.
Placeholder
Hier kan je een tekst invullen wat informatie geeft over het veld. Bijvoorbeeld: Vul hier uw naam in.
Deze tekst verdwijnt zodra de klant in het veld gaat typen.
Required
Hiermee kan je aangeven of een veld verplicht is of niet.
Control_only
Hiermee kan je aangeven of je wel of geen label wilt tonen bij dit veld.
Label
Hier vul je in wat je wilt weten. Bijvoorbeeld: Naam, email, telefoonnummer, etc.
Reden veld aanmaken
We kiezen voor het component: dropdown-select.
Wanneer je dit component hebt aangeklikt, zie je het component zoals hier rechts is afgebeeld:
Veldeigenschappen:
De velden:
- Name
- Value
- Required
- Control_only
- Label
werken hetzelfde als eerder aangegeven.
Hetgeen wat hier anders is, is het veld Choices. Bij choices kan je zelf aangeven hoeveel items je wilt laten tonen in de dropdown. Wanneer de choices invult, geef je bij choice aan wat de keuze is. Bijvoorbeeld: Ik wil informatie. Vervolgens vervang je waar item staat door een woord wat te maken heeft met deze keuze. Bijvoorbeeld: informatieaanvraag. Ook hier geen spaties en speciale tekens gebruiken, anders zal het formulier niet werken.
Opmerking veld aanmaken
We kiezen voor het component: multiline text field.
Wanneer je dit component hebt aangeklikt, zie je het component zoals hier rechts is afgebeeld:
Veldeigenschappen:
De velden:
- Name
- Type
- Value
- Placeholder
- Rewuired
- Control_only
- Label
werken hetzelfde als eerder aangegeven.
Het verschil tussen dit component en die van text-field is dat je bij dit component meer tekst kwijt kan over meerdere regels.
Verstuur knop aanmaken
We kiezen voor het component: submit button.
Wanneer je dit component hebt aangeklikt, zie je het component zoals hier rechts is afgebeeld:
Text
Hier vul je de tekst in welke in de button moet komen te staan.
Classes
Hier kan je classes meegeven aan de button. Dit zorgt er voor dat bijvoorbeeld de kleur van de button verandert of je kan aangeven op je het icoontje links of rechts van de tekst wilt hebben.
Icon
Hier kan je een icoontje opgeven welke je bij de tekst wilt hebben.
Het resultaat
Wanneer je alles hebt ingevuld zoals hierboven beschreven, kan je formulier er als volgt uit zien:
Voor gevorderden
Bij het opnemen van een veld in een formulier wordt automatisch het label en de feedback-placeholder (waarin een evt. foutmelding getoond wordt) in een responsive layout geplaatst. Voor meer vrijheid kun je deze verder bijsturen.
Bij de velden is een optie 'control_only', waarbij alleen het kale veld getoond wordt, niet in een layout, zonder feedback en label. Let op dat het label wel gebruikt wordt bij het versturen van het formulier.
Daarnaast zijn er afzonderlijke 'field layout', 'field label', en 'field feedback' componenten. Met de 'field layout' krijg je hetzelfde responsive gedrag. 'Field label' en 'field feedback' verwachten in het 'for' attribuut de naam van het veld (het 'name' attribuut). Deze naam bevat alleen kleine letters en afbreekstreepjes, geen spaties, hoofdletters, of vreemde tekens.
Met behulp van deze tools kun je bijvoorbeeld NAW-gegevens nabouwen, waarbij er twee velden (straat en huisnummer) op dezelfde regel staan. Hier hoort wel wat ruimte tussen, dus hebben we nog een 'field spacer' component gemaakt.