//HTML Form
<form id="frmContactUs" class="customFurntiureForm mx-auto" style="max-width:600px;">
<div class="row g-3">
<div class="col-md-6">
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
<?php
$taxonomy = 'product_cat';
$terms = get_terms($taxonomy); // Get all terms of a taxonomy
if ( $terms && !is_wp_error( $terms ) ) : ?>
<select class="form-select rounded-0" aria-label="Select Category" id='pcategory' name="pcategory">
<option value="Select Category">Select Category</option>
<?php foreach ( $terms as $term ){
$termValue = $term->name;
?>
<option value="<?php echo $termValue ;?>"
<?php if ($_GET['selectCate'] == $termValue) echo 'selected'; ?>
><?php echo $termValue; ?></option>
<?php }?>
</select>
<?php endif;?>
<input type="hidden" name="action" value="myfilter">
</form>
</div>
<div class="col-md-6">
<select class="form-select rounded-0" aria-label="Select Product" id='pname' name="pname">
<option selected>Select Product</option>
<?php
global $post;
$category = get_queried_object();
$term_slug = $category->slug;
$my_query = new WP_Query( array(
'post_type'=>'product',
'posts_per_page' => -1,
));
if ($my_query -> have_posts()) : while($my_query -> have_posts()) : $my_query -> the_post(); ?>
<option value="<?php the_title();?>"><?php the_title();?></option>
<?php endwhile; wp_reset_postdata(); endif; ?>
</select>
</div>
<div class="col-12">
<input type="text" class="form-control rounded-0" placeholder="Name" name="name" aria-label="Name" required>
</div>
<div class="col-12">
<input type="email" class="form-control rounded-0" placeholder="Email" name="email" aria-label="Email" required>
</div>
<div class="col-md-6">
<input type="text" class="form-control rounded-0" placeholder="Location" name="location" aria-label="Location">
</div>
<div class="col-md-6">
<input type="text" class="form-control rounded-0" placeholder="Pin Code" name="pincode" aria-label="Pin Code">
</div>
<div class="col-12">
<select class="form-select rounded-0" aria-label="Acceptable Calling Hours" id='ach' name="ach">
<option selected>Acceptable Calling Hours</option>
<option value="Monday : 10am–8pm">Monday : 10am–8pm</option>
<option value="Tuesday : 10am–8pm">Tuesday : 10am–8pm</option>
<option value="Wednesday : 10am–8pm">Wednesday : 10am–8pm</option>
<option value="Thursday : 10am–8pm">Thursday : 10am–8pm</option>
<option value="Friday : 10am–8pm">Friday : 10am–8pm</option>
<option value="Saturday : 10am–4pm">Saturday : 10am–4pm</option>
</select>
</div>
<div class="col-12">
<textarea name="comment" class="form-control rounded-0" rows="4" placeholder="Comment"></textarea>
</div>
<div class="col-12">
<!--<button type="submit" id="submit" name="submit" class="btnBlack text-white rounded-0 btn">Submit </button>-->
<input type="submit" id="submit" name="submit" class="btnBlack text-white rounded-0 btn"/>
</div>
</div>
<div id="result_msg"> </div>
</form>
//Function.php code
function ajax_contact_us(){
date_default_timezone_set("Asia/Calcutta");
$arr=[];
wp_parse_str($_POST['contact_us'],$arr);
global $wpdb;
//global $table_prefix;
$table='wp_contact_us';
$date = date('Y-m-d h:i:s');
$result=$wpdb->insert($table,[
"Name" =>$arr['name'],
"Email" =>$arr['email'],
"Product_Category" =>$arr['pcategory'],
"Product_Name" =>$arr['pname'],
"Location" =>$arr['location'],
"Pin_Code" =>$arr['pincode'],
"Acceptable_Calling_Hours" =>$arr['ach'],
"Comment" =>$arr['comment'],
"Date" => $date
]);
if($result>0){
wp_send_json_success("Data inserted");
}else{
wp_send_json_error("Please try again");
}
}
add_action('wp_ajax_contact_us','ajax_contact_us');
//Javascript code footer
<script>
// Contact Form
jQuery('#frmContactUs').submit(function(event){
event.preventDefault();
jQuery('#result_msg').html('');
var link ="<?php echo admin_url('admin-ajax.php')?>";
var form = jQuery('#frmContactUs').serialize();
var formData = new FormData;
formData.append('action','contact_us');
formData.append('contact_us', form);
var ach = $('#ach').val() // This doesn't seem to hold the value
formData.append('ach', ach);
var pcategory = $('#pcategory').val() // This doesn't seem to hold the value
formData.append('pcategory', pcategory);
var pname = $('#pname').val() // This doesn't seem to hold the value
formData.append('pname', pname);
jQuery('#submit').attr('disabled',true);
jQuery.ajax({
url:link,
data:formData,
processData:false,
contentType:false,
type:'post',
success:function(result){
jQuery('#submit').attr('disabled',false);
if(result.success==true){
jQuery('#frmContactUs')[0].reset();
}
jQuery('#result_msg').html('<span class="'+result.success+'">'+result.data+'</span>')
//result.success
//result.data
}
});
});
</script>