Multi-step form without the overhead

--- title: Multi-step form without the overhead published: true description: Using built-in form GET method to pass data from one page to another without complicated code. tags: html, javascript, forms # cover_image: https://blocksedit.com/content-code/multi-step-form/multi-step-form.webp # Use a ratio of 100:42 for best results. # published_at: 2026-06-03 23:32 +0000 --- 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](https://blocksedit.com/content-code/modern-form-validation/), and other [modern form field features](https://blocksedit.com/content-code/modern-form-design/). 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: ```javascript 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); } }; ``` 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.