MotoPress Hotel Booking Styles: Style Check Availability and Booking Forms in Gutenberg or Elementor

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)

DvsDS6NXAfN7sQQy60L gLYfnOqvVFZgukebsl8eU6A9Y7RlNauYaesTiB F8xL50roqO3T7mzHy2Xaaf5PTxM6WyaYjlgoCkindQUaNfrQkhBgV2 KzY

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.

CYSmVGvcunsJzGr8phJYUX0bue KaI4zTUGPzV4xxPdGUckZrnWUQ9VhvRfVbvwzSUK fZVCQODbAyCcA GfjhSGhINggn4MeobWWZvLXNoLpGuwpYeUgOFM8hEo64rXZ KBu iW

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.

XGq 2QN4F0WukXJsqLqyX1o9QAUZ3oRZJzSyPc2SJA2OJBAGi FahyRaVkSwYpvgXgRrsnmiFSVNpAXHXoeS4uj5GYB6pzmIt36ueC5vsupJlkF 9sy2OyzCaTgpIhVmpRv7SwA7

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)

5AJBX8s wIqi8GWC6jR59 PHqrRxCNLjR869DCQff1ORsh7W8T4HRlplwLqoi4akQID0KMw8NE 5Uyw3jeen8s2Iyv6DfK54JWAfY12hVwirx9jVcygoIL6 bnbsxtoP0A jMN7s

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).

2vVhFUYVGC6soJiV3D7GhviCCP8kSHQ6l2FkSqBQNGfJXYlH2Ja1gofy5cZWD2PDp7 i62M8GMqwx2CifIElim4ascHMg8

Under shortcode, you’ll find the default search availability shortcode. It is also vertical by default.

d3CJ9C4 Ya 6j 4r 1j0zVN nLDRQ7JbVrXF

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.

motopress hotel booking styles
LkIrXCFMjy8rLgoJ6lF 8CeazHCk akZC2qZWfKKg7FH JNvkr NMNU5z6deROt jQ7uWGNN V8hvsg7pHYjyfYGpox5GZSrXtE rWNk3 HBdfnPpJOHAN503SgsqNS7CFfleKRC

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).

8lJ7PzW px9xSYFosCPH HiKkvqmiqzgrRynioLPBLotgjl3BhlNMLj8T07Jj6N7B9xILIRCMQvw1 iBygXiSmpKSvSN 74hiiSrVY0KG 044jwcStIOTXhMiqdvS
3WPu0qMjpcNzhaj98uvgsVfRuAoyZ3BXCnu4w D IQq

And when you preview, this is what your form should look like (06:53).

SKXzmZ5nPvdCYd4iOU NRh JvalAa1D4R3U lFrXOFjpvwD4fDUX8qVUqW1s01C7Fp6evYE5uWopw6L5qnytCY1OY3RHhsoGxdzYchJnJ1TyqEW5m2CmDnQR5sdvFVl 9epkbqk2

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).

EYO3XKhlTgKBtyhHY A5xr0gvwoSrF9q ZcxMFbgC5aCVG4fhTOPpv6JABzmoAi VmEXzeObF0wlYy2 zohnmsCA3 9MvkRXJMc4Lsc7ilPlKnCbNM3mOUgdzuroQv1J7zpm90SZ
QdqI053hDtpOmXqvFrxfcdH4l 5RCdf4c7WktSOrkJDMzfhR6kYM4EogORSHZ6d1DUYTLV WmlL6imzZt50LYWPmdS ySqoA0vUQkCdTm2s4lfKNU zUDSgDQ201IECeu569TjC
9AJgnMOn7G ADtNzkpnMvti6ugyxLLbdWzwTchCYvtR56KPxoI3miYIM5K3kGBjaJre3g1bILA1wHk2NfcA7frRR

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.

To Read: WordFence Security Plugin Tutorial: Secure, Block and Stop Malicious Attacks to WordPress websites for FREE

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).

JVytmXb9xGpNCtqvVEUzVl JHEpWgwdT1ivP189C0voMwZbMkdbnI5SML0x3kilE2eAEnBhE0 o cnep7x7pi mpzyOMYL iIsphB5kNsB6uS6u1i RIrkD5TLXub2 0wrZ8jTma

Your form will then show on your page, and of course, it is vertical by default. 

AcQ vyGKK0npLjTLsVLlR HkEZpG20GsYIyM sewLk6gwSxlxQmr96e3PbmAK4p3YRiyWMOkXaITimoNw9 Z8SQOZBw886sZCcI0k zqSWcnBrJjKUVHyL5hCnuB5i1 c0NcdQiD

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).

iDE3LEiRT1TAG2 0T4xkk76AvS0V5KmWjtAmZUrgzSB ngzZlwM5A4qduaCdr8DtsUf CCPaHdYzDt W21FvLEsSKNnC QJWJB OvjBfEHqk8zFjYDKtu1QbzKNBuj08zY71LE7O

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).

Tj3lmoG00NShEiFsXaWF uzK71jF8j5V9l7LqJp1RO9kmcB5zwYUmq 8mpmqCeVe2iLCUhQQd2qAo9g7GL3YSDSA

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)

EhI cTerBsWIt6KJE0eNSnWoTm6bHyvcmpq4i6b7LW7ys 3uNEZo8zHUDIRUjzS DsYEYOM1yhfCBcWa6hM9Al5ngU7l0oZ5meRPqwl0ydlCLvjH3fl02c1K3BArHCvrYn0CYAo7

Then in the Edit Shortcode section on the left, under Shortcode paste your form shortcode (10:29), then your form will display automatically.

bjIPmwbKLMqU6IH6Oeq3OvfPDfWB9zDB2ZQ4DOm CxZ5t4PoyCT4qNVcyNeGE XgvvTo rj3dXBl0jclczP5EUM

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.

a3
7Nm7nTp5Lt47DVF5JcG36gd6Ku dowawuFFtYAtcoq4f8KsItYRkRO48Wey4ROrXFhPrCWSi uAvyLrG5rqMy82a Dfj6f

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).

Y CMk0xgXxDdf7LIkdmRZ F 5PwCsXPBJHsPF0LwR

Under Customization > Global, go to Buttons, and here you can set up your button colors on normal and on hover (10:02)

7R4BVKsxbD D9oAFdWJwTwvcuTEX0LFttilRdpRdC4ho

Also Read: Create Custom Elementor Tables with Images, Links, Icons and Lotties. Import Tables from CSV and Google Sheets

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users