Blog

Booking forms are an essential tool for hotels looking to streamline their reservation process and provide a seamless booking experience for their guests. By creating a user-friendly and efficient booking form, you can attract more customers, increase your revenue, and enhance customer satisfaction.

In this step-by-step guide, I will walk you through the process of creating a booking form. I will discuss the following topics:

1.- Creating my booking form

2.- Requesting the customer information (like name and email)

3.- Adding rooms with different prices per night

4.- Requesting how many guests are going to be booked and calculating a total per night

5.- Adding a maximum number of guests to each room

6.- Requesting the date of arrival and departure and calculating a grand total

7.- Requesting the flight number if the user wants to be picked up at the airport

8.- Final Touches

In case you want to check it, you can view the form I am going to create here

1.- Creating my booking form

To create your form go to AIO forms and click on ‘Create New Form’

2.- Requesting the customer information (like name and email)

I am going to start my booking form by requesting only the name and email. But if you need you can add more fields. So I am just going to add a name and email field to my form

These two fields need to be filled before the form is submitted so I will also make them required

3.- Adding rooms with different prices per night

Now in my booking form, I have different rooms with different prices, to let my users choose which one they want to use I will add a dropdown and I will label it “Room Type”

Adding my room type dropdown

Now in the options settings of this dropdown, I am going to add all my different types of Rooms

In each option, I use the “Label” setting to add the name of the room (how it will be seen by the customer) and the “Value” setting to add the price per night. I am going to use this ‘Value’ setting later.

At the end, my dropdown will look like this

I could make this dropdown look a lot better using a Custom Dropdown instead. But for now, this will do the trick

4.- Requesting how many guests are going to be booked and calculating a total per night

Now that my customers can pick a room I also need them to tell me how many guests are going to come so my booking form can calculate the price per night. To do so I am going to add a “Numeric field” called “Number of Guests” beside my room type field.

I also want to show the total per night to my customers so for that I will add a currency field.

Note: to use the currency field you will need the essentials add-on but if you don’t have it you can use a number field as well.

I will name this currency field “Total Per Night” and will make it read-only so my customers can’t edit it because this one is going to be auto-calculated

Calculating the total per night

Now to make this field calculate the total per night I will click on the calculator icon inside the ‘Default Value’ Setting

My formula is going to be [Room Type]*[Number of Guests]

Using this formula the plugin will multiply the “Number of guests” (the value they input in that field) by the selected room value which I defined in the “Value” setting of each option in the previous step.

With this configuration, my “Total Per Night” field will be automatically calculated as my customers fill out the form

5.- Adding a maximum number of guests to each room

Now with my current configuration, the form has a big problem. Each room has a different capacity but my form allows my customers to submit as many guests as they want

To fix this I am going to do 2 things:

A.- Define a max capacity for each room

B.- Throw an error when the number of guests is greater than the maximum capacity of the selected room

A.- Define a max capacity for each room

By default, I can configure each option of a dropdown with a Label and Value

I am using the label for the room name and the value for the price per night. But I need to configure a third value which will be the maximum number of guests.

To save an additional value to each option I can click on “Add additional column”

Then click on “Add Column”

Since I am going to use this new value to save the maximum number of persons in each room I am going to call it “Maximum Number of Persons”

After clicking done each option in my dropdown will have a new row to store the maximum number of persons. I will fill it with the maximum capacity of each room

B.- Throw an error when the number of guests is greater than the maximum capacity of the selected room

Lastly, to configure my “Number of Guests” fields to never be greater than the maximum capacity of the selected room I am going to go to the “Number of Guests” fields and click in the calculator of the “Maximum Value” setting

And I am going to add this formula

Adding a formula to my maximum value setting

With this configuration, the maximum value of my field will always be the “Maximum Number of Persons” setting that I added in the previous step, and if it is bigger it will display an error message

6.- Requesting the date of arrival and departure and calculating a grand total

Now to ask for my customer’s arrival and departure date I am going to add two date pickers and will call them Arrival Date and Departure Date

To make them look a little nicer and different from each other I am going to add an icon to each field. To do so I am going to go to the field settings and click on the “Icon” rectangle

Then I am going to select an icon, for the arrival date picker I am going to select the “Plane Arrival” icon

For my departure date picker I am going to select “Plane Departure”, at the end my two date pickers will look like this:

Lastly, my departure date should always be at least one day after my arrival date. To do so I am going to go to the “Mimimun Date” setting of my “Departure Date” and I am going to click on the calculator icon to define a formula

The formula that I am going to use is this:

This formula is a little bit more complex but basically what it does is add one day to the arrival date. So the minimum date of my departure date will always be one day greater than the arrival date.

Calculating the grand total

Now that my booking form can calculate the total per night and knows the arrival and departure date it is ready to calculate the grand total.

To do so I am going to add another currency field and I am going to call it “Total” and make it read-only

Then I am going to click on the calculator of the “Default Value” setting to define a formula

And this is the formula I am going to use

This formula might look scary at the beginning but is very easy to do and understand, what it does is:

1.- Use the function RNDateDiff to calculate the number of days between the arrival date and departure date. So for example, if the arrival and departure dates is1 May 2024 and 3 May 2024 respectively this formula will result in 2.

2.- Multiply the result of the function of step 2 by the total per night (which is the field that we created in step 4).

Putting it in another way our grand total is the number of nights our customer is going to stay (calculated using the RNDateDiff function) multiplied by the customer’s “Total Per Night” price (calculated in step 4)

7.- Requesting the flight number if the user wants to be picked up at the airport

Next, in my booking form, I am going to ask my customer if he wants to be picked up at the airport and if so I am going to ask for the flight number.

To do so I am going to add two new fields, a radio button called “Free Pickup?” with the yes and no option (I could also use a switch field but in this case, I liked the radio buttons more)

a text box with the name “Flight Number”

I just want to show the Flight Number when they opt to use the free pickup. To do so I am going to select the “Flight Number” field and I am going to go to the “Conditions” tab

Then I am going to check the “Show/Hide” condition to make this field shown only when a condition is met

My condition is pretty simple, I just want to show this field when they select “Yes” in the “Free pickup?” field

That’s it! Now the flight number will be displayed only when my customer wants to be picked up.

8.- Final Touches

Lastly, I am also going to add a “Paragraph Box” field at the end called “Special Request” in case my customer has to request something else such as a wheelchair

Also to make my form look a little bit nicer I am going to add a banner image to the top, to do so I am going to add an image field, select an image, and in the alignment settings I am going to select “Banner”.

My banner will look like this:

And that’s it, now my booking form is doing everything I want and is ready to be used.

Conclusion

As you can see our booking form does some very interesting stuff like calculating totals and validating the number of guests against the room capacity but all of this can easily be done (and without coding a thing) using formulas.

You can see this form in action and also download it and use it on your site here: https://allinoneforms.rednao.com/demos/hotel-booking-form/ (this form uses some fields of the essentials add-on so you would need it to use it)

You can also find more forms in our online gallery

Or if you want to try the free version of our plugin you can download it here: https://wordpress.org/plugins/all-in-one-forms/