A multi-step form is usually done in one of two ways. Either, via backend code that gets the data submitted with each step and passes it on to the server before going to the next one. Or, using Javascript to hide groups of fields that are shown as the user clicks to move on to the next step.
Using the GET method
A form mostly uses the POST method when submitting. But there is another form method that’s rarely used: GET. When submitting a form using this method, a query string is added at the end of the URL you submit to that includes the form’s data. Probably its most common use case is for a search results page where results are shown based on a query string variable.
Using GET works as a way to pass data from page to page, without requiring any kind of backend to do the storing and passing, or Javascript to hide and show fields. It’s a way to use built-in browser features without a bunch of overhead needed to setup. Just like how you can use browser validation, and other modern form field features.
How it works
You could build your form as multiple fully customizable static pages without needing complicated code for steps. And you can use the query string data for functionality like conditionals to show fields based on data a user submitted in a previous step.
By default, fields are only submitted to a query string to the next set page. In order to pass URL parameters across multiple steps/pages, here’s a Javascript snippet that creates hidden fields from submitted query string parameters in order to continue passing them to the next page:
window.onload = function() {
var querystring = window.location.href.split('?')[1];
var parameters = querystring.split('&');
for(i = 0; i < parameters.length; i++) {
var pair = parameters[i].split('=');
var hiddenfield = document.createElement("input");
hiddenfield.type = "hidden";
hiddenfield.name = pair[0];
hiddenfield.value = pair[1];
document.forms[0].appendChild(hiddenfield);
}
};
To keep in mind
Form data would not be submitted to its destination until the end of the form steps where it would do the POST to the server. This means that data is not stored anywhere along the way except in the user’s browser. There may be work arounds for this, like using cookies, but it’s something to be aware of for longer forms.
Also note that form field data is visible in the URL. While this isn’t a security issue, having a password field being shown is probably not a good idea. And if a user decides to copy and share the URL to your form, they may inadvertently include some variables they submitted in the form.
With Blocks Edit, you can make your custom form fields visually editable for your team to drag and drop them to build forms and submit to any platform.
