How To Create Multistep Registration Form In WordPress

Here we will learn about how to create a Multistep Registration form in WordPress using ajax.

These types of forms are often used when you need to collect a large number of data on your websites or applications.

It allows you to split your lengthy registration form into as many parts as you want.

A multi-step registration form can remove the complexity, save time, and make it easier for the person who is filling it up.

1. Create the table name  ‘multi_step’ in your database.

CREATE TABLE `multi_step` (
    `id` INT(11) NOT NULL AUTO_INCREMENT,
    `email` VARCHAR(100) NULL DEFAULT NULL,
    `password` VARCHAR(72) NULL DEFAULT NULL,
    `fName` VARCHAR(100) NULL DEFAULT NULL,
    `lName` VARCHAR(100) NULL DEFAULT NULL,
    `mobno` VARCHAR(100) NULL DEFAULT NULL,
    `address` VARCHAR(100) NULL DEFAULT NULL,
    PRIMARY KEY (`id`)
  )
  COLLATE='utf8_general_ci'
  ENGINE=InnoDB
  ;

2. Now, create a one template file in your active theme folder and paste this code.

<?php 
/*
Template Name: multi_stepform
*/get_header(); ?>
<div class="wrap">
  <div id="primary" class="content-area">
    <form id="regiration_form"  method="post">
      <div class="messages"></div>
      <fieldset>
        <h2>Step 1: Create your account</h2>
        <div class="form-group">
          <label for="email">Email address</label>
          <input type="email" class="form-control" id="email" name="email" placeholder="Enter Email Address">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="password" placeholder="Enter Password">
        </div>
        <input type="button" name="password" class="next btn btn-info" value="Next" />
      </fieldset>
      <fieldset>
        <h2> Step 2: Add Personnel Details</h2>
        <div class="form-group">
          <label for="fName">First Name</label>
          <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
        </div>
        <div class="form-group">
          <label for="lName">Last Name</label>
          <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter Last Name">
        </div>
        <input type="button" name="previous" class="previous btn btn-default" value="Previous" />
        <input type="button" name="next" class="next btn btn-info" value="Next" />
      </fieldset>
      <fieldset>
        <h2>Step 3: Contact Information</h2>
        <div class="form-group">
          <label for="mob">Mobile Number</label>
          <input type="text" class="form-control" id="mobno" name="mobno" placeholder="Enter Mobile Number">
        </div>
        <div class="form-group">
          <label for="address">Address</label>
          <textarea  class="form-control" id="address" name="address" placeholder="Enter Address"></textarea>
        </div>
        <input type="button" name="previous" class="previous btn btn-default" value="Previous" />
        <input type="submit" name="submit" class="submit btn btn-success" id = "multisubmit" value="Submit" />
      </fieldset>
    </form>
  </div>
</div>
<?php get_footer();

3. Open your functions.php file and place the following code.

Here we are using AJAX so, need to Create js file and your AJAX calls are in custom.js file, then add wp_localize_script for

get admin-ajax.php put URL in this JS file like so:

function enqueue_script_style() {
  wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
  wp_localize_script( 'custom-script', 'blog', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'enqueue_script_style' );

wp_ajax_ – This Action is used for a user is logged in to the website.
wp_ajax_nopriv_ – This Action is used when the user is not logged in of the website.

add_action('wp_ajax_nopriv_multistepform', 'multistepform');
add_action('wp_ajax_multistepform', 'multistepform');
function multistepform() {
  global $wpdb;
  $email   = $_POST['email'];
  $password  = $_POST['password'];
  $fname   = $_POST['fname'];
  $lname   = $_POST['lname'];
  $mobno   = $_POST['mobno']; 
  $address  = $_POST['address']; 
  $InsertUser = $wpdb->query("INSERT INTO multi_step ( email, password,fname, lname, mobno, address) VALUES('$email', '$password', '$fname', '$lname', '$mobno', '$address')");
  if(!$InsertUser){
    echo "Something is wrong";
  }else{
    echo "Your registration successfully"; 
  } 
  die();
}

4. Open your Custom.js file and place the following code.

jQuery( document ).ready( function(){
  var current = 1,current_step,next_step;
  jQuery(".next").click(function(){
    current_step = jQuery(this).parent();
    next_step = jQuery(this).parent().next();
    next_step.show();
    current_step.hide();
  });
  jQuery(".previous").click(function(){
    current_step = jQuery(this).parent();
    next_step = jQuery(this).parent().prev();
    next_step.show();
    current_step.hide();
  });
  
  jQuery('#multisubmit').on('click', function(){
    var email = jQuery( '#email' ).val();
    var password = jQuery( '#password' ).val();
    var fname = jQuery( '#fname' ).val();
    var lname = jQuery( '#lname' ).val();
    var mobno = jQuery( '#mobno' ).val();
    var address = jQuery( '#address' ).val();
    
    jQuery.ajax({
      url: blog.ajaxurl, 
      type: "POST",
      data: { 
        'action': 'multistepform',
        'email': email,
        'password': password,
        'fname': fname,
        'lname': lname,
        'mobno': mobno,
        'address': address,
      },
      success: function(data){
        if (data){
          jQuery('.messages').html("Registration successfully....");
        }else{
          jQuery('.messages').html("Something is Wrong.");
        } 
      }
    });
  });
});

5. Now, create one page and select a template “multi_stepform” so you can be show results as below video link.