In this tutorial I will show you how to implement a custom registration form for your wordpress website using ajax. Using ajax we will enhance the UX for our website because we will create real time actions.

First of all we need to create the HTML structure for our form, which should look like below:

<form id="create_accountt" method="POST">
          <div class="item">
            <label>Lastname</label>
            <input type="text" name="lastname" class="lastname">
          </div>
          <div class="item">
            <label>Firstname</label>
            <input type="text" name="firstname" class="firstname">
          </div>
          <div class="item">
            <label>Email</label>
            <input type="email" name="email" class="email">
          </div>
          <div class="item">
            <label>Password</label>
            <input type="password" name="password" class="password">
          </div>
          <div class="item terms full_item">
            <label><input type="checkbox" class="terms" name="terms">By checking this box and filling this form in, you agree that your personal data be processed by our site accordingly.
For more information, read our Terms & Conditions.</label>
          </div>
          <div class="submit">
            <button type="submit" value="">Create account</button>
          </div>
        </form>

Now that we have this form, we will have to get all values from the form using jquery, then send them in functions.php where we will validate the data, and if everything is ok create new user. To make that happen, make sure that you already added jquery to your website and create a new js file: main.js, because in this file we will get the data from our form and send it to backend.

Our main.js file should look like the following:

jQuery('#create_accountt').on('submit', function(e){
    e.preventDefault(); 
    var create_acc = jQuery('#create_accountt'),
      firstname = create_acc.find('.firstname').val(),
      lastname = create_acc.find('.lastname').val(),
      email = create_acc.find('.email').val(),
      password = create_acc.find('.password').val();
  
    jQuery.ajax({
      type:"POST",
      url:ajaxurl,
      data:{
        firstname:firstname,
        lastname:lastname,
        email:email,
        password:password,
        action:'register_new_user_custom'
      },
      success:function(result){
        console.log(result);	
      },
      error:function(error){
        
      }
    });	
  });

In the above function we jsut get all data from form and send it to our function which is added in action parameter: register_new_user_custom

Create wordpress user registration function:

add_action('wp_ajax_register_new_user_custom', 'register_new_user_custom');
add_action('wp_ajax_nopriv_register_new_user_custom', 'register_new_user_custom');
function register_new_user_custom(){
  $data = $_POST;
  
  $firstname = $data['firstname'];
  $lastname = $data['lastname'];
  $email = $data['email'];
  $password = $data['password'];
  $errors = array();
  
  if(empty($firstname) || !is_string($firstname)){
    $errors['firstname'] = 'This field is required.';
  }
  if(empty($lastname) || !is_string($lastname)){
    $errors['lastname'] = 'This field is required.';
  }
  if(empty($email)){
    $errors['email'] = 'This field is required.';
  }
  if(empty($password)){
    $errors['password'] = 'This field is required.';
  }
  if(email_exists($email)){
    $errors['email'] = 'This email address already exists.';
  }
  if(!is_email($email)){
    $errors['email'] = 'Your email address is incorrect.';
  }
  if(!empty($errors)){
    echo json_encode($errors);
    wp_die();
  }
  
    $password   =   esc_attr( $password );
    $email  	=   sanitize_email( $email );
    $firstname =   sanitize_text_field( $firstname );
    $lastname  =   sanitize_text_field( $lastname );
  
  $user_id = wp_create_user( $firstname, $password, $email );
  
}

This function will check all inputs if are empty or not,  then create user if everything is ok. In this function we have only the basic things, you can continue this code acording to your needs. If you have any questions or need any help, please just let your questions in comments section