Een formulier dat input van de gebruiker in meerdere stappen verzamelt

Wanneer een gebruiker een formulier met een héél groot aantal velden ziet dan kan het zijn dat deze afhaakt. Een slimme manier om dat te voorkomen is door de gebruiker het formulier in meerdere stappen te laten doorlopen. Dat betekent wel dat bij elke stap de data van een eerdere stap moet worden meegenomen.

Als oplossing om dat mogelijk te maken heb ik een class gemaakt die de data van de vorige stappen en de huidige stap verwerkt. Dat doe ik op basis van een tweetal extra hidden fields in het form. Het eerste field geeft aan welke stap we in zitten. Het tweede field bevat de data van de vorige stappen in de vorm van json-data.

Wanneer de gebruiker het formulier submit dan wordt eerste de data van de vorige stappen door het systeem geparsed. Daarbij heb ik ook een SHA256-checksum met (geheime) salt toegevoegd waardoor de integriteit van de data gegarandeerd is bij elke stap.

Als checksum gebruik ik de namen van de velden én de data zelf. Op die manier kan ik de checksum aan de json data toevoegen in plaats van dat ik daar een extra hidden-field voor nodig heb of een andere minder sjieke oplossing voor hoeft te maken.

Wanneer de data van de vorige stappen is geladen dan wordt de data die in de huidige stap door de gebruiker ingevoerd is verwerkt en toegevoegd aan de overige data. Daarbij zou dan ook nog validatie van de nieuwe data kunnen worden toegevoegd.

Ook daarom is de checksum op de data van de voorgaande stappen belangrijk omdat je dan zeker weet dat de data van de voorgaande stappen al gevalideerd is. Het kan natuurlijk helemaal geen kwaad om de data tijdens een laatste stap nóg een keer te valideren.

Door de checksum weet je dan feitelijk al zeker dat die validatie zal slagen. Je wil je gebruiker in een latere stap ook niet confronteren met een foutmelding dat data uit een voorgaande stap niet door de validatie heen komt en opnieuw moet worden ingegeven.

Wanneer de gebruiker het formulier submit in de laatste stap, dan kun je tot de daadwerkelijke actie overgaan die je met het formulier wenst. Het belangrijkste aan de werkwijze die ik beschrijf is dat je op dat moment alle gewenste data hebt en in één keer kan doorgeven aan het proces dat je dan wilt uitvoeren.

Een stap terugzetten is op deze manier ook eenvoudig mogelijk. Aan de hand van de waarde van de submit-knop die ingedrukt wordt kan zelfs al worden bepaald of dat er een stap voorwaarts of een stap terug wordt gezet. Daar zijn met wat javascript vast ook nog een stuk elegantere oplossingen voor te bedenken.