By default, the Hotel Booking plugin inherits styles of your theme, so the design and layout of the search form depend on your theme styles. Thus if there are no specific styles, the form is vertical to fit better all screen sizes and types of devices.
Nevertheless, now it is possible to easily change the layout of the search availability form, with the free Hotel Booking Styles addon. This article will explain how to change the layout of Search Forms using WordPress Block Editor (Gutenberg). Please, note that support for Hotel Booking Styles addon was added within the 3.8.1 version of Hotel Booking. So, make sure the plugin is updated at least to 3.8.1 version.
If you use Hotel Booking lower 3.8.1 version you may install the Hotel Booking Styles addon manually and use the shortcode to adjust the form.
1) After that, go to Accommodation > Settings > More Styles and click the "Install & Activate button" (in this way, the Hotel Booking Styles addon will be installed and activated to your website automatically.
After, you may add the "Availability Search Form" or Booking Form blocks to the needed page or post and see the added "Styles" section on the right where you can set the needed style from the offered ones.
Note that there is also the "Customization" section, where it is possible to customize the search availability form further (e.g. hide labels, remove paddings between the form fields, hide message about required fields, wrap form fields onto multiple lines, stretch the button and limit the maximum width of the form fields).
Adjust layout of the form using Widgets
With the Hotel Booking Styles addon, it is also possible to change styles of the booking form that was added via Appearance > Widgets.
How to add horizontal search Form using Elementor
How to add horizontal search Form using Divi
Adjust layout of the form using shortcode
For this, go to Accommodation > Settings > Extensions > Styles. Here you may see the list of available classes that can be used in the shortcode:
Add the [mphb_availability_search] or [mphb_availability] shortcodes with the needed available classes to the page:
Comments
7 comments
An option for a horizontal search availability box would be great!
How do i customize the form, when using shortcode? How to add attributes?
Hi Søren,
Could you clarify the question more detailed? Do you mean style attributes or custom attributes to filter the search results by its terms? Please clarify.
How do i make the form look like the ones in your themedemos? Like customizing the style of the form. Also how do i add the attibutes to the shortcode shown on the page above?
Hi,
You may add custom styles to adjust layout of your search form on your theme (input fields, selectors, etc.)
As for adding class to the shortcode so you may copy it from the article or type manually? Or do you mean you use some builder where hotel booking widgets are integrated?
If this can help:
@media (min-width: 1024px) {
.custom-form-horizontal-layout .mphb-required-fields-tip{
display: inherit;
visibility:hidden;
}
.custom-form-horizontal-layout p input{
display:inherit;
width:auto;
padding: 12px;
margin: 8px;
box-sizing: border-box;
border: none;
border-radius: 5px;
font-size: 16px;
}
.custom-form-horizontal-layout p select{
margin: 8px;
background-color: #fff;
padding: 12px;
color: black;
width: auto;
border: none;
font-size: 16px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
-webkit-appearance: button;
appearance: button;
outline: none;
}
.custom-form-horizontal-layout p text{
visibility:hidden;
}
}
Hi Olympe,
You can install this beta plugin and activate it https://wordpress.org/plugins/mphb-styles/
Then go to edit the shortcode or block of the form and add the following class
Let me know if it is helpful.
We’ll continue developing the HB Styles plugin to add more design controls.
Please sign in to leave a comment.