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

Question

I have a created a contact form in the function.php and added short code on my page and it's working. I am getting my form.

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' );

I added below script in script file and validation is working. Now I want to know how to submit the form in wordpress? Should I create a table? or I have to create process.php file and add some logic?

$("#contact_form").validate({
rules: {
    name: {
        required:true
    },
    email: {
        required:true,
        email: true,
        emailExt: true
    },
    mobileno: {
        required:true,
        minlength: 10,
        maxlength: 10,
        number: true
    },
    type_of_services: {
        required:true
    },
    message: {
        required:true
    }
},
submitHandler: function(r) {
     if(isReqInprogress){
        return;
       }
    isReqInprogress = true;
    $.ajax({
                url:base_url+"/wp-content/themes/mytheme/process.php",

        type: "post",
        data:{name:name,email:email,mobileno:mobileno,type_of_services:type_of_services,message:message},
        dataType:"JSON",
        success: function(response) {
           alert("success");


    isReqInprogress = false;
        }


    })
}
});

Process.php

<?php
global $wpdb;
$data = $_POST;
$to = $data['email'];
$subject = 'The subject';
$body = 'The email body content';
$headers = array('Content-Type: text/html; charset=UTF-8');

//$mail = wp_mail($data['email'], $subject, $body, $headers );
//if ($mail) {
    $wpdb->insert('wp_contact',
        array(
            'name' => $data['name'],
            'email' => $data['email'],
            'mobileno' => $data['mobileno'],
            'message' => $data['message'],
        ),
        array(
            '%s',
            '%s',
            '%s',
            '%s',
        )
    );
//}

?>

Would you help me out with this issue?

Answer 1

Finally, I got my solution,

I added below code in function.php and using shortcode I am getting my form on webpage

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' );

Now next step is, JQuery validation and Ajax. Also I created a process.php file in my theme

$("#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;
             }
    });
}
});

Process.php

Note: I have created a contact table in my database

<?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(); 

?>

that's it. It's working perfectly for me.

Answer 2

You did not provide your process.php file so I'm just gonna assume that is where the mail logic happens. As you initially suspected you could create a database table and use the wpdb Class to insert the data into that table.

 // .../process.php

 ...
// pls escape the POST with a escape method of your choice
$data = $_POST;
$to = $data['email'];
$subject = 'The subject';
$body = 'The email body content';
$headers = array('Content-Type: text/html; charset=UTF-8');

$mail = wp_mail($data['email'], $subject, $body, $headers );
if ($mail) {
    $wpdb->insert('wp_email_subscription',
        array(
            'name' => $data['name'],
            'email' => $data['email'],
            'mobileno' => $data['mobileno'],
            'message' => $data['message'],
        ...
        ),
        array(
            '%s',
            '%s',
            '%s',
            '%s',
        ...
        )
    );
}

Keep in mind that you also have to create the fields in your table according to your needs.

Update: Regarding your comment that the process.php file being a placeholder now, you would place it within your themes root directory. An example being

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

where you have to replace your-theme with the theme you selected in the wordpress backend.

Now I imagine the e-mail is not send out yet this would probably be to broad of an answer but you could look into already answered questions on how to set up a wp mail etc. or read the codex here. For the mailing to work you also need to update your wordpress mail settings and have a Server with the possibility to send out emails.

The Wordpress wp_mail() function also returns a boolean value with this you could also fill your database depending on the state of the mail being send.

I also updated the code example above accordingly.