Peter
Adding a Search Availability Form Using Gutenberg
01
Let’s start off by adding a search availability form on a Gutenberg page. On your page, click the (+) to add a new block, here you have 2 options;
To use the built-in search availability form in Gutenberg or to use a shortcode. Select the search availability form, it is vertical by default. Under the Customization option on the right, you can make any changes to your form, for example, you can hide labels, remove paddings, etc
Under the Styles option, choose Horizontal Form
Add search availability form in Gutenberg using shortcode
02
Click the (+) icon to add a new block, then select shortcode Under shortcode, you’ll find the default search availability shortcode. It is also vertical by default.
You can change it to horizontal by using the Available Classes under Accommodation > Extensions > Styles. Just copy the horizontal style shortcode (06:05) then paste it into your Gutenberg editor.
You can also add other classes to customize your form any way that you want. For example, if you want to hide the labels, all you have to do is copy the hide labels style (06:37), then under Shortcode in your Gutenberg editor; add a space and paste the code
And when you preview, this is what your form should look like Another example is if you want to remove the padding, use the same process; under Available classes copy the “no paddings” style, go to your Shortcode, add a space and paste the style, then preview
However, I do not advise you to hide the Padding on your form.
Adding a search availability form using Elementor
03
Back under Pages on your dashboard, open up any page where you would like to display your search availability form/widget (just go to that particular page and click Edit with Elementor)
With your page opened up in your Elementor editor, go to your Widgets area and search for the Search Availability Form widget, drag it to your canvas Your form will then show on your page, and of course, it is vertical by default.
To make it horizontal; You have to use the classes back in your WordPress settings so go to Accommodation > Settings > Extensions > Available Classes, copy the horizontal style
Back in your Elementor editor, select the form, in the Edit search availability form area on the left, go to Content > Parameters, and paste it on the Class option
In the same way, just like you did in Gutenberg, if you want to make any further customizations on your search availability form in Elementor, copy the particular styling you want from Accommodation > Settings > Extensions > Available Classes, go back to your Elementor editor and under Class, add a space and paste the styling.
This saves you the hustle of adding CSS and then having to make more edits to suit your needs and to make the form responsive.
Add a search availability form using shortcode in Elementor
04
You can also use a shortcode to display your search availability form by going to your Widgets area, search for the Elementor Shortcode widget and drag it to your canvas
Then in the Edit Shortcode section on the left, under Shortcode paste your form shortcode, then your form will display automatically. To make it horizontal; you add a class in the shortcode plus the horizontal styling, and of course, you copy this class and styling from Accommodation > Settings > Extensions > Available Classes.
And with this, your form will change to horizontal. And when you preview it in Responsive mode, it is completely responsive on both tablet and mobile devices.
You can add even more classes to this shortcode widget to customize it to your preference, just copy your stylings from the extensions and paste them in the shortcode (after adding a space).
Video: MotoPress Hotel Booking Styles Tutorial
Check out more on this story on the link below.