How to submit the custom form data in database in WordPress without plugin using ajax?

phpjquerywordpressplugins


PHP Snippet 1:

function st_contact_form(){
ob_start();
    ?>
      <div class="contact_form-wrapper popup-contact-form">
         <form action="" method="post" name="contact_form" id="contact_form" autocomplete="off">
  <div class="row">      
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
             <div class="form-group">
               <input type="text" name="name" placeholder="Name" class="form-control" required>
             </div>
    </div>
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
             <div class="form-group">
               <input type="email" name="email" placeholder="Email Id" class="form-control" required>
            </div>
    </div>
 </div>  
 <div class="row">    
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
         <div class="form-group">
            <input type="text" name="mobileno" placeholder="Phone no" class="form-control" required>
        </div>
    </div>  
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
        <div class="form-group select-service">
            <select class="form-control" name="type_of_services" required>
                <option selected disabled>Select Service</option>
                <option value="1">Testing one</option>
                <option value="2">Testing two</option>

            </select>
        </div>
     </div>
   </div>
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 paddingLR0">
         <div class="form-group">
            <textarea class="form-control" placeholder="Message" name="message" rows="2" required></textarea>
         </div>
    </div>
         <div class="form-group ">
            <input type="submit" name="send" value="Submit" class="btn_st btn_maroon form_submit_btn">
         </div>
      </form>
   </div>
<?php
return ob_get_clean();
}
add_shortcode( 'contact_form', 'st_contact_form' );

PHP Snippet 2:

$("#contact_form").validate({
rules: {
    name: {
        required:true
    },
    email: {
        required:true,
        email: true
    },
    mobileno: {
        required:true,
        minlength: 10,
        maxlength: 10,
        number: true
    },
    type_of_services: {
        required:true
    },
    message: {
        required:true
    }
},

submitHandler: function(form) {
    if(isReqInprogress){
        return;
       }
        $.ajax({
        url:"/wp-content/themes/stratevic/process.php",
        type: "post",
        data:$('#contact_form').serialize(),           
        dataType:"JSON",
        success: function(response) {

        alert("Your message has been received and we will be contacting you shortly to follow-up.");
            isReqInprogress = false;
             }
    });
}
});

PHP Snippet 3:

<?php
define( 'BLOCK_LOAD', true );
require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp-config.php' );
require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp-includes/wp-db.php' );
$wpdb = new wpdb( DB_USER, DB_PASSWORD, DB_NAME, DB_HOST);

global $wpdb;        // <--- making $wpdb as global
$data = $_POST;
$query=$wpdb->insert('contact',
        array(
             'name' => $data['name'],
            'email' => $data['email'],
            'phone' => $data['mobileno'],
            'type_of_services' => $data['type_of_services'],
            'message' => $data['message']
        ),
        array(
            '%s',
            '%s',
            '%s',
            '%s',
            '%s',
        )
);


 if ($query) {
    $response['error'] = "true";

    }else{
    $response['error'] = "false";
    } 
echo json_encode($response);
exit();
    // $wpdb->show_errors(); 

?>

PHP Snippet 4:

wordpress/wp-content/themes/*your-theme*

Related Snippets