How to put the Solidres booking form on your website

The booking form puts online booking on a website that is not Solidres: your WordPress, Wix or Squarespace site, or any page your agency built. It is the search bar of the Check availability module, with dates, guests and rooms, or a single Book now button. A guest who searches with it arrives on your Solidres site's property page with the search made, and books there. The form sends the guest; it never books inside your website's page, so it works with every builder and every browser, and payment runs on your Solidres site as it always has.

It is part of Solidres, free, and works whether your Solidres site is a full website or a booking site beside the website you already have.

On this page:

1. Where to find it
2. The three things you can copy
3. Colours, target and limits
4. WordPress
5. Wix
6. Squarespace
7. Any other website
8. What happens when a guest searches
9. Troubleshooting

Where to find it

Open the Solidres menu → System → Booking form. The screen shows, for one property at a time:

• a Mode switch: Form, with dates, guests and a search button, or Book now button, a single button; the guest then chooses the dates on the property page,
• the code to paste, in two versions, and the booking page's address, each with a Copy to clipboard button,
• a live preview of the form as your website will show it,
• where to paste it in WordPress, Wix and Squarespace.

The same form, with its settings, is the Embed form tab of the property's edit screen; see Colours, target and limits.

The three things you can copy

The code

A few lines that load a small script from your Solidres site and show the form, styled, with the calendar and a guests and rooms picker that asks each child's age. Paste it where your website editor accepts HTML. The form follows your website's light or dark mode unless you give it colours of its own. This is the version to use wherever it works, and it works on any page that lets you paste a script.

The plain HTML form

The same form as plain HTML: no script, no styles, the browser's own date fields. For page builders that remove scripts, and for developers who want to style it themselves. It searches for one room; more rooms are chosen on the property page.

The booking page's address

The address of the property's booking page, to put behind a button or a link that your website builder makes itself. Some builders run pasted code in a frame that cannot open another site, and some plans remove forms and scripts altogether; a button of the builder's own, linked to this address, works on all of them. The guest arrives on the property page and chooses the dates there, as with the Book now button mode.

Colours, target and limits

Edit the property and open the Embed form tab. The preview beside the fields changes as you type; save the property to apply the changes. The colours, the target and the mode travel in the code itself, so after changing them copy the code again and replace it on your website. Room options and the three limits are read each time the form loads, so they take effect on your website as soon as the property is saved.

WordPress

WordPress on your own hosting

Edit the page, add a Custom HTML block and paste the code into it. The form shows in the editor's preview and on the page. The plain HTML form goes into the same block, if you prefer it.

WordPress.com

On WordPress.com it depends on the plan. The Business plan and above run plugins and accept any HTML, so they work as WordPress on your own hosting does. The Free, Personal and Premium plans remove scripts, forms and form fields from a Custom HTML block: the code shows nothing, and the plain HTML form is left as its labels and a button that does nothing.

On those plans, use a button of WordPress's own:

1. Copy the booking page's address from the Booking form screen.
2. Edit the page, add a Buttons block, write Book now on the button and set its link to that address.

The button takes the theme's colours, and the guest arrives on the property page to choose the dates.

Wix

Wix runs pasted code in a frame of its own that is not allowed to open another site, so neither the code nor the plain HTML form can send a guest to your booking pages from inside it, whatever Target is set to. Use a Wix button instead:

1. Copy the booking page's address from the Booking form screen.
2. In the Wix editor, choose Add, then Button, and put a button on the page. Write Book now on it.
3. With the button selected, choose Link, then Web address, paste the address, choose Current tab and click Done.
4. Publish the site.

The guest arrives on the property page and chooses the dates there.

Squarespace

Edit the page, add a Code block and paste the code into it. Squarespace runs scripts in Code blocks on its Business and Commerce plans; on a plan that shows HTML only, paste the plain HTML form instead, or link a Button block to the booking page's address.

Any other website

Anywhere you can paste HTML, paste the code. Where scripts are not allowed, paste the plain HTML form. Where neither works, or where pasted code runs in a frame, make a button with the builder's own tools and link it to the booking page's address. One of the three always works, because the last one is nothing but a link.

What happens when a guest searches

The guest arrives on the property page of your Solidres site with the dates, guests and rooms filled in and the rooms for those dates listed; with the Book now button or a plain link, the page opens ready for the dates to be chosen. The property page checks the dates, the occupancy and the number of rooms again, as it does for any search, so the form on your website can never book something the property does not allow.

On a site in several languages the code carries the language of the page you copied it from, and the property page opens in that language.

Every search that comes through the form or the address carries a mark, so that the Getting started checklist of a new booking site can tick its Put the booking form on your website step when the first search arrives. The mark does nothing else.

Troubleshooting

Nothing shows where I pasted the code

Your website removes scripts: WordPress.com below the Business plan does, and so do several builders. Paste the plain HTML form, or link a button to the booking page's address. If your website is served over HTTPS and your Solidres site is not, the browser refuses to load the script; put the Solidres site on HTTPS. A website with a strict Content Security Policy needs your Solidres site's address allowed for scripts and connections.

The form shows, but searching opens nothing

The page runs the code in a frame that is not allowed to open another site. Wix does this. Use a button of the builder's own, linked to the booking page's address.

The form's colours are wrong

Empty colour fields let the form follow the website's light or dark mode, which suits most sites. If your website declares a dark colour scheme but shows light pages, or the other way round, set the five colours in the Embed form tab to the colours you want.

The old Hub form stopped working

The form moved into Solidres with 4.5.0, and Hub 2.4.0 no longer serves the old code. Copy the new code from the Booking form screen and replace the old one on your website.

The Getting started step does not tick

It ticks when the first search arrives from your website, through the form, the button or the address. A search made on the booking site's own pages does not count; a search made in the preview on the Booking form screen does. Make one search from the page where you pasted the form.