How to Create a Web Booking Form With the Smart Forms Script

Booking forms can serve a lot of purposes on a website. You can use them to allow your visitors to book a hotel room or tickets to a popular event. They can also be used for other things like booking appointments with clients.

They are a great way for people to simply give you all the necessary information about their stay or visit and check the availability on a particular date. This saves both you and your clients a lot of hassle.

There are a lot of plugins and scripts available for you to add booking forms to your website. The right choice for your situation depends on the features that you are looking for as well as factors like ease of use and budget. In this tutorial, I will show you how to create a booking form for your website using the Smart Forms script from CodeCanyon (no longer available).

Why Use Smart Forms?

Before we start diving deeper into the topic, I would like to explain why I chose Smart Forms for this task.

One of the first things that you will note on the description page of Smart Forms is that it offers a lot of features and allows you to create all kinds of forms. There is a good chance that the website you are creating will need at least a few other different types of forms, such as a contact form or a comment form. With Smart Forms, you will be able to create all of these in very little time.

You also get lots of options when it comes to customization and features. The script is updated on a regular basis and keeps receiving new features. It also offers a large number of starter templates with different forms in three unique styles and color schemes. This way you can be certain that any form you create blends in perfectly with the rest of your webpage.

What We'll Be Building

Let's create the front-end of a booking form using Smart Forms. We will be creating a form to book hotel rooms. The same principles will be applicable for creating a booking form for an event or any other type of form. You just have to make the appropriate changes to the input fields.

Here's what we'll be making:

Getting Started

If you haven't already, the first step would be to purchase the script from CodeCanyon. You will be able to download the files after you purchase the script, and you'll also be entitled to free lifetime updates and support for six months.

After you extract the downloaded .zip file, you will notice that it already contains a lot of templates for everything ranging from simple comment and contact forms to some multi-step forms. You can simply start using any of these templates in your projects and be good to go in ten to fifteen minutes.

To help you understand all the basics, we will be creating our booking form from scratch.

Creating the Booking Form

The markup of the booking form page should look something like this in the beginning.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> Booking Form - XYZ Hotels </title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="path/to/css/smart-forms.css">
	<link rel="stylesheet" href="path/to/css/font-awesome.min.css">	   
  </head>
  <body>
 
	<!-- OUR BOOKING FORM MARKUP -->
 
  </body>
</html>

Smart Forms relies on Font Awesome to add all the icons to the form, so you have to load both the CSS files.

Now, we will move on to the contents of our booking form. The Smart Forms framework divides the form into three sections: the form header, the form body, and the form footer.

The form header section at the top is used to display the form title in a presentable manner. For a booking form, you could say something like Book a room online or Make reservations in minutes.

The form body will contain a bunch of elements that visitors have filled out. You could ask for any relevant information here, like the number of adult guests and the number of children accompanying them. Similarly, you could ask for their period of stay, contact information, and other necessary details.

The form footer section contains the buttons to submit or cancel the form. It is displayed prominently at the bottom of the form.

Add the Smart Form Boilerplate

Here is the form markup that we need to add inside the body of our webpage to display our booking form.

<div class="smart-wrap">
  <div class="smart-forms smart-container wrap-2">
  
    <div class="form-header header-primary">
      <h4><i class="fa fa-calendar"></i>Make Room Reservations in Minutes</h4>
    </div>
    
    <form method="post" action="/" id="booking-form">
      <div class="form-body">
      
       <!-- OUR FORM ELEMENTS WILL GO HERE -->                                                
        
      </div>
      <div class="form-footer">
        <button type="submit" class="button btn-primary">Confirm Booking</button>
        <button type="reset" class="button">Cancel</button>
      </div>
      
    </form>
    
  </div>
</div>

With all the markup that we have added to our page so far, you should get something similar to the image below.

Building Out the Form Components

Let's add our actual form elements to the booking form now. This is the markup that you need to do so. It will go inside the div tag with class form-body.

<div class="section">
  <label for="guestname" class="field-label">Please Enter Your Name</label>
  <label for="guestname" class="field prepend-icon">
    <input type="text" name="guestname" id="guestname" class="gui-input" required="" placeholder="John Doe/Jane Doe">
    <span class="field-icon"><i class="fa fa-user"></i></span>  
  </label>
</div>
              
