Formulieren & Enquêtes: Rechter zijbalk in de bouwer

De rechterzijbalk in de Formulier- en enquêtebouwer van Voluit Suite centraliseert styling en configuratie tijdens het bouwen. Gebruik Stijlen, Thema's en Geavanceerde instellingen om de lay-out, weergave van invoervelden, tussenruimte, kleuren en meer van je formulier of enquête te beheren!

INHOUDSOPGAVE

Overview of the Right Sidebar in Form and Survey Builder

Overzicht van de rechterzijbalk in de Formulier- en Enquêtebouwer

De rechterzijbalk is het configuratiescherm van de formulier- en enquêtebouwer voor visuele instellingen en lay-outinstellingen. De zijbalk bevat tabbladen voor Stijlen, Thema's en Geavanceerd, zodat je precies kunt bepalen hoe je formulier of enquête eruitziet en werkt. Doordat alle ontwerpinstellingen binnen handbereik staan, kun je wijzigingen sneller bekijken en consistentie behouden.

De rechterzijbalk bestaat uit 3 tabbladen:

Stijlen: Pas de lay-out en uitstraling van je formulier of enquête nauwkeurig aan
Thema's: Pas kant-en-klare presets toe voor consistente branding
Geavanceerd: Open extra opties voor specifieke behoeften

Open de rechterzijbalk vanuit de Formulier- of Enquêtebouwer door rechtsboven in de bouwer op de knop Stijlen en opties te klikken. Klik nogmaals op de knop Stijlen en opties om de zijbalk in te klappen.

Tabblad Stijlen

Op het tabblad Stijlen stel je de basislay-out voor je formulier of enquête in. Vanuit dit tabblad beheer je de lay-out, het kleurenschema en de branding. De instellingen op het tabblad Stijlen zijn onder andere:

Lay-out: Bepaal de algemene indeling en weergave van velden, waaronder de weergave van invoervelden en labels, breedtes, tussenruimte, opvulling en de bovenmarge boven je formulier of enquête. Gebruik de instellingen voor de bovenmarge om de ruimte aan te passen zonder aangepaste CSS. Wijzigingen worden direct in de preview weergegeven. Als je margevelden leeg laat, blijft de standaardtussenruimte behouden. Click here for more information on Element-Level Label Alignment
Je kunt bovenste en onderste opvulling nu instellen op 0 px voor een echte edge-to-edge-lay-out. Voorheen konden gepubliceerde assets nog extra verticale ruimte tonen, zelfs wanneer de opvulling was ingesteld op 0.
Voettekst (enquêtes): De voettekst van de enquête bepaalt de navigatie en voortgangsinformatie die respondenten zien terwijl ze door een enquête gaan. Pas het gedrag, de weergave en de navigatie-instellingen van de voettekst aan je enquêtedesign aan en zorg er tegelijkertijd voor dat respondenten eenvoudig tussen stappen kunnen navigeren.

Beschikbare instellingen voor de voettekst zijn onder andere:
- Gedrag van voettekst: Kies Vast aan kaart of Vast aan pagina om te bepalen hoe de voettekst zich gedraagt terwijl respondenten door de enquête gaan.
- Achtergrondvulling: Pas de achtergrond van de voettekst aan.
- Hoogte van voettekst: Pas de hoogte van het voettekstgebied aan.
- Typografie: Configureer de lettertypefamilie, tekengrootte en het lettergewicht die in de voettekst worden gebruikt.
- Voortgangsbalk: Schakel de voortgangsbalk in om respondenten visueel te laten zien hoever ze in de enquête zijn.
- Knoptype: Kies de beschikbare weergave voor navigatieknoppen van de enquête, waaronder ondersteunde tekst- en pijlopties.
- Knoppositie: Bepaal de positie van navigatieknoppen binnen de voettekst.
- Knoptekst: Pas de labels aan die worden weergegeven voor de acties Vorige, Ga terug, Volgende en Verzenden.
- Knopkleuren: Pas de beschikbare kleuren voor navigatieknoppen en tekst aan het enquêtedesign aan.
Bekijk de enquête nadat je de instellingen voor de voettekst hebt gewijzigd om te controleren of navigatie, voortgang en styling voor respondenten worden weergegeven zoals verwacht.
Kleuren en achtergrond: Stel lettertype-instellingen in, kies achtergrondkleuren en pas waar ondersteund achtergrond- of headerafbeeldingen toe die bij je merk passen.

Tabblad Thema's

Op het tabblad Thema's kun je snel professioneel ogende formulieren en enquêtes maken met presets. Gebruik Thema's om de configuratie sneller uit te voeren en gebruik daarna Stijlen om tussenruimte en breedtes nauwkeurig aan te passen.

Als je een thema op je formulier of enquête wilt toepassen, beweeg je met de muis over het gewenste thema en selecteer je Thema gebruiken. Bevestig je keuze in de pop-up door op Doorgaan te klikken.

Let op: Als je van thema wisselt, gaan de huidige stijlaanpassingen verloren.

Paneel voor knopstyling

Het paneel voor knopstyling centraliseert alle instellingen voor de weergave van knoppen, zodat je verzorgde en consistente stijlen kunt toepassen zonder aangepaste code. Gebruik presets als startpunt en pas daarna typografie, tussenruimte, randen, radius, schaduwen en breedte nauwkeurig aan.

Let op: De eerdere knopinstellingen staan nu in gegroepeerde secties in dit paneel, zodat je stijlen eenvoudiger kunt aanpassen en sneller wijzigingen kunt doorvoeren.

