How To Create Multi Step Form Using JQuery And CSS3

| Last Updated: | In: Freebies, HTML / CSS, Jquery

Have you long form like profile fillups, checkout, registration, logins, etc. on your website, then break them into several sections and convert into a multi step form using jQuery and CSS3. By default only one section is visible, you can click on Next and Previous button to navigate next or previous section.

In this example i have created a registration form with 3 sections in HTML, i.e. this form includes three steps for registration.

Step 1- Create Your Account
Step 2- Social Profiles ( Your presence on the social network )
Step 3- Personal Details ( We will never sell it )

In step 3, when user clicks on finish button various details given by user will get submitted and user will registered with system.

How To Create Multi Step Form using jQuery and CSS3

Download      Demo

Add CSS and JS files
Search tag in file and add bellow code snippet bellow .

jQuery Code

Added bellow code snippets in your page before tags.


Bellow html included code of 3 steps form.


I hope this tutorial will help you to create multi step form using jQuery and CSS. Please don’t forget to subscribe our newsletter or join us on Facebook to be the first to learn the next great thing from freewebmentor.

Tags: , , , , , , ,

About: Prem Tiwari

Prem Tiwari is the founder of and is a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby.

You may also like:

Follow us!

Get Free Access of 400+ Scripts

Don't worry you'll not be spammed!

Featured eBook

WordPress Security Guide

Free Guide: Learn how to implement security guideline in your WordPress site...


Pincode Finder

pincode-finder tool

Online Pincode Finder

Best tool to locate post Office address and pincodes of all india...