Form submission using AJAX and handling response in Wordpress Website

Form submission using Ajax call Contact Form

<form action="#" id="contactForm" method="post">  
 <input class="require" type="text" placeholder="First Name" name="firstName">    
<span class="fieldError"></span>  
<input class="require" type="text" placeholder="Last Name" name="lastName">  
<span class="fieldError"></span>   
.   
.  
.  
<input type="submit" value="Submit">  
</form>

client side validation with ajax call

jQuery('#contactForm').submit(ajaxSubmit);  
function ajaxSubmit(){  
var newContactForm = jQuery(this).serialize();  
var flag = 0;  
    jQuery('.require', '#contactForm').each(function(){  
        var inputVal = jQuery(this).val();  
if(jQuery.trim(inputVal) === ""){  
            flag = 1;  
            jQuery(this).next().html("Can't be blank");  
            jQuery(this).next().show();  
        }  
        else{  
            jQuery(this).next().hide();  
        }  
    });  
    if(flag){  
        return false;  
    }  
    jQuery.ajax({  
        type:"POST",  
        url: "/wp-admin/admin-ajax.php?action=contactForm",  
        data: newContactForm,  
        success:function(data){  
            jQuery(':input','#contactForm')  
                .not(':button, :submit, :reset, :hidden')  
                .val('')  
                .removeAttr('checked')  
                .removeAttr('selected');  
            jQuery("#feedback").html(data);  
            jQuery("#feedback").fadeOut(10000);  
        },  
        error: function(errorThrown){  
            alert(errorThrown);  
        }  
    });  
    return false;  
}

store form data in db and send mail
add the following code in functions.php

wp_enqueue_script('jquery');  
add_action('wp_ajax_addContactForm', 'addContactForm');  
add_action('wp_ajax_nopriv_addContactForm', 'addContactForm');  
function addContactForm(){  
    global $wpdb;  
    $first_name = $_POST['firstName']; $last_name = $_POST['lastName'];  
    $email = $_POST['email'];  
    .  
    .  
    .  
    if($wpdb->insert('table_name',array(  
        'first_name' => $first_name,  
        'last_name' => $last_name,  
        'email' => $email,  
        .  
        .  
        .  
    ))===FALSE){  
        echo "Error";  
    }  
    else {  
        $headers = 'From: xyz <[email protected]>';  
        $subject = "Thank you";  
        $body = "<p>Thank you</p><p>.........</p>";  
        wp_mail( $email, $subject, $body, $headers);  
        echo "<div class='success'>Thank you for filling out your information, we will be in contact shortly.</div>";  
    }  
    exit;  
}  

You should use:

      $.ajax ({
            type: 'POST',
            url: $(this).attr.action, 
            data: mydata,
            success: function(response) {  // here you receive response from you serverside 
               $("#contact_form").css({"opacity":"1"});    
               $('#error_box').html(response).fadeIn('fast').css({"height": "auto"});
            }
        });

Your server action url: $(this).attr.action, should return message which be inserted in #error_box

First create form like this

<p class="register-message"></p>
<form action="#" method="POST" name="testregister" class="register-form">
  <fieldset>
    <label><i class="fa fa-file-text-o"></i> Register Form</label>
    <input type="text" name="firstname" placeholder="Username" id="firstname">
    <p id="firstname-error" style="display:none">Firstname Must be Enter</p>
    <input type="email" name="email" placeholder="Email address" id="email">
    <p id="email-error" style="display:none">Email Must Be Enter</p>
    <input type="submit" class="button" id="test" value="Register">
  </fieldset>
</form>

then bind the click and send ajax call

<script type="text/javascript">

 jQuery('#test').on('click', function(e) {
    e.preventDefault();
    var firstname = jQuery('#firstname').val();
    var email = jQuery('#email').val();
    if (firstname == "") {
        jQuery('#firstname-error').show();
        return false;
    } else {
        jQuery('#firstname-error').hide();
    }
    if (email == "") {
        jQuery('#email-error').show();
        return false;
    } else {
        jQuery('#email-error').hide();
    }
    jQuery.ajax({
        type: "POST",
        dataType: 'json',
        url: "<?php echo admin_url('admin-ajax.php'); ?>",
        data: {
        action: "test", // redirect function in function.php
        firstname: firstname,
        email: email
        },
        success: function(results) {
        //console.log(results);
        if (results == "1") {
            jQuery('.register-message').text("Email already exist");
        } else {
            jQuery('.register-message').text("Register successfu");
        }

        },
        error: function(results) {}
    });
    });
 </script>

In function.php add the below code to insert data in table

 <?php
     // 

     add_action('wp_ajax_test', 'test', 0);
     add_action('wp_ajax_nopriv_test', 'test');
     function test()
     {
         $firstname = stripcslashes($_POST['firstname']);
         $email = stripcslashes($_POST['email']);

         global $wpdb;
         $q = $wpdb->prepare("SELECT * FROM wp_test WHERE email='" . $email . "' ");
         $res = $wpdb->get_results($q);
         if (count($res) > 0) {
             echo "1";
         } else {
             $user_data = array(
                 'firstname' => $firstname,
                 'email' => $email
             );
             $tablename = $wpdb->prefix . 'test';
             $user_id = $wpdb->insert($tablename, $user_data);
             echo "0";
         }
         die;
     }