Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 7, 2019 11:21 pm

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 either 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 at 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 you website using the Smart Forms script from CodeCanyon.

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, for example 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 lot 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 appropriate changes to input fields.

Here's what we'll be making:

Room reservation form

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 6 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 which have to be filled out by the visitors. 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="contact">
      <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.

Booking Form Header and Footer

Building Out the Form Components

Lets 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="[email protected]">
      <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.

Complete Booking Form

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 Font Awesome icons for more accurate representation of 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 name attribute of a field on the front-end, make sure to change the corresponding values in the PHP files on yourthe back-end. This way you won't loose any form data filled out by users.

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-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.

Form validation error example

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

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 hep 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 stay 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.


Original Link: https://code.tutsplus.com/tutorials/how-to-create-a-web-booking-form-with-the-smart-forms-script--cms-33825

Share this article:    Share on Facebook
View Full Article

TutsPlus - Code

Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.

More About this Source Visit TutsPlus - Code