Do you want to create a reservation form? Then you are in the right place, in this tutorial I am going to teach you how to create a good looking reservation form.

We will break this tutorial in 5 sections:

1. Adding the basic fields (Name, date/time of arrival, etc.).
2. Selecting the room with an image picker
3. Adding validations
4. Display total price of the reservation
5. Final touches

1. Adding basic fields

For this demonstration I am going to add the following fields:

• Name
• Email
• Arrival date and time
• Departure date and time
• Number of rooms
• Submit button

 

2.  Selection the room with an image picker

Now I have my basic form, but I am not letting my customers select the type of room (let’s just assume we have a basic, double and deluxe rooms). To let my users select a room I could just add a dropdown field but to make my form more polished I will use an image picker instead.

The image picker will display an image of the room and its price.

 

3. Adding validations

If I don’t add some validation I will be receiving poorly filled entries or even entries not filled at all if that happen I would need to contact the person that submitted the entry and ask him for clarification which is time consuming. To avoid that the following validations should be made:

1. All fields should be required
2. Departure date must be must happen at least one day after the arrival date.

All fields should be required

To make this I just need to check the required box in each field

Departure date must happen at least one day after the arrival date

To do this I will use the ‘Minimum Date’ setting of the departure field. The minimal date will be the day after the  ‘Arrival Date’. I can do that  with the following formula: ArrivalDate.AddDays(1)

 

 

4. Display total price of the reservation

To display the total price I need to do two things:

1. Place a price per night to each room type
2. Add a ‘Total Price’ field and multiply the price of the room by the number of rooms and the number of days my user is going to stay

Placing a price per night to each room type

I will click the image picker and put the price of each room in the ‘Amount’ box

Then I am going to add another text input called ‘Total’ and in its ‘Default Value’ setting I am going to put the following formula:

This formula gets the number of days between arrival date and departure date, then it multiply the result by the room type and number of rooms

5. Final touches

Right now my form is 100% functional but I am going to add a few icons to make it more appealing. I will open the ‘Icons and tweaks’ section to add some icons.

And that’s it! My form is ready =)

I hope the tutorial was useful, if you have any question please drop a comment here =).