Het paneel voor knopstyling openen

Open een formulier in de bouwer.
Klik op het knopelement op het canvas.
Vouw in de rechterzijbalk Knop (of Stijlen → Knop) uit.

Een knopthema kiezen (galerij en preview)

Klik op Thema's selecteren.
Bekijk de categorieën Gevuld, Rand en Alleen tekst.
Beweeg met de muis over een thema of selecteer een thema om wijzigingen direct op het canvas te bekijken.
Klik op Toepassen om het thema op de geselecteerde knop in te stellen.

Knopstijlen aanpassen (gegroepeerde instellingen)

Doel: Pas het thema nauwkeurig aan de merkrichtlijnen aan zonder CSS.

Kleuren en achtergrond: Stel tekst-, achtergrond- en randkleuren in.

Typografie: Kies de lettertypefamilie en het lettergewicht (ondersteunt aangepaste lettertypen). Stel de tekengrootte, letterafstand en teksttransformatie in.

Tijdelijke aanduiding voor screenshot: groep Typografie.

Lay-out en uitlijning: Lijn de knop Links / Midden / Rechts uit. Schakel Volledige breedte in om de volledige containerbreedte te gebruiken.

Tijdelijke aanduiding voor screenshot: groep Lay-out en uitlijning.

Opvulling: Pas de bovenste/onderste en linker/rechter opvulling aan (waarden koppelen/ontkoppelen).

Rand en hoekradius: Stel de breedte en stijl van de rand in. Pas de hoekradius aan voor afgeronde of vierkante knoppen.

Tijdelijke aanduiding voor screenshot: groep Rand en hoekradius.

Schaduw: Schakel schaduw in en pas daarna vervaging/afstand/spreiding aan.

Resetten of terugzetten

Klik op Resetten of Terugzetten om stijlwijzigingen ongedaan te maken. Open Thema's selecteren opnieuw om een ander startpunt te kiezen.

Tabblad Geavanceerd

Het tabblad Geavanceerd biedt extra opties voor specifieke behoeften naast de instellingen voor de basislay-out en thema's. Gebruik dit tabblad wanneer je meer controle nodig hebt en het formulier toch beheersbaar wilt houden. De bedieningstypen op het tabblad Geavanceerd zijn onder andere:

Formulier: Pas de randen, hoeken en schaduw van de formuliercontainer aan
Invoerveld: Style de invoerelementen zelf, waaronder tekst- en focuskleuren, randen en hoeken, breedte, opvulling en schaduwen
Label: Beheer de typografie en kleur van labels
Kort label: Configureer de typografie en kleur van korte labels
Tijdelijke aanduiding: Pas de weergave van tijdelijke aanduidingstekst aan
Aangepaste CSS: Voeg aangepaste CSS toe voor nauwkeurige controle.

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

Uitlijning van labels op elementniveau

Met uitlijning van labels op elementniveau kun je voor elk veld een andere labelpositie instellen, in plaats van één globale uitlijning toe te passen op het hele formulier of de hele enquête. Gebruik dit om het visuele ritme en de tussenruimte nauwkeurig af te stemmen, vooral in compacte lay-outs.

Dit moet je weten voordat je uitlijning van labels op elementniveau gebruikt:

Beschikbaar in Formulieren, Enquêtes en Quizzen (alleen beschikbaar voor formulieren met de lay-out Eén kolom)
Bestaande formulieren behouden hun globale uitlijning, tenzij deze expliciet op veldniveau wordt gewijzigd
Van toepassing op standaardvelden zoals tekstvelden, dropdowns, keuzerondjes en meer
Op mobiel wordt de uitlijning automatisch ingesteld op Boven, zodat de lay-out duidelijk en gebruiksvriendelijk blijft, ongeacht de desktopinstellingen

Uitlijning van labels op elementniveau instellen

Selecteer één veld in de Formulier- of Enquêtebouwer
Zoek in de rechterzijbalk die verschijnt naar Labeluitlijning
Selecteer hier de gewenste labeluitlijning voor dat element met behulp van de pijlen (Boven, Links, Rechts of Standaard voor formulier)

Veelgestelde vragen

V: Worden wijzigingen in de rechterzijbalk automatisch opgeslagen?

Nee, klik op Opslaan in de bouwer om je wijzigingen op te slaan.

V: Overschrijft het later wijzigen van Thema's mijn gedetailleerde styling?

Een nieuw Thema kan delen van de visuele stijl resetten. Controleer je Stijlen opnieuw nadat je bent overgeschakeld. Aangepaste CSS overschrijft Thema's en Stijlen nog steeds, dus controleer je CSS op conflicten.

V: Hoe test ik snel verschillende themapresets zonder mijn huidige weergave te verliezen?

Nadat je een nieuw thema op je formulier of enquête hebt toegepast, kun je teruggaan naar de vorige weergave door rechtsboven in de bouwer op de knop Terug te klikken.

V: Wat gebeurt er met de labeluitlijning per veld als ik de lay-out wijzig naar Twee kolommen of Eén regel?

Uitlijning van labels op elementniveau is alleen beschikbaar bij Eén kolom. Als je van lay-out wisselt, vervalt de besturing per veld en worden de labels teruggezet naar de standaardinstelling.

V: Wat gebeurt er met velden die ik al heb ingesteld als ik de globale labeluitlijning later wijzig?

Velden die zijn ingesteld op Standaard voor formulier worden automatisch bijgewerkt naar de nieuwe globale instelling. Velden die expliciet zijn ingesteld op Links/Rechts/Boven behouden hun keuze per veld.