> For the complete documentation index, see [llms.txt](https://kb.craftformswp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kb.craftformswp.com/documentation/ecommerce/catalog/catalog-search.md).

# Catalog Search

Let visitors pick their dates (and the number of guests) and see which of your booking items are free: rooms, apartments, tickets, treatments, boats or meeting rooms. For items booked by the hour, each result lists that day's free times. Dates are picked with the same calendar as your booking forms. Each result links to that item's booking page with the dates already filled in, so the visitor goes straight to booking.

![CraftForms Catalog Search showing free rooms for the chosen dates](https://97821998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2yV1foUgoGHBC66VBDw%2Fuploads%2FGCSOTcYMfKVA8zC0P76q%2Fcatalog-search--search-on-website.jpg?alt=media)

### What you need

* **CraftForms PRO.**
* Booking items in **CraftForms → Catalog**. The search covers booking items only (not product items).
* For each item, a page where its booking form is: either a page on this site, or a page on your own website where the form is embedded.

### Add a search to a page

1. Edit the page and add the **Catalog Search** block.
2. In the block settings, under **Items to search**, tick the items to search. They must be searched the same way: all **by nights** (check-in / check-out), or all **by date**. Items booked by date and items booked by time both count as by date; the others are greyed out.
3. Optional: under **Guests**, hide the Guests field (it's shown by default) or change the most guests to offer. To call it something else ("People", "Seats"), use **Texts → Guests label**.
4. Optional: under **Texts**, change the field labels, the button text and the message shown when nothing is free.
5. Pick a style in the **Styles** panel: **Default** (looks like your theme), **Modern**, or **Builderius CSS**.
6. Save the page.

![Catalog Search block settings in the editor](https://97821998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2yV1foUgoGHBC66VBDw%2Fuploads%2FPoEa9INglyoSnV3HTT3X%2Fcatalog-search--block-settings.jpg?alt=media)

#### With a page builder

In Bricks, add the **CraftForms Catalog Search** element and pick the items, style, Guests field and button text in its settings.

Anywhere else, use the shortcode wherever your builder places shortcodes (Builderius Shortcode module, Elementor, the classic editor):

```
[craftforms_search items="12,13,14" skin="builderius" button="Check availability"]
```

| Attribute                                               | What it does                                                          |
| ------------------------------------------------------- | --------------------------------------------------------------------- |
| `items`                                                 | Catalog item IDs, comma-separated (shown in **CraftForms → Catalog**) |
| `skin`                                                  | `default`, `modern` or `builderius`                                   |
| `guests`                                                | `always` (default) or `never` (hides the Guests field)                |
| `max-guests`                                            | Most guests offered, default 10                                       |
| `button`, `from`, `to`, `date`, `guests-label`, `empty` | Texts                                                                 |

A search on a page of this site needs no key and nothing to set up. The page itself tells CraftForms which items the search may show, so nobody can change the list. If your site caches its pages, clear the page cache after updating CraftForms.

### On another website

If your booking forms are embedded on another website (a static site, a site builder, another domain), add the search there the same way you embed a form. One search works on one website.

#### Add a search

1. Go to **CraftForms → Embed**, open the **Search** tab and click **Add New**.
2. In **Website domain**, enter the website the search will appear on, without `https://`, like `example.com`. The search works on `example.com` and `www.example.com`, not on other websites or subdomains.
3. Optional: give it a **Name**, like "Rooms on the home page". Only you see it, in the list of searches.
4. Under **Items to search**, tick the items. One search covers items booked the same way, all by night or all by date, so the other kind is greyed out once you tick the first item. A search holds up to 20 items.
5. Pick a **Style** (**Default (inherits your site)**, **Modern** or **Builderius CSS**), show or hide the **Guests field**, and set **Most guests** (up to 30) and the **Button text**.
6. Optional: pick a **Language**. By default the search uses the language of the page it sits on (see [Texts and languages](#texts-and-languages)).
7. Click **Add search**.
8. Click **Copy snippet** and paste the code into your website, where the search should appear.

![The Add a search window in CraftForms Embed](https://97821998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2yV1foUgoGHBC66VBDw%2Fuploads%2FEQ25eEZSwJm4JelSaYlr%2Fcatalog-search--add-a-search.jpg?alt=media)

![The code of a new search, ready to copy](https://97821998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2yV1foUgoGHBC66VBDw%2Fuploads%2FqzZI3AytvOxcXGWpLqmo%2Fcatalog-search--search-code.jpg?alt=media)

The code holds a key for this search, not a list of items. Nobody can use it to look up other items in your catalog, and it only works on its website. To show a search on another website, add another search.

#### Change or remove a search

Your searches are listed on the **Search** tab, with their website and items.

![The Search tab of CraftForms Embed with two searches](https://97821998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2yV1foUgoGHBC66VBDw%2Fuploads%2FihQt9LKaArZPDaGYhr1p%2Fcatalog-search--search-embeds-table.jpg?alt=media)

* **Get code** shows the code again.
* The pencil icon (**Edit search**) changes its items, style and texts. The code on your website keeps working and shows the new items straight away. The style, the Guests field, the button text and the language are part of the code, so copy it again after changing those.
* The website and the way its items are booked (by night or by date) can't be changed. For another website or the other kind of items, add a new search.
* The bin icon (**Remove search**) removes it. It stops working on that website at once. A search you add later gets new code.

A **not findable** badge means some items of the search are inactive, or their results have nowhere to link (see below). Edit the search to see which ones.

#### Send results to your own website

Set each item's **Search result link** to the page on your website where its booking form is embedded (see [Where a result goes](#where-a-result-goes)), so results open your website and not this one. The **Add a search** window warns about items whose results have nowhere to link.

#### Hosted by CraftForms (CraftForms Cloud)

If CraftForms hosts your forms, you add searches on the **Embed Your Form** page of your forms site instead, one website at a time. See [Embed Your Form](https://kb.craftformswp.com/documentation/craftforms-cloud-hosted/embed-your-form#add-an-availability-search).

### Where a result goes

Open the item in **CraftForms → Catalog**, then **Catalog search → Search result link**:

| Setting                                         | Result opens                                                                                          |
| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| **The page this item is placed on (automatic)** | The published page with this item's booking form. The default.                                        |
| **A page I choose**                             | A page you pick, e.g. when the item is on several pages.                                              |
| **A web address**                               | Any `https://` address or a `/path`: the page on your own website where the booking form is embedded. |

The dates (and guests) are added to the link, so the booking form opens with them filled in. For an item booked by time, each free time is its own link and opens the form with that time picked. For that, the item's **Date Field Variable** must name the booking form's date field, and its **Capacity Measure Variable** the guests field.

An item with no page (automatic mode, not placed on a published page) is never shown in search results.

### What is checked

A room is listed only when it can really be booked for those dates:

* every night has room for the party: an item booked as a whole (a room, an apartment) must be free and its **Capacity** must reach the number of guests (a room for 2 isn't found for 3 guests); for shared places (dorms, tours) the places left must fit the party,
* the stay meets the minimum and maximum nights, including your **Stay rules**,
* no night is closed, blocked, or busy in your imported calendar (iCal),
* the dates are inside the item's **Availability window**.

For an item booked by time (time slots, seasonal times, flexible slots, continuous range), the result lists that day's free start times: shared slots need places left for the party; an item booked as a whole needs a Capacity that reaches the number of guests, and the time must be free.

A search covers up to 20 items and up to 60 nights, in the next 365 days. It never searches for more guests than its own **Most guests**.

### Styles

* **Default** uses your theme's fields and buttons and only adds the layout and the dropdown.
* **Modern** is the CraftForms Modern look.
* **Builderius CSS** is for sites on the Builderius CSS framework (TemplateCraft templates): the framework styles the fields and buttons, and the search takes its colours, spacing and corners from the framework. The same style exists for forms (see below).

Change any colour or size with CSS variables on `craftforms-search`, for example:

```css
craftforms-search {
    --cf-search-accent: #0a7c66;
    --cf-search-radius: 0;
    --cf-search-dropdown-max-height: 30rem;
}
```

### Builderius CSS style for forms

Forms have the same **Builderius CSS** style: select the Form block and pick it in the **Styles** panel. Fields, labels and the submit button then look like the framework's own forms, and the parts the framework has no style for (option cards, the booking calendar, time slots, repeaters, error messages) use its colours and spacing.

### Texts and languages

On this site, the search shows its texts in your site's language. CraftForms includes German, Spanish, Finnish, Italian, Polish, Ukrainian and Bulgarian.

On another website, the search uses the language of the page it sits on (its `<html lang>`), when CraftForms has that language: one it includes, or one you added texts for in **Field Message Translations**. Otherwise it uses your site's language. To always use one language, pick it under **Language** when you add or edit the search.

To reword any text, or to translate it into a language CraftForms doesn't include, go to **CraftForms → Settings → Field Message Translations**. The **Catalog search** table lists every text: field labels, placeholders, the button, results, error messages. Leave a row empty to keep the default. For another language, choose it under **Other languages → Language to edit**. Counts ("1 night", "5 nights") get one row per form the language uses, e.g. three for Polish. See [Field Message Translations](/documentation/form-building/general-settings/field-message-translations.md).

Texts set on a block (block settings → **Texts**), a shortcode or a search's **Button text** win over these.

### Good to know

* The search remembers the dates in the page address (`?cf_from=…&cf_to=…`), so you can link to a search, and a visitor who comes back sees their results again.
* Results are cached for one minute, and a new booking, a change to an item or a change to a page with a booking form updates them straight away.
* A visitor can search up to 50 times a minute.
* A search only answers about its own items. Nobody can use it to look up other items in your catalog.
* On a site that caches its pages (a caching plugin or host cache), clear the page cache after updating CraftForms, so pages show the current search code. A page cached by an older version can show a search that finds nothing until the cache is cleared.
* The search needs JavaScript. Without it, nothing is shown.
* The embed code doesn't need updating after a CraftForms update: it loads the current version of the search each time.