<div class="frm-row">
  <div class="section colm colm6">
    <label for="guestemail" class="field-label">Email Address</label>
    <label for="guestemail" class="field prepend-icon">
      <input type="email" name="guestemail" id="guestemail" class="gui-input" required="" placeholder="john@something.com">
      <span class="field-icon"><i class="fa fa-envelope"></i></span>  
    </label>
  </div>
  
  <div class="section colm colm6">
    <label for="guestelephone" class="field-label">Telephone / Mobile</label>
    <label for="guestelephone" class="field prepend-icon">
      <input type="text" name="guestelephone" id="guestelephone" class="gui-input" required="" placeholder="Telephone / Moble Number">
      <span class="field-icon"><i class="fa fa-phone-square"></i></span>  
    </label>
  </div>
</div>

<div class="frm-row">
  <div class="section colm colm6">
    <label for="adults" class="field-label">Number of Adults</label>
    <label for="adults" class="field prepend-icon">
      <input type="number" id="adults" name="adults" class="gui-input" required="" placeholder="Number of adults">
      <span class="field-icon"><i class="fa fa-users"></i></span>  
    </label>
  </div>
  
  <div class="section colm colm6">
    <label for="children" class="field-label">Number of Children</label>
    <label for="children" class="field prepend-icon">
      <input type="number" id="children" name="children" class="gui-input" required="" placeholder="Number of children">
      <span class="field-icon"><i class="fa fa-users"></i></span>  
    </label>
  </div>
</div>

<div class="frm-row">
  <div class="section colm colm6">
    <label for="checkin" class="field-label">Check-in Date</label>
    <label for="checkin" class="field prepend-icon">
      <input type="text" id="checkin" name="checkin" class="gui-input" required="" placeholder="mm/dd/yyyy">
      <span class="field-icon"><i class="fa fa-calendar"></i></span>  
    </label>
  </div>
  
  <div class="section colm colm6">
    <label for="checkout" class="field-label">Check-out Date</label>
    <label for="checkout" class="field prepend-icon">
      <input type="text" id="checkout" name="checkout" class="gui-input" required="" placeholder="mm/dd/yyyy">
      <span class="field-icon"><i class="fa fa-calendar"></i></span>  
    </label>
  </div>
</div>

<div class="spacer-t20 spacer-b30">
  <div class="tagline"><span>Please answer these questions for a pleasant stay</span></div>
</div>

<div class="frm-row">
  <div class="option-group field">
  
    <div class="section colm colm6">
      <label class="switch">
        <input type="checkbox" name="switch1" id="switch1" value="switch1">
        <span class="switch-label" data-on="YES" data-off="NO"></span>
        <span>Will you be bringing a pet?</span>
      </label>
    </div>
        
    <div class="section colm colm6">
      <label class="switch">
        <input type="checkbox" name="switch2" id="switch2" value="switch2">
        <span class="switch-label" data-on="YES" data-off="NO"></span>
        <span>Do you need us to pick you up?</span>
      </label>
    </div>
              
  </div>
</div>



<div class="section">
  <label for="comment" class="field-label">Anything else we should know about?</label>
  <label for="comment" class="field prepend-icon">
    <textarea class="gui-textarea" id="comment" name="comment" placeholder="Let us know about any special accommodation needs"></textarea>
    <span class="field-icon"><i class="fa fa-comments"></i></span>
    <span class="input-hint"> 
      <strong>Please:</strong> Be as descriptive as possible
    </span>   
  </label>
</div>

With all the markup added into the form, it should now look like the image below.

It might seem like a lot of code now, but you can copy most of it from different starter templates. After that, you simply need to make little changes to the markup in order to customize it. For example, you can easily change the class of the Font Awesome icons for a more accurate representation of the input fields.

It is important to remember that you should be careful when making changes to some attributes of the form elements because this will affect the overall appearance or behavior of the form. For instance, you can change the width of different elements by changing the colm classes. When two input elements in a row have classes colm8 and colm4, their width would be in the ratio 2:1. If the digits don't add up to 12, you will also see some blank space in that row.

Whenever you change the value of the name attribute of a field on the front-end, make sure to change the corresponding values in the PHP files on the back-end. This way, you won't lose any form data that users have provided.

Adding Validation to Our Booking Form

The Smart Forms framework relies on core jQuery and many other jQuery-related plugins to give you different features like a month and time picker or the ability to drag and drop files. There are a total of 22 different JavaScript files that you can use to enhance the functionality of the form.

Make sure that you only include the files that are necessary for your particular form to work. The function of each of these files is mentioned in the documentation. In our case, we will need to include the core jQuery file, the jQuery UI file, and form validation files.

You can simply add the following code to your webpage to include all the JavaScript files. You can place it either in the head of the document or just before the end of the body.

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-custom.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/additional-methods.min.js"></script>

