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.
![How to Add Booking Availability Widget 1 Drag n Drop Booking availability](https://cdn.wedevs.com/uploads/2022/08/Drag-n-Drop-Booking-availability-1024x524.png)
Step 2: Customize the Content Section of the Booking Availability Widget
In the Content section, you will find the Field text option.
![How to Add Booking Availability Widget 2 Content section of booking availability](https://cdn.wedevs.com/uploads/2022/08/Content-section-of-booking-availability-1024x396.png)
You can edit the field label from here. Like Check-in and Check-out field name, and the Check Availability button name as well.
![How to Add Booking Availability Widget 3 Field text content section](https://cdn.wedevs.com/uploads/2022/08/Field-text-content-section-1024x443.png)
Step 3: Stylize The Booking Availability Widget
In the style section, you will be able to customize the fields and its labels.
![How to Add Booking Availability Widget 4 Style section](https://cdn.wedevs.com/uploads/2022/08/Style-section-2-1024x443.png)
In the Global section, you can customize the whole form like its padding, border radius, border type, color, width, etc.
![How to Add Booking Availability Widget 5 global style](https://cdn.wedevs.com/uploads/2022/08/global-style-1024x480.png)
You can adjust the border radius, field text color, placeholder color, border type, color, box shadow, etc from the Form Fields section.
![How to Add Booking Availability Widget 6 Form fields style](https://cdn.wedevs.com/uploads/2022/08/Form-fields-style-1024x491.png)
You can adjust the margin, padding, typography, and text color of the Form Field label from it’s section.
![How to Add Booking Availability Widget 7 Form fields label](https://cdn.wedevs.com/uploads/2022/08/Form-fields-label-1024x478.png)
Last but not the least, adjust the margin, padding, typography, and text color of the Submit Button from its section.
![How to Add Booking Availability Widget 8 Submit button](https://cdn.wedevs.com/uploads/2022/08/Submit-button-1024x522.png)
After customizing, here’s the final result.
![How to Add Booking Availability Widget 9 Preview](https://cdn.wedevs.com/uploads/2022/08/Preview-2-1024x550.png)
That’s it.