In this tutorial we will see how to create a simple multi-step signup form using CSS3 and jQuery. To spice up things a bit, we will include progress bar with the form, so the users will be able to see the percentage of form completion.
You can take a look at the working demo if you click on the image below:
We will create four steps in our form:
1. username and password fields
2. first and last name and email address
3. age, gender and country
4. summary
HTML Code
First thing to do is to create the html structure. We need a box container with four divs, one for each step. The basic HTML code is the following:
Inside each box container we will put the fields and a simple helpfull label. You can see the code inside the first box in the code below:
We have used three input fields: username, password and confirm password and at the end of the box, an input submit for the next step. The other boxes work in the same way.
At the end of the container box you can see a simple progress bar. This is the necessary code:
The complete HTML code is the following:
As you can see, in the fourth step the table is empty. We fill it with the information entered by the users using jQuery.
CSS Code
Now we need to add the style on the form. First, we use the @fontface rule for using a custom font. I've used the Cantarell font. The complete CSS Code is listed below:
jQuery Code
We're going to use jQuery for:
- slide the steps
- check if the data are valid
- change the completion percentage of progress bar
We need load jQuery library inside the page and then to use two plugins:
- jQuery UI, the most famous plugin used to extend the jQuery functionality.
- jQuery inputfocus, my jQuery plugin used to manage focus and blur events of the form.
Our jQuery code is listed below:
The code from row 3 to 20 activate the inputfocus plugin to each input field. The code from row 27 to 64 check the validity of the data entered by the user (if username and password length is greather than 4 characters, if the password and confirm password fields are equal), then update the progress bar value and then slide to second step.
The code from row 71 to 100 check the data integrity for the second step (if first and last name aren't empty and if the email address is valid). The rest is similar to the previous code.
Conclusions
We have seen how simple its to create a multistep signup form. This is only an example so I omitted some features as back button, and more others. Anyway the example is ready to use and it needs only to change the form action with the link of your php file used to store data and to edit the jQuery line 125 to: $('form').submit();. You can also decide to use an AJAX calls to send the informations to server, and again it's very easy to implement.
To see form in action click on the image below:
and if you like the final result download form files using the below button.
