Using Static Content to Create Multi Page Web Forms

Using Static Content to Create Multi Page Web Forms
Page content


There may be several reasons as to why you would want to create multi page web forms, valid reasons would include situations where you may be having a lot of data to collect and maybe you want to categorize this data into several sections. You could also have mandatory information you would want to gather plus additional optional information you want and separating them would be a way of giving the user a pleasant experience while filling out forms. You could also have a form where some information could be based on previous choices therefore forcing you to separate the form. Whatever the reason, creating multi page web forms is not as difficult as you may think depending on which method you choose.

Getting Started

By reading this we assume you have knowledge of writing HTML/CSS code and you know at least one server side language. Getting to do this though simple, needs considerable amount of instructions if you do not have the above mentioned knowledge. If you are familiar with the above mentioned frameworks then you may proceed.

The first thing is you would need to do is to use your favorite HTML authoring tool to design your form and have the different sections grouped together. Next you need to decide whether to serve up the web forms statically or dynamically. I will discuss one way you can serve up the pages dynamically but before I do that, I will explain how to serve up the web forms statically. In all cases, we will be dealing with the following data in three ages divided as follows.

  • Page 1. Username, email, password
  • Page 2. Full name, address
  • Page 3. services

Displaying the Static Web Forms

web form two

All you would need to do using this method is call each of the pages in a chain link format. You also need some sort of persistence which could either be a database residing on the server or having the persistence propagated through successive pages using HTML’s hidden form input fields. It is just a matter of how confident you feel and the security levels you are looking at.

Using the sample data, when a user registers on the website, page one is served up and the user fills in the details. When the “Next” button is clicked the information collected submitted to the server and is stored in the database. The server then sends the Page 2 form and repeats the process after which Page 3 is sent and the same happens. You would want to use this method when you have sensitive information that you would not want propagated to hidden fields of course because of security issues.

In any case, if you wanted to pass the form data through hidden form input fields you would set up your Page 1 to be submitted and call the code for Page 2 at the server at the same time passing is data to Page 2 where is would be inserted as hidden input fields. Page 2 would function in the same way by passing all the data to Page 3. Page 3 will now contain the data from the two previous pages in hidden input fields. When the user completes Page 3 and clicks the “Finish” button, this is the time the data collected is stored into a database residing on the server.

Displaying the Dynamic Web Forms

web form three

There is still a better way to create multi page web forms by using some client side capabilities of the web browser and some CSS tricks. This one is simpler and more elegant to achieve. The trick here is that the entire web form is sent to the browser at a go. All sections or pages are then placed within tags with all pages being hidden until needed with the CSS display: none property. Your code would then have the following structure.

… page one form here…

… page two form here…

… page three form here…

Simply clicking the “Next” button on the first page as in the illustrations provided would hide it and display the second page. Clicking the “Next” button on the second page would hide it and display the third page. Clicking the “Finish button” on the third page would actually submit the form.

The CSS code would look something like this

#multi-form div {display: none;}

#multi-form #page-one {display:block;}

The button code on Page 1 would look something like this.

The button on Page 2 would look like this.

The first method I showed is too complicated and slow but works with even the oldest of the web browsers. The dynamic method is fast and simple to implement if you want to create multi page web forms use the dynamic method. If you have further comments and queries do not hesitate to ask. In the meantime you can look at how to create a web form using Adobe Flash and also add a Captcha to a HTML form.