Create an online booking form

Introduction

The need for an online booking form on your website is becoming increasingly common. Many businesses need to find a quick and easy way to manage reservations online without having to use outdated tools such as fax and phone. As a matter of fact, building a simple online booking form is really quite simple. In this article we'll take care only of the UI aspect of a reservation form but of course, in order to better understand this article, it's necessary to be a little bit confident with web programming languages. We will see just how easy is create a simple online booking form.

What fields must be included in a reservation form?

It's important to know how the infrastructure behind it will be organized. So it's necessary to have all the information we need before starting to think about what our module will look like.

For this article we'll assume that one of our client has a dental practice and asks us to include a booking form on them website so that they can manage all appointments online.

At this point we have to know what data we extremely need to book the appointment.

Just to be clear, the easier our booking form is to use, the more benefits we will get from it.

In fact, talking about UX and UI, if the form is full of questions and extraneously boring, the end user will tend to abandon the online form, nullifying the main goal of our online booking form.

So, in this case, for online booking forms it's always recommended to ask less information as possible while keeping the essential data always in the foreground. So try to assess what the client needs most and skip absolutely everything superfluous.

Create a reservation form in HTML, CSS and jQuery

A part from date input (and time input if needed), we should include first name, last name, and email. All the rest, in the practical facts, can be skipped on the first step.

I'd go for something really simple, just 3 steps for data fields and a last step for the submission response. I'd also add a "status" bar to show the user how many steps left before ending.

Step 1: create the structure of the reservation form in HTML

Step 2: Change and customize the style of the booking form with CSS

In this example we are using SCSS preprocessor to go faster.

Step 3: Make the booking form dynamic with jQuery

How to add and customize datepicker on your online booking form with jQuery.

Our booking form could be considered complete now. My only 2 cents here is that we're using all the native browser components and, as everybody knows, native datepicker and timepicker aren't exactly the best. Widgets like datedropper and timedropper look better and are easier to use. In no time, you can improve usability and aspect of date and time selector.

How to add datedropper and timedropper to your webpages

Download and include libraries on the <head> of webpages you want to initialize these components:

  
<head>

  <!-- REQUIRED -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

  <!-- OUR PLUGINS -->
  <script src="datedropper-jquery.js"></script>
  <script src="timedropper-jquery.js"></script>

</head>
  

Once done, simply initialize scripts by specifing selectors:

  
<script>
  $('input[name="date"]').dateDropper();
  $('input[name="time"]').timeDropper();
</script>
  

Explore our products

This is the result

Make the reservation
More info about you
When?
Your request has been sent!
Thanks for contacting us!
We'll get in touch with you soon to confim the appointment.

Conclusion

Of course, in this article we haven't taken care of several aspects that concern having a form in our website, such as the whole backend aspect or, even more important, the compliance with the regulations. In fact, every time we ask our users to provide us their data it is necessary to show them a privacy policy and make them accept it before collecting their data. There are hundreds of online tools to comply with regulations. I suggest to use iubenda.com cause I think it's the most complete. At this point, if you have found the article interesting, give us a hand by sharing it. We will be grateful. For any question or clarification you can contact us at our support email help@felixg.io