Formulier

Wanneer gebruiken

Een formulier is een groep elementen om informatie van de gebruiker te verzamelen. Formulieren worden bijvoorbeeld gebruikt voor aanvragen, inschrijven en gegevens wijzigen.

Hoe het werkt

Layout gericht op focus

Een formulier staat op zichzelf op een scherm, zodat het de maximale aandacht van de gebruiker krijgt. De navigatiebalk van het portaal is verborgen, zodat de gebruiker niet per ongeluk weg navigeert.

Opbouw en flow

  • Houd een formulier zo kort en bondig mogelijk en vraag alleen het noodzakelijke. Vraag geen informatie die je al weet.
  • Verdeel onderwerpen van een formulier over verschillende stappen, en gebruik dan een stappenindicator om de voortgang te tonen.
  • Toon indien nodig een samenvatting in de één-na-laatste stap, inclusief wijzigen links naar de afzonderlijke stappen.
  • Toon de bevestiging na de laatste stap.
  • Toon indien relevant nog een bevestiging op het scherm waar je na bevestiging op landt, bijvoorbeeld het zaakdossier of een overzichtsscherm.
  • Gebruik een ‘voordat u begint’ pagina voor extra uitleg, maar alleen als dat echt nodig is, bijvoorbeeld wanneer de gebruiker moet weten welke informatie hij bij de hand moet houden.

Layout per stap

  • De formulier header wordt altijd boven de witte achtergrond van het formulier getoond. Een header kan een subtitel met stappenindicator en een introductietekst bevatten.
  • In de stappen staat geen teruglink bovenin, maar wel een annuleer knop om het formulier te verlaten. (Op het optionele ‘voordat u begint’ scherm staat wel een teruglink).
  • Op de tussenstappen staan knoppen om te navigeren naar de vorige en volgende stap. De volgende stap is altijd een primaire knop, en annuleren en vorige stap zijn links.
  • De verzend (of verder) knop is altijd actief en activeert back-end foutmeldingen wanneer informatie ontbreekt of ongeldig is.
  • Bij lange formulieren (waarbij de kans groot is dat een deel van het formulier buiten beeld staat) verschijnt een foutmelding direct boven de verzend knop wanneer het formulier nog fouten bevat, omdat de feedback bij het invoerveld mogelijk buiten beeld valt.

Invoervelden

  • Voor invoer kunnen verschillende formulier elementen worden gebruikt zoals text inputs, checklists en comboboxen, maar ook componenten zoals adres en datum componenten. Deze zijn te vinden onder de Uno form componenten.
  • De lengtes van inputfields geven een hint over wat je moet invullen.
  • Voor schermgroottes medium (MD) en groter, is de breedte van de invoervelden beperkt tot 600px.
  • Niet verplichte invoervelden zijn gemarkeerd als optioneel.
  • Waar mogelijk tonen we directe feedback bij de invoer als informatie ontbreekt of ongeldig is.
  • Informatie die bij DUO al bekend is kan getoond worden in een definition list, zoals naam en adres als je ingelogt bent.

Content

  • De titel van een formulier beschrijft het doel van de stap, bijvoorbeeld ‘persoonlijke gegevens’.
  • De subtitel beschrijft het doel van het formulier, bijvoorbeeld ‘studiefinanciering aanvragen’.

Verschillen tussen doelgroepen en portalen

Als het gaat om contentpagina’s en formulieren voor klanten hanteren we een brede padding links en rechts in het witte contentvlak. Zo ligt er meer focus op wat we vertellen of wat we vragen. Voor medewerkersschermen hanteren we een smalle padding in het contentvlak. Medewerkersschermen bevatten over het algemeen veel meer informatie en een medewerker wil in één oogopslag het overzicht zien. Daarom hanteren we daar onder andere deze richtlijn voor.

In het medewerker portaal is het soms wel nuttig om meer context bij een formulier te tonen. Dat kan met een samenvatting aan de linkerkant (in een blauw blok).

En in het medeweker portaal is inline wijzigen mogelijk door korte formulieren op een raadpleegpagina te tonen.

Voorbeelden

Introductiepagina

Naar {onderwerp}

Voordat u begint

{Aanvraag}

{Zet hier de uitleg voor het gebruik van het formulier}

Stap in formulier

{Stapnaam}

Stap 1 van 3 – {Formuliernaam}

jaar
of

Overzichtspagina

Overzicht

Stap 3 van 3 – {Formuliernaam}

{Stapnaam}

  • Naam

    V. Achternaam

  • E-mailadres

    email@adr.es

  • Geboortedatum

    01-01-1970

{Stapnaam}

  • Label

    Value

  • Label

    Value

Bevestiging

Bevestiging

Subtitel

Wij hebben uw {aanvraag} ontvangen {bevestigingstekst}

Benodigde stylesheets

  • /uno/components/meta/meta.css
  • /uno/components/navigation/backlink.css
  • /uno/components/form/form.css
  • /uno/components/form/input.css
  • /uno/components/label/label.css
  • /uno/components/list/definition-list.css
  • /uno/components/notification/notification.css