Form
Formulier dat naar de Obelisk-API submit, met automatische client-side validatie.
Bouw contact-, enquête- of scoreformulieren. Validatie wordt afgeleid uit de input-props en elke inzending wordt bewaard.
Gebruik Form voor elk contactmoment waarbij je gestructureerde data van een bezoeker wilt vastleggen: een contactformulier, een offerteaanvraag, een enquête of een sollicitatieformulier. Elke inzending komt terecht bij de formulieren van de site, waar je ze kunt inzien of laten doorsturen per mail.
De validatie wordt afgeleid uit de props van de onderliggende FormField-velden: zet je required of type='email', dan controleert het formulier dat automatisch vóór verzenden, zonder dat je zelf validatielogica hoeft te schrijven.
Gebruiksscenario's per site-type
Bij een webshop gebruik je Form voor meer dan alleen het contactformulier: denk aan een retourformulier, een maatadviesformulier of een enquête na aankoop. Een portfolio- of bureausite zet dit block in voor een uitgebreid intakeformulier waarin een potentiële klant projectdetails, budget en deadline aangeeft, zodat het eerste gesprek al goed voorbereid is. Bij een zakelijke dienstverlener is Form vaak het startpunt van de salesfunnel: een offerteaanvraag of een 'plan een adviesgesprek'-formulier waarvan elke inzending direct bij het team terechtkomt.
Samenspel met andere blocks
Elk veld binnen Form is zelf een FormField; samen bepalen ze welke validatie automatisch wordt toegepast. Wil je na het invullen laten kiezen uit vaste opties, zoals 'Hoe hoorde je van ons?', dan is een RadioField binnen hetzelfde formulier bruikbaar voor dat soort keuzevragen.
Een veelgemaakte fout is een formulier met te veel verplichte velden: elk extra verplicht veld verlaagt de kans dat iemand het formulier daadwerkelijk afrondt. Vraag alleen wat je echt nodig hebt om te kunnen reageren, en maak de rest optioneel. Denk ook aan de bevestiging na verzenden: standaard toont Form een bevestigingsbericht op de pagina zelf, maar voor formulieren met een langere verwerkingstijd — zoals een sollicitatie die eerst handmatig wordt beoordeeld — is het raadzaam in de bevestigingstekst expliciet te vermelden binnen welke termijn de bezoeker een reactie mag verwachten.
<Form slug='contact'> <FormField name='email' required><Input type='email'/></FormField> <Button type='submit'>Versturen</Button> </Form>