Home Forums Porto Template Booking Form

This topic contains 1 reply, has 2 voices, and was last updated by  Support2 3 months, 1 week ago. This post has been viewed 142 times

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10026901

    tropicalspots
    Participant

    Kindly assist me. How do I insert the email on the form for delivery of the bookings?


    #10026911

    Support2
    Keymaster

    Hello, thanks for your purchase 🙂

    The Demo Hotel Book Form doesn’t come with a ready server side integration. But you can easily integrate with our default “contact-form.php”. For it, please follow the steps below:

    1) First change the HTML of form to:

    <form id="bookForm" action="php/contact-form-book.php" method="POST">
    	<div class="alert alert-success d-none mt-4" id="formBookSuccess">
    		<strong>Success!</strong> Your book reservation has been sent to us.
    	</div>
    
    	<div class="alert alert-danger d-none mt-4" id="formBookError">
    		<strong>Error!</strong> There was an error sending your message.
    		<span class="text-1 mt-2 d-block" id="formBookErrorMessage"></span>
    	</div>
    	<div class="row mt-5 mb-5">
    		<div class="col-lg-4">
    ....
    ...
    ..
    .

    * Note that changed action of form and added success and error messages.

    2) Change the JS code of #bookForm at (js/demos/demo-hotel.js) line 126 to:

    $('#bookForm').validate({
    	submitHandler: function(form) {
    
    		var $form = $(form),
    			$messageSuccess = $('#formBookSuccess'),
    			$messageError = $('#formBookError'),
    			$submitButton = $(this.submitButton),
    			$errorMessage = $('#formBookErrorMessage'),
    			submitButtonText = $submitButton.val();
    
    		$submitButton.val( $submitButton.data('loading-text') ? $submitButton.data('loading-text') : 'Loading...' ).attr('disabled', true);
    
    		// Ajax Submit
    		$.ajax({
    			type: 'POST',
    			url: $form.attr('action'),
    			data: {
    				arrival: $form.find('#bookNowArrival').val(),
    				departure: $form.find('#bookNowDeparture').val(),
    				adults: $form.find('#bookNowAdults').val(),
    				kids: $form.find('#bookNowKids').val(),
    				room: $form.find('input[name="bookNowRoom"]:checked').val(),
    				fullname: $form.find('#bookNowFullName').val(),
    				address1: $form.find('#bookNowStreetAdd1').val(),
    				address2: $form.find('#bookNowStreetAdd2').val(),
    				city: $form.find('#bookNowCity').val(),
    				state: $form.find('#bookNowState').val(),
    				zip: $form.find('#bookNowZip').val(),
    			}
    		}).always(function(data, textStatus, jqXHR) {
    
    			$errorMessage.empty().hide();
    
    			if (data.response == 'success') {
    				console.log(data);
    
    				$messageSuccess.removeClass('d-none');
    				$messageError.addClass('d-none');
    
    				// Reset Form
    				$form.find('.form-control')
    					.val('')
    					.blur()
    					.parent()
    					.removeClass('has-success')
    					.removeClass('has-danger')
    					.find('label.error')
    					.remove();
    
    				if (($messageSuccess.offset().top - 80) < $(window).scrollTop()) {
    					$('html, body').animate({
    						scrollTop: $messageSuccess.offset().top - 80
    					}, 300);
    				}
    
    				$form.find('.form-control').removeClass('error');
    
    				$submitButton.val( submitButtonText ).attr('disabled', false);
    				
    				return;
    
    			} else if (data.response == 'error' && typeof data.errorMessage !== 'undefined') {
    				$errorMessage.html(data.errorMessage).show();
    			} else {
    				$errorMessage.html(data.responseText).show();
    			}
    
    			$messageError.removeClass('d-none');
    			$messageSuccess.addClass('d-none');
    
    			if (($messageError.offset().top - 80) < $(window).scrollTop()) {
    				$('html, body').animate({
    					scrollTop: $messageError.offset().top - 80
    				}, 300);
    			}
    
    			$form.find('.has-success')
    				.removeClass('has-success');
    				
    			$submitButton.val( submitButtonText ).attr('disabled', false);
    
    		});
    	}
    });

    3) Create a new file inside the PHP folder:
    (php/contact-form-book.php)
    https://pastebin.com/raw/GuThbjpA

    * Configure this file with your email data. Follow the instructions inside the file.

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


Viewing 2 posts - 1 through 2 (of 2 total)