Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. JavaScript
Code

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

by
Difficulty:BeginnerLength:MediumLanguages:

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.

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:

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

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.

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

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.

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

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.

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.