In this article, I’m going to show you how to style your MotoPress hotel booking forms, like switching the check availability form to horizontal or simply removing padding or labels on your booking forms. We will be using the MotoPress hotel booking styles in both Gutenberg and Elementor.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: MotoPress Hotel Booking Styles Tutorial
Let’s kick this off by installing the hotel booking styles plugin.
In your Plugins area on the dashboard, click Add New, search for the Hotel Booking Styles plugin, install and activate it (01:50)
When it’s activated it will show in your installed plugins.
Tip:
If you would like to customize your search availability form in Elementor, you also need to install the Hotel Booking & Elementor Integration plugin, then you’ll be able to use the search availability form widget in Elementor.
On your WordPress dashboard, go to Accommodation > Settings, here go to Extensions, and then click on Styles (02:46). Here, they list all the available styles you can use to customize your hotel booking styles widget.
To Read: How To Submit Posts from Frontend in WordPress for Free (User Submitted Posts WordPress Plugin)
Adding a Search Availability Form Using Gutenberg
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 (03:31), 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 (03:58)
Under the Styles option, choose Horizontal Form (04:20)
To Read: Elementor Image Scroll Effects with Premium Addons (Showcase Mockups, Demos & Portfolios)
Add search availability form in Gutenberg using shortcode
Click the (+) icon to add a new block, then select shortcode (05:29).
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 (06:51).
And when you preview, this is what your form should look like (06:53).
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 (06:58).
However, I do not advise you to hide the Padding on your form.
Note:
The search availability form is automatically responsive on both tablet and mobile devices, no changes are needed to make that happen.
Adding a search availability form using Elementor
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) (07:57)
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 (08:08).
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 (08:50).
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 (08:56).
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.
To Read: 5000+ Elementor Template Kits – Free and Premium
Add a search availability form using shortcode in Elementor
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 (10:24)
Then in the Edit Shortcode section on the left, under Shortcode paste your form shortcode (10:29), then your form will display automatically.
To make it horizontal; you add a class in the shortcode plus the horizontal styling (10:44), 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).
Note:
I set up the styling and colors for the buttons using Astra Theme.
To do this:
Go to your WordPress dashboard, under Appearance > Customize (09:50).
Under Customization > Global, go to Buttons, and here you can set up your button colors on normal and on hover (10:02)
In Closing
That’s how you can add a search availability form to your hotel booking website without using any code.
If you have any questions or comments about this tutorial, let me know in the section below. Remember to subscribe to my newsletter and youtube channel for more tips and tutorials.
