- Saved searches
- Use saved searches to filter your results more quickly
- solodev/booking-form
- Name already in use
- Sign In Required
- Launching GitHub Desktop
- Launching GitHub Desktop
- Launching Xcode
- Launching Visual Studio Code
- Latest commit
- Git stats
- Files
- README.md
- How to Create a Web Booking Form With the Smart Forms Script
- Why Use Smart Forms?
- What We’ll Be Building
- Getting Started
- Creating the Booking Form
- Add the Smart Form Boilerplate
- Building Out the Form Components
- Adding Validation to Our Booking Form
Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
solodev / booking-form Public archive
In this article, we will walk you through building a booking (hotels, flights, rental cars, etc.) form for your website using jQuery UI.
solodev/booking-form
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
Scheduling is an important part of the online ecosystem. Not only does it play a huge role in almost every web and mobile application we use, scheduling is what makes the web most useful. Without the context of time, quality content is hard to decipher. Additionally, scheduling is a large part of sales and provides convenience to your website visitors and customers who can schedule appointments, phone calls, demos, tours, and more on your website with a date picker.
Some websites take scheduling to an entirely different level like Expedia.com where scheduling is everything. You’d like a flight that leaves at this day and time and comes back at this day and time, etc. For whatever the use, jQuery UI’s date picker makes it easy to add any scheduling functionality to your website. In this article, Solodev will walk you through building a booking (hotels, flights, rental cars, etc.) form for your website using jQuery UI.
For detailed instructions, view Solodev’s How to Create a Booking Form with jQuery UI article.
Try out a working example on JSFiddle.
The booking form contains the following basic HTML markup.
Booking Form
Allow your users to book directly on your website with an intutive booking form using jQuery UI. Flights
Get the lowest rates on air fare! Hotels
Find the best hotels for the best price! Cars
Choose any car on the planet to get you there! Cruises
Let the finest cruise lines get you to your destination! Vacation Rentals
Book your own destination with vacation rentals. Bundle Deals
Create your own vacation bundle and find big savings! All required CSS is included in the file booking-form.css
The booking form uses the following JavaScript.
This tutorial contains the following third party resources.
How to Create a Web Booking Form With the Smart Forms Script
Monty Shokeen Last updated Aug 20, 2021
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.
name="viewport" content="width=device-width, initial-scale=1"> rel="stylesheet" href="path/to/css/smart-forms.css"> rel="stylesheet" href="path/to/css/font-awesome.min.css"> 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.
class="smart-forms smart-container wrap-2"> class="form-header header-primary"> class="fa fa-calendar">Make Room Reservations in Minutes method="post" action="/" id="booking-form"> type="submit" class="button btn-primary">Confirm Booking type="reset" class="button">Cancel 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 .
for="guestname" class="field-label">Please Enter Your Name for="guestname" class="field prepend-icon"> type="text" name="guestname" id="guestname" class="gui-input" required="" placeholder="John Doe/Jane Doe"> class="field-icon"> class="fa fa-user"> for="guestemail" class="field-label">Email Address for="guestemail" class="field prepend-icon"> type="email" name="guestemail" id="guestemail" class="gui-input" required="" placeholder="john@something.com"> class="field-icon"> class="fa fa-envelope"> for="guestelephone" class="field-label">Telephone / Mobile for="guestelephone" class="field prepend-icon"> type="text" name="guestelephone" id="guestelephone" class="gui-input" required="" placeholder="Telephone / Moble Number"> class="field-icon"> class="fa fa-phone-square"> for="adults" class="field-label">Number of Adults for="adults" class="field prepend-icon"> type="number" id="adults" name="adults" class="gui-input" required="" placeholder="Number of adults"> class="field-icon"> class="fa fa-users"> for="children" class="field-label">Number of Children for="children" class="field prepend-icon"> type="number" id="children" name="children" class="gui-input" required="" placeholder="Number of children"> class="field-icon"> class="fa fa-users"> for="checkin" class="field-label">Check-in Date for="checkin" class="field prepend-icon"> type="text" id="checkin" name="checkin" class="gui-input" required="" placeholder="mm/dd/yyyy"> class="field-icon"> class="fa fa-calendar"> for="checkout" class="field-label">Check-out Date for="checkout" class="field prepend-icon"> type="text" id="checkout" name="checkout" class="gui-input" required="" placeholder="mm/dd/yyyy"> class="field-icon"> class="fa fa-calendar"> class="tagline"> Please answer these questions for a pleasant stay 
type="checkbox" name="switch1" id="switch1" value="switch1"> class="switch-label" data-on="YES" data-off="NO"> Will you be bringing a pet? type="checkbox" name="switch2" id="switch2" value="switch2"> class="switch-label" data-on="YES" data-off="NO"> Do you need us to pick you up? for="comment" class="field-label">Anything else we should know about? for="comment" class="field prepend-icon"> class="gui-textarea" id="comment" name="comment" placeholder="Let us know about any special accommodation needs"> class="field-icon"> class="fa fa-comments"> Please: Be as descriptive as possible 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.
type="text/javascript" src="js/jquery-1.9.1.min.js"> type="text/javascript" src="js/jquery.form.min.js">