How to Add Booking Availability Widget

In order for users to book a room, they need to first check which room is available. Using the Elementor booking availability widget of Otel, you can easily create a form where users can input check-in and check-out date, along with the number of persons staying, and check if any room is available.

Let’s see how to customize this widget.

Note: You need to have Elementor installed in order to use these widgets.

Step 1: Drag n Drop Widget to the Customization Area

At first, you need to drag n drop the widget to the customization area. It is relatively easy. Select the Booking Availability widget from the side menu and drop it in the chosen area.

Drag n Drop Booking availability

Step 2: Customize the Content Section of the Booking Availability Widget

In the Content section, you will find the Field text option.

Content section of booking availability

You can edit the field label from here. Like Check-in and Check-out field name, and the Check Availability button name as well.

Field text content section

Step 3: Stylize The Booking Availability Widget

In the style section, you will be able to customize the fields and its labels.

Style section

In the Global section, you can customize the whole form like its padding, border radius, border type, color, width, etc.

global style

You can adjust the border radius, field text color, placeholder color, border type, color, box shadow, etc from the Form Fields section.

Form fields style

You can adjust the margin, padding, typography, and text color of the Form Field label from it’s section.

Form fields label

Last but not the least, adjust the margin, padding, typography, and text color of the Submit Button from its section.

Submit button

After customizing, here’s the final result.


That’s it.