Meerstaps-formulieren bouwen met de Formly API
24 mei 2024 • Door Jan de Vries
Een lang, indrukwekkend formulier kan overweldigend werken. Door je formulier op te delen in logische stappen, verbeter je de gebruikerservaring en vaak ook je conversieratio's. In dit artikel leer je hoe je wizard-achtige formulieren implementeert met Formly.
Waarom meerstaps beter werkt dan één lange pagina
De meeste gebruikers hebben een beperkte aandachtsspanne. Als een formulier meer dan drie schermen lang is, stopt de meeste bezoekers al. Een meersstapsformulier (wizard) lost dit probleem op door complexiteit te decomponeren.
- Verlaag cognitieve belasting: Gebruikers focussen zich op één vraag tegelijk.
- Beter mobiel gebruik: Op kleine schermen is scrollen naar een heel lange pagina frustrerend.
- Snellere feedback: Je kunt validatie en voortgangsniveaus direct tonen.
Stappengroepen definiëren in het schema
In Formly definiëer je formulieren als JSON-schema's. Om een wizard te bouwen, gebruik je de fieldGroup eigenschap. Je kunt optioneel een templateOptions toevoegen om de stapnaam of stapnummer op te slaan.
{
"fieldGroup": [
{
"key": "step1",
"fieldGroup": [
{ "type": "input", "key": "voornaam" },
{ "type": "input", "key": "achternaam" }
],
"templateOptions": { "stepLabel": "Persoonlijke gegevens" }
},
{
"key": "step2",
"fieldGroup": [
{ "type": "input", "key": "email" }
],
"templateOptions": { "stepLabel": "Contactgegevens" }
}
]
}
State management tussen stappen
Hoe houd je bij welke stap de gebruiker op dit moment zit? Je hebt twee hoofdstrategieën:
localStorage
Voordelen: Werkt offline, eenvoudig te implementeren.
Nadelen: Niet veilig voor gevoelige data (zoals wachtwoorden). Gebruikers kunnen de data manipuleren.
Server-side sessie
Voordelen: Veilig, consistent over apparaten, geen data die op de client blijft.
Nadelen: Vereist een backend of API-call om de status op te slaan.
Voortgangsindicator bouwen in React
Met Formly's useForm hook kun je de huidige stap eenvoudig aflezen. Hier is een voorbeeld van een eenvoudige stap-indicator:
<div className="stepper">
{fields.map((field, index) => (
<div key={index} className={index === currentStep ? 'active' : 'inactive'}>
{field.templateOptions.stepLabel}
</div>
))}
</div>
Validatie per stap activeren
Je wilt niet dat gebruikers naar stap 2 gaan zonder stap 1 te voltooien. Je kunt dit bereiken door de validators property te gebruiken in combinatie met een custom validator die kijkt naar de vorige groep.
validators: {
"step1Completed": ({ value, form }) => {
return form.get('step1').valid;
}
}
De volledige broncode
Wil je dit voorbeeld zelf uitproberen? Bekijk onze GitHub repository.
Over de auteur
Jan de Vries
Senior Frontend Engineer bij Formly. Jan heeft meer dan 10 jaar ervaring met React en is gepassioneerd door toegankelijke interfaces en efficiënte data-inzameling.