Sometimes we need to capture lots of user details during registration process and as a result we got long forms on web page. So the best solution is to break the form into smaller logical section and present it into a multi-step registration form. This type of mult-step registration form always improves usability on web page comparing to very long form.

I am going to explain how to convert very long form into multi-step registration form using Codeigniter, MySQL and jQuery.


Netbeans 8.2
XAMPP in Windows
Codeigniter 3.1.7

Go through below steps

Step 1. Create a table called user in MySQL database. Create database roytuts in MySQL server if it does not exist already.

Step 2. Now first configure Codeigniter 3. with Netbeans 8.2 IDE if you have not configured already. Setup Codeigniter, Netbeans and XAMPP in Windows

Step 3. Open application/config/autoload.php file and autoload few things

Step 4. Open application/config/database.php file and make required changes for database configurations

If you have password for the database then put appropriate password.

Step 5. Create Model class for database operations

Step 6. Create Controller class

Step 7. Create View file for user input

Step 8. Open file application/config/routes.php and change the default controller

$route['default_controller'] = 'usercontroller';

Step 9. Now run the application

multi step form using codeigniter mysql jquery

If you try to submit the form without filling data then you will see validation errors.

Once you fill the form with all input fields and you will find one row has been inserted into the database table and you will see the below response above the form

User record inserted successfully

Thanks for reading.

Software Professional, I am passionate to work on web/enterprise application. For more information please go to about me. You can follow on Twitter. You can be a friend on Facebook or Google Plus or Linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.