How to create a table booking form with ajax calling and send to emali
Download a table booking form with ajax calling and send to emali
Add this script on current theme function
function twentynineteen_scripts() {
wp_enqueue_style( 'ukmcss', get_theme_file_uri().'/css/css.css', '1.0', 'all' );
wp_enqueue_style( 'ukmcss', get_theme_file_uri().'/css/css.css', '1.0', 'all' );
wp_enqueue_style( 'ukminline', get_theme_file_uri().'/css/inline.css', '1.0', 'all' );
wp_enqueue_style( 'ukmminify', get_theme_file_uri().'/css/minify-b1.css', '1.0', 'all' );
wp_enqueue_style( 'twentynineteen-print-style', get_template_directory_uri() . '/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' );
wp_enqueue_script( 'twentynineteen-priority-menu', get_theme_file_uri( '/js/booking.js' ), array(), '1.0', true );
wp_localize_script( 'my_script_handle', 'uk_ajaxurl', admin_url( 'admin-ajax.php' ) );
}
add_action( 'wp_enqueue_scripts', 'twentynineteen_scripts' );
Add the following code on the bellow of the function page
add_action('wp_ajax_table_booking','add_booking');
add_action('wp_ajax_nopriv_table_booking','add_booking');
function add_booking(){
$send_email =null;
$detail ='';
$response = array();
global $wpdb;
$date = isset($_POST['date'])?trim($_POST['date']):null;
$time = isset($_POST['time'])?trim($_POST['time']):null;
$no_guest = isset($_POST['no_guest'])?trim($_POST['no_guest']):null;
$email = isset($_POST['email'])?trim($_POST['email']):null;
$mobile = isset($_POST['mobile'])?trim($_POST['mobile']):null;
$name = isset($_POST['name'])?trim($_POST['name']):null;
$messege = isset($_POST['messege'])?trim($_POST['messege']):null;
if(! empty($email) && ! empty($mobile) && ! empty($no_guest) && ! empty($date)){
$results = $wpdb->get_results( 'SELECT * FROM uk_email_setting WHERE is_active=1');
foreach($results as $res){
$to = $res->to_email;
$subject ='Table Booking from '.$name;
$detail ='<html><body>';
$detail .='<div style="display:block;">Table booking date: '.$date.'</div><br/>';
$detail .='<div style="display:block;">Table booking time: '.$time.'</div><br/>';
$detail .='<div style="display:block;">No of guest: '.$no_guest.'</div><br/>';
$detail .='<div style="display:block;">Customer Name '.$name.'</div><br/>';
$detail .='<div style="display:block;">Customer mobile no. '.$mobile.'</div><br/>';
$detail .='<div style="display:block;">Customer e-mail '.$email.'</div><br/>';
$detail .='<div style="display:block;">Message: '.$message.'</div><br/>';
$detail .='</body></html>';
//$headers ='MIME-Version:1.0'.'\r\n';
//$headers .='Content-Type:text/html;charset=UTF-8'.'\r\n';
$headers = array(
'MIME-Version:1.0',
'Content-Type:text/html;charset=UTF-8',
'Cc:'.$res->cc_email
);
remove_filter( 'wp_mail_content_type', 'set_html_content_type' );
add_filter( 'wp_mail_content_type', 'set_html_content_type' );
function set_html_content_type() {
return 'text/html';
}
$send_email = wp_mail( $to,$subject,$detail,$headers,'');
}
}
if($send_email){
$response['message']= "Table booking successfull.A email will be send to you for confirmation";
echo json_encode($response);
}else{
$response['message']= "fail";
echo json_encode($response);
}
die();
}
Download the theme to get the above script
Download current theme
