Samenvatting
Via Thema → Formulieren stel je de standaard opmaak in van alle formulierelementen op je website. Denk aan hoe invoervelden, knoppen, dropdowns en checkboxes eruitzien. Wijzigingen die je hier maakt, gelden voor alle formulieren op je hele website — tenzij je op blok- of elementniveau overschrijft.
Hoe werkt het
Waar vind je dit
Ga naar een website → klik op het Thema-icoon (verfkwast) in de header → klik in de linker zijbalk op Formulieren (je vindt dit onder de sectie Elementen).
Welke formulierelementen kun je stylen?
In het canvas zie je een preview met alle veldtypen die je kunt aanpassen:
| Element | Beschrijving |
|---|---|
| Formulier (container) | Het formulier als geheel — achtergrond, randen, padding |
| Verzend-knop | De knop waarmee het formulier wordt verstuurd |
| Tekstregel veld | Een enkel invoerveld (bijv. naam, e-mail) |
| Tekstvlak | Een groter invoerveld voor meerdere regels (bijv. een berichtveld) |
| Nummer/datum veld | Invoerveld voor getallen of datums |
| Dropdown/selectielijst | Een uitklapmenu waaruit de bezoeker kiest |
| Radio knoppen | Ronde keuzerondjes (één optie selecteren) |
| Checkbox | Aanvinkvakjes (meerdere opties mogelijk) |
| Veldlabel | Het label boven een invoerveld (bijv. "Naam", "E-mailadres") |
| Bestandsupload veld | Een veld waarmee bezoekers een bestand kunnen uploaden |
| Verborgen veld | Een veld dat niet zichtbaar is voor de bezoeker (voor technische doeleinden) |
Stijlen instellen
- Klik op een formulierelement in het canvas (preview)
- Het rechter panel toont de naam van het element met de tabs Opmaak en Overgangen
- Klik op Opmaak om de stijl te bewerken
Wat kun je aanpassen?
| Categorie | Wat je kunt instellen |
|---|---|
| Ruimtes | Binnenruimte (padding) links/rechts |
| Grootte | Breedte en hoogte van het veld |
| Typografie | Tekstkleur, lettergrootte, lettertype, stijl (cursief/vet), onderstrepen, kapitalisatie, regelafstand, letterafstand, tekst-schaduw |
| Achtergrond | Achtergrondkleur van het veld |
| Rand | Dikte, stijl (vast/gestippeld), kleur en ronde hoeken van de rand |
| Schaduw | Schaduw rond het veld (afstand, vervaging, kleur) |
States: Standaard, Focus en Error
Bij elk formulierveld kun je drie states apart stylen:
| State | Wanneer is dit actief |
|---|---|
| Standaard | Het veld in de normale toestand — de bezoeker heeft er nog niet op geklikt |
| Focus | De bezoeker heeft op het veld geklikt en de cursor staat erin — je kunt bijvoorbeeld de randkleur veranderen om aan te geven welk veld actief is |
| Error | Het veld toont een validatiefout — bijvoorbeeld als een verplicht veld leeg is ingestuurd. Je kunt de rand rood maken zodat de bezoeker meteen ziet waar het probleem zit |
Klik op de state-knoppen bovenaan het Opmaak-panel om de stijl per state in te stellen.
Let op: Stijlwijzigingen in het thema gelden voor je hele website. Wil je een specifiek formulier anders stylen? Doe dat dan op blok- of elementniveau in de editor.
Wanneer gebruik je dit
- Je wilt alle formulieren op je website een consistente stijl geven
- Je wilt de focus- of error-state van formuliervelden visueel aanpassen
- Je zoekt een overzicht van alle formulierelementen die je kunt stylen in het thema