Table booking form with ajax calling and send to emal

By ukmodak | March 31st 2024 10:38:39 AM | viewed 785 times

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

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

     $response['message']= "Table booking successfull.A email will be send to you for confirmation";
     echo json_encode($response);
      $response['message']= "fail";
      echo json_encode($response);

Download the theme to get the above script

Download current theme


Total : 20169

Today :16

Today Visit Country :

  • China
  • United States
  • United Kingdom
  • Portugal
  • Canada