Once you have added the files, you need to add some code that can begin the validation process or add other elements like a date range picker to the form UI. Here is the code that you need to add.

<script type="text/javascript">
$("#booking-form").validate();

$("#checkin").datepicker({
	defaultDate: "+1w",
	changeMonth: false,
	numberOfMonths: 1,
	prevText: '<i class="fa fa-chevron-left"></i>',
	nextText: '<i class="fa fa-chevron-right"></i>',
	onClose: function( selectedDate ) {
		$( "#checkout" ).datepicker( "option", "minDate", selectedDate );
	}
});

$("#checkout").datepicker({
	defaultDate: "+1w",
	changeMonth: false,
	numberOfMonths: 1,
	prevText: '<i class="fa fa-chevron-left"></i>',
	nextText: '<i class="fa fa-chevron-right"></i>',			
	onClose: function( selectedDate ) {
		$( "#checkin" ).datepicker( "option", "maxDate", selectedDate );
	}
});
</script>

You will have to replace booking-form with the id that you have set for your form, and it will automatically start validating the fields. The image below shows how the error messages show up by default after you start validation.

You can pass a couple of options when initializing the date pickers. They will determine the UI of the calendar, like the number of months to show or the date from which the calendars should be shown. For example, setting defaultDate to +100w will open the calendars 100 weeks into the future.

One more thing worth noticing is that after you have selected a date, the check-in calendar sets the minimum date for the checkout calendar to be the selected date. This is done by the callback function attached to the onClose event. The checkout calendar does something similar, but it sets the maximum date for the check-in calendar.

Date picker calendar UI

Using a Different Theme

One of the advantages of using the Smart Forms script is that it allows you to quickly change the theme for any forms you create by simply including the relevant theme file and adding an appropriate CSS class to different elements. I will explain the process here step by step.

1. Include the CSS Theme File

The theme files are located in the directory css/smart-themes. You can pick one of those files and include it inside the booking form page. We will use red.css for this example. Your HTML code where you added the original CSS files should look like the following snippet now.

1	<link rel="stylesheet" href="css/smart-forms.css">
2	<link rel="stylesheet" href="css/smart-themes/red.css">
3	<link rel="stylesheet" href="css/font-awesome.min.css">

2. Add Appropriate Classes

Reloading the page now will not show you any visible changes in the appearance or color scheme. However, you can click on the date picker to see that the name of the month is now indeed in red. This confirms that the CSS was loaded properly.

You can change the header to red by replacing

1	<div class="form-header header-primary">

with the following HTML:

1	<div class="form-header header-red">

Similarly, you can change the color of the icon form elements and when they are active by adding the class theme-red beside form-body. Here is an example:

1	<div class="form-body theme-red">

Finally, you can change the color of remaining elements like buttons, options (checkboxes and radio buttons), and switches by using the classes btn-red, option-red, and switch-red respectively.

1	<button type="submit" class="button btn-red">Confirm Booking</button>
2	<label class="switch switch-red">

Adding CAPTCHA and Validating Form Fields

You can add more enhancements like form validation with custom error messages and basic CAPTCHA protection. All these features are built into smart form scripts. You just have to figure out how to integrate them in your form. Hopefully, this section will help you understand the whole process a little better.

The AJAX functionality and CAPTCHA are based on using PHP and JavaScript together, so you need to make sure that the form is placed on a PHP page. The value of the action attribute in the form should point to a file called smartprocess.php.

1	<form method="post" action="php/smartprocess.php" id="booking-form">

You can add a CAPTCHA to your form by adding the following HTML wherever you would like the CAPTHCA to appear.

<div class="section">
	<div class="smart-widget sm-left sml-120">
		<label class="field">
			<input type="text" name="captcha" id="captcha" class="gui-input sfcode" maxlength="6" placeholder="Enter CAPTCHA">
		</label>
		<label class="button captcode">
			<img src="php/captcha/captcha.php?<?php echo time();?>" id="captchax" alt="captcha">
			<span class="refresh-captcha"><i class="fa fa-refresh"></i></span>
		</label>
	</div>
</div>

The reloaded form page should now contain a captcha similar to the image below.

You also need to update the JavaScript in your form with the following version.

jQuery(document).ready(function($){
    
	function reloadCaptcha(){ $("#captchax").attr("src","php/captcha/captcha.php?r=" + Math.random()); }
				
	$('.captcode').click(function(e){
		e.preventDefault();
		reloadCaptcha();
	});
	
	function swapButton(){
		var txtswap = $(".form-footer button[type='submit']");
		if (txtswap.text() == txtswap.data("btntext-sending")) {
			txtswap.text(txtswap.data("btntext-original"));
		} else {
			txtswap.data("btntext-original", txtswap.text());
			txtswap.text(txtswap.data("btntext-sending"));
		}
	}

	/* @custom validation method (smartCaptcha) 
	------------------------------------------------------------------ */	
	$.validator.methods.smartCaptcha = function(value, element, param) {
			return value == param;
	};
	
	$("#booking-form").validate({
											
		errorClass: "state-error",
		validClass: "state-success",
		errorElement: "em",
		onkeyup: false,
		onclick: false,						
		rules: {
				guestname: {
					required: true,
					minlength: 3
				},		
				guestemail: {
					required: true,
					email: true
				},
				guestphone: {
					required: true
				},
				adults: {
					required: true,
					number: true
				},								
				children: {
					required: true,
					number: true
				},
				checkin:{
					required:true	
				},
				checkout:{
					required:true	
				},
				captcha:{
					required:true,
					remote:'php/captcha/process.php'
				}								
		},
		messages:{
				guestname: {
						required: 'Please enter your name.',
						minlength: 'Name must be at least 2 characters.'
				},				
				guestemail: {
						required: 'Please enter your email address.',
						email: 'Please enter a valid email address.'
				},
				adults: {
						required: 'Please enter the number of adult guests.',
						number: 'Please enter a valid number.'
				},														
				children: {
						required: 'Confirm the number of child guests.',
						number: 'Please enter a valid number.'
				},	
				checkin:{
						required: 'Please select a checkin date.'
				},
				checkout:{
						required:'Please select a checkout date.'
				},
				captcha:{
						required: 'You must enter the captcha code',
						remote:'Captcha code is incorrect'
				}								
		},
		highlight: function(element, errorClass, validClass) {
				$(element).closest('.field').addClass(errorClass).removeClass(validClass);
		},
		unhighlight: function(element, errorClass, validClass) {
				$(element).closest('.field').removeClass(errorClass).addClass(validClass);
		},
		errorPlacement: function(error, element) {
			if (element.is(":radio") || element.is(":checkbox")) {
					element.closest('.option-group').after(error);
			} else {
					error.insertAfter(element.parent());
			}
		},				
		submitHandler:function(form) {
			$(form).ajaxSubmit({
					target:'.result',			   
					beforeSubmit:function(){
							swapButton();
							$('.form-footer').addClass('progress');
					},
					error:function(){
							swapButton();
							$('.form-footer').removeClass('progress');
					},
						success:function(){
							swapButton();
							$('.form-footer').removeClass('progress');
							$('.alert-success').show().delay(7000).fadeOut();
							$('.field').removeClass("state-error, state-success");
							if( $('.alert-error').length == 0){
								$('#booking-form').resetForm();
								reloadCaptcha();
							}
						}
				});
		}
		
	});	
	 
	$("#checkin").datepicker({
		defaultDate: "+1w",
		changeMonth: false,
		numberOfMonths: 1,
		prevText: '<i class="fa fa-chevron-left"></i>',
		nextText: '<i class="fa fa-chevron-right"></i>',
		onClose: function( selectedDate ) {
			$( "#checkout" ).datepicker( "option", "minDate", selectedDate );
		}
	});
	 
	$("#checkout").datepicker({
		defaultDate: "+1w",
		changeMonth: false,
		numberOfMonths: 1,
		prevText: '<i class="fa fa-chevron-left"></i>',
		nextText: '<i class="fa fa-chevron-right"></i>',            
		onClose: function( selectedDate ) {
			$( "#checkin" ).datepicker( "option", "maxDate", selectedDate );
		}
	});
});

This will take care of showing more helpful error messages right below the improperly filled form elements. The requirements that need to be fulfilled for a form element input to be considered valid are listed under rules, and the error messages that are shown to the user are placed inside the messages object.

The following image shows how the error messages would appear if users try to submit a form with invalid fields.

Final Thoughts

In this tutorial, we learned how to create a booking form with the Smart Forms script available on CodeCanyon. During the process, we covered some basics to help you get started quickly and create your own unique forms. As you can see, it is very easy to create nice-looking forms with input validation and other enhancements using Smart Forms.

You can create a lot more than just booking forms with the Smart Forms framework. The process of creating the markup and adding JavaScript functionality will still be similar to what we have covered here. If you ever feel stuck, the detailed documentation will help you out. You also get access to free support for six months, so figuring out how to make a form work would be very easy.

My advice would be that you begin by making small changes to the starter templates provided in the download file and then begin creating custom forms from scratch.