De layout en knop van je formulier aanpassen

Je hebt een mooi formulier gemaakt, maar de aanmeldknop is te klein, de velden mogen wel wat groter, of er zit onverwachte witruimte in. Geen zorgen: alles aan de layout van je formulier is aan te passen, zonder dat je code hoeft te schrijven. In dit artikel lopen we stap voor stap door de mogelijkheden heen.

1. De aanmeldknop aanpassen (tekst, grootte, kleur) #

De aanmeldknop heeft zijn eigen instellingenpaneel in de formulier-editor:

1. Ga naar Formulieren → Formulieren en klik bij je formulier op Bewerken.
2. Beweeg je muis over de aanmeldknop onderaan het formulier. Er verschijnt een potlood-icoon naast de knop.
3. Klik op het potlood-icoon. Rechts opent nu het paneel Invoer aanpassen met alle knopinstellingen.
4. Pas aan wat je wilt:
   • Knoptekst — de tekst op de knop (of kies een afbeelding als knop).
   • Knopgrootte — kies Klein, Gemiddeld of Groot. Dit is de snelste manier om de knop groter te maken.
   • Knop stijl — achtergrondkleur, tekstkleur, randkleur en randradius (ronde hoeken). Je kunt dit apart instellen voor de normale staat en voor het moment dat een bezoeker er met de muis overheen gaat (hover).
   • Min. breedte — wil je een brede knop, vul hier bijvoorbeeld 100% of een vast aantal pixels in.
   • Inhoud uitlijning — knop links, in het midden of rechts.
5. Klik rechtsboven op Save Form om op te slaan.

2. Velden aanpassen (labels en indeling) #

Elk veld heeft op dezelfde manier zijn eigen instellingen:

1. Beweeg je muis over het veld en klik op het potlood-icoon.
2. In het paneel Invoer aanpassen stel je onder andere in:
   • het label en de placeholder-tekst van het veld;
   • Label plaatsing — label boven, links, rechts of onder het veld, of verberg het label helemaal;
   • onder Geavanceerde opties extra instellingen zoals veldbreedte en CSS-klassen.

3. Het hele formulier in één keer stylen: Voorbeeld & ontwerp #

Wil je de velden groter maken, kleuren aanpassen of het complete formulier een andere uitstraling geven? Gebruik dan de ingebouwde styler:

1. Open het formulier via Formulieren → Formulieren → Bewerken.
2. Klik rechtsboven op Voorbeeld & ontwerp. Je ziet nu een live voorbeeld van je formulier met rechts de ontwerpinstellingen.
3. Kies bij Formulierstijl sjabloon eventueel een kant-en-klaar sjabloon als startpunt.
4. Vink Geselecteerde voorinstelling aanpassen aan. Er verschijnen nu secties waarmee je elk onderdeel apart kunt stylen:
   • Input & Text Area — hier maak je de invoervelden groter: pas de binnenafstand (padding), tekstgrootte, kleuren en randen van alle velden in één keer aan.
   • Stijl van de knop Verzenden — dezelfde knopinstellingen als in stap 1, maar dan met live voorbeeld ernaast.
   • Labelstijlen en Tijdelijke aanduiding — kleur en typografie van de veldlabels en de grijze voorbeeldtekst in de velden.
5. Klik rechtsboven op Opslaan — de styling geldt direct overal waar het formulier staat.

Gerelateerde artikelen #

• Introductie formulieren
• Formulieren duplicate functie