Formulieren & Enquêtes: Rechter zijbalk in de bouwer

De Rechter zijbalk in de Formulieren- en Enquêtebouwer van Voluit Suite is de plek waar je alle styling en instellingen bij elkaar vindt terwijl je bouwt. Je gebruikt Stijlen, Thema’s en Geavanceerde instellingen om de opmaak en indeling van je formulier of enquête te bepalen, zoals de layout, het uiterlijk van invoervelden, spacing, kleuren en meer.

De Rechter zijbalk is het bedieningspaneel van de Formulieren- en Enquêtebouwer voor visuele en layout-instellingen. Je vindt hier tabs voor Stijlen, Thema’s en Geavanceerd, zodat je precies kunt instellen hoe je formulier of enquête eruitziet en werkt. Doordat alle ontwerpopties op één plek staan, kun je wijzigingen sneller controleren in de preview en blijf je consistent in je opmaak.

De rechter zijbalk bestaat uit 3 tabs:

Stijlen: Stel de layout en het uiterlijk van je formulier of enquête nauwkeurig af
Thema’s: Pas kant-en-klare presets toe voor consistente branding
Geavanceerd: Extra opties voor specifieke situaties

Zo open je de Rechter zijbalk

Om de rechter zijbalk te openen in de Formulieren- of Enquêtebouwer, klik je rechtsboven in de builder op de knop Styles & Options (Stijlen & opties). Klik nogmaals op Styles & Options (Stijlen & opties) om de zijbalk weer in te klappen.

Tab Stijlen

In de tab Stijlen stel je de basis-layout van je formulier of enquête in. Vanuit deze tab beheer je de indeling, het kleurenschema en je branding. In de tab Stijlen vind je onder andere:

Layout: Bepaal de algemene opbouw en hoe velden worden weergegeven. Denk aan de weergave van invoervelden en labels, breedtes, spacing, padding en de bovenmarge boven je formulier of enquête. Met de instellingen voor de bovenmarge kun je ruimte aanpassen zonder Custom CSS. Wijzigingen zie je direct terug in de preview. Laat je margevelden leeg om de standaard spacing te behouden. Klik hier voor meer informatie over Labeluitlijning per element
Je kunt nu Top and Bottom padding (Boven- en onderpadding) op 0 px zetten voor een echte edge-to-edge layout. Voorheen konden gepubliceerde assets nog extra verticale ruimte tonen, zelfs als padding op 0 stond.
Footer (Surveys): Beheer footer-inhoud en uiterlijk, specifiek voor enquêtes.
Colors & Background: Stel lettertype-instellingen in, kies achtergrondkleuren en, waar ondersteund, voeg een achtergrond- of headerafbeelding toe die past bij je merk.
Miscellaneous: Zet branding op account-niveau aan of uit

Tab Thema’s

Met de tab Thema’s maak je snel professioneel ogende formulieren en enquêtes met presets. Gebruik een thema om snel te starten en stel daarna spacing en breedtes verder af in Stijlen.

Om een thema toe te passen op je formulier of enquête, ga je met je muis over het gewenste thema en kies je Use Theme (Thema gebruiken). Bevestig daarna je keuze in de pop-up met Proceed (Doorgaan).

Let op: als je van thema wisselt, gaan je huidige stijl-aanpassingen verloren.

Paneel voor knop-styling

In het paneel voor knop-styling beheer je alle instellingen voor de uitstraling van knoppen op één plek. Zo kun je consistente, nette knopstijlen toepassen zonder custom code. Je kunt beginnen met presets en daarna typografie, spacing, borders, radius, schaduwen en breedte verder afstellen.

Let op: eerdere knop-instellingen staan nu in gegroepeerde secties in dit paneel. Dit maakt styling overzichtelijker en sneller.

Het paneel voor knop-styling openen

Open een formulier in de builder.
Klik op het knop-element op het canvas.
Open in de rechter zijbalk de sectie Button (Knop) (of Styles → Button / Stijlen → Knop).

Een knop-thema kiezen (galerij + preview)

Klik op Select Themes (Thema’s selecteren) (label kan afwijken).
Bekijk de categorieën Filled, Border en Text Only (Gevuld, Rand en Alleen tekst).
Ga met je muis over een thema of selecteer een thema om de wijziging direct te previewen op het canvas.
Klik op Apply (Toepassen) om het thema op de geselecteerde knop te zetten.

Knop-stijlen aanpassen (gegroepeerde instellingen)

Doel: Het thema afstellen op je merkstijl zonder CSS.

Colors & Background: Stel tekst-, achtergrond- en randkleuren in.

Typography: Kies lettertype en font weight (ondersteunt custom fonts). Stel grootte, letterafstand en text transform in.

Screenshot placeholder: Typography group.

Layout & Alignment: Lijn de knop uit op Left / Center / Right (Links / Midden / Rechts). Zet Full Width (Volledige breedte) aan om de knop over de hele breedte van de container te laten lopen.

Screenshot placeholder: Layout & Alignment group.

Padding: Stel boven/onder- en links/rechts-padding in (waarden koppelen of ontkoppelen).

Border & Corner Radius: Stel randbreedte en randstijl in. Pas de corner radius aan voor ronde of hoekige knoppen.

Screenshot placeholder: Border & Corner Radius group.

Shadow: Zet schaduw aan en stel daarna blur, afstand en spread in.

Reset of Revert

Klik op Reset (Resetten) of Revert (Terugzetten) om stijlwijzigingen ongedaan te maken. Open Select Themes (Thema’s selecteren) opnieuw als je een ander startpunt wilt kiezen.

Tab Geavanceerd

De tab Geavanceerd bevat extra opties voor situaties waarin je meer nodig hebt dan de basisinstellingen voor layout en thema’s. Gebruik deze tab als je dieper wilt finetunen, terwijl je je formulier onderhoudbaar houdt. In de tab Geavanceerd vind je onder andere:

Form: Stel borders, hoeken en schaduw van de formuliercontainer in
Input Field: Style de invoervelden zelf, zoals tekst- en focuskleuren, borders en hoeken, breedte, padding en schaduw
Label: Stel typografie en kleur van labels in
Short Label: Stel typografie en kleur van korte labels in
Placeholder: Pas het uiterlijk van placeholder-tekst aan
Custom CSS: Voeg custom CSS toe voor precieze controle

Let op: Custom CSS heeft voorrang op Stijlen en Thema’s en kan de styling van thema’s beïnvloeden.

Labeluitlijning per element

Met labeluitlijning per element stel je per veld een andere labelpositie in, in plaats van één globale uitlijning voor het hele formulier of de hele enquête. Dit is handig om de layout en spacing verfijnder af te stemmen, vooral bij compacte ontwerpen.

Dit is belangrijk om te weten voordat je labeluitlijning per element gebruikt:

Beschikbaar in formulieren, enquêtes en quizzes (alleen beschikbaar voor formulieren met de layout Single Column (Enkele kolom))
Bestaande formulieren behouden de globale uitlijning, tenzij je dit per veld aanpast
Werkt voor standaardvelden zoals tekstvelden, dropdowns, radio buttons en meer
Op mobiel wordt de uitlijning automatisch Top (Boven), zodat de layout overzichtelijk blijft, ongeacht je desktop-instelling

Zo stel je labeluitlijning per element in

Selecteer in de Formulieren- of Enquêtebouwer één veld.
Zoek in de rechter zijbalk naar Label Alignment (Labeluitlijning).
Kies de gewenste labeluitlijning voor dit element met de pijlen: Top, Left, Right of Form Default (Boven, Links, Rechts of Formulier standaard).

Veelgestelde vragen

V: Worden wijzigingen in de Rechter zijbalk automatisch opgeslagen?

Antwoord: Nee. Klik in de builder op Save (Opslaan) om je wijzigingen op te slaan.

V: Overschrijft het later wijzigen van Thema’s mijn uitgebreide styling?

Antwoord: Een nieuw thema kan onderdelen van je styling resetten. Controleer na het wisselen je instellingen in Stijlen. Custom CSS blijft voorrang hebben op Thema’s en Stijlen, dus controleer ook je CSS op mogelijke conflicten.

V: Hoe test ik snel verschillende thema-presets zonder mijn huidige look te verliezen?

Antwoord: Nadat je een nieuw thema hebt toegepast, kun je terug naar de vorige look door op de Back (Terug) knop rechtsboven in de builder te klikken.

V: Wat gebeurt er met label uitlijning per veld als ik de layout wijzig naar Two Column of Single Line?

Antwoord: Label uitlijning per element is alleen beschikbaar in Single Column (Enkele kolom). Als je van layout wisselt, verdwijnt de per-veld instelling en gaan labels terug naar de standaardinstelling.

V: Als ik later de globale labeluitlijning wijzig, wat gebeurt er dan met velden die ik al heb ingesteld?

Antwoord: Velden die op Form Default (Formulier standaard) staan, nemen de nieuwe globale instelling automatisch over. Velden die expliciet op Left / Right / Top (Links / Rechts / Boven) staan, behouden hun eigen instelling.