0

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?

0

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/themename/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.

-1

Yes you have to write code for inserting data in your process.php

global $wpdb;
$name=$_POST['name'];
$email= $_POST['email'];
$mob=$_POST['moblieno'];
$service_type=$_POST['type_of_service'];
$msg=$_POST['message'];
$wpdb->insert('tbl_name',array('name_field'=>$name,'email_field'=>$email,'service-field'=>$service_type,'message_field'=>$msg));
6
  • Yes, I updated the code but it's not woking. Can you help me? Nov 26 '19 at 16:28
  • can you share exact error or problem??
    – Manan
    Nov 27 '19 at 7:07
  • I am new in wordpress, I just created a form in function.php now I have to submit the form using ajax but i don't know how to do that in wordprees. I tried code which is in the question but that is not working. Nov 27 '19 at 7:44
  • try and print error $wpdb->show_errors(); with this and make sure your table name and field name are coorect
    – Manan
    Nov 27 '19 at 7:58
  • I added $wpdb->show_errors(); in my process.php file but the issue is when I fill the form and click on submit my page got refreshed. I think it is not calling process.php file. is my URL is correct? Nov 27 '19 at 8:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.