> 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/form-building/embed.md). # Embed ### Overview **CraftForms → Embed** puts your forms and your availability search on a website that isn't this WordPress site: a static site, a React app, a site builder, or another domain. You paste a small piece of code into that website, and it loads the form (or the search) from your WordPress site. On pages of this WordPress site you don't need any of this: add the CraftForms blocks instead. ![The Embed page with its Forms and Search tabs](https://97821998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2yV1foUgoGHBC66VBDw%2Fuploads%2FzDOwTW9M3BZ5QgbnJNba%2Fembed--embed-page.jpg?alt=media) The page has two tabs: * **Forms**: an embed key for each form and website. * **Search**: availability searches and catalog listings, one for each website. See [Catalog Search](/documentation/ecommerce/catalog/catalog-search.md) and [Catalog Listing](/documentation/ecommerce/catalog/catalog-listing.md). Everything on this page works for one website at a time. A form or search only loads on the website it was added for, and only accepts entries and payments from it. ### Forms #### Add an embed key 1. Open the form's submission settings and turn on **Allow External Submissions**. Only forms with this setting are offered here. 2. Go to **CraftForms → Embed**, stay on the **Forms** tab and click **Add New**. 3. Pick the **Form**. 4. In **Website domain**, enter the website the form will appear on, without `https://` or a trailing slash, like `example.com`. 5. Click **Add key**. The window then shows the code. ![The Add embed key window](https://97821998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2yV1foUgoGHBC66VBDw%2Fuploads%2Fxmpq3z4zMAsBdSo3tohU%2Fembed--add-embed-key.jpg?alt=media) **Each website needs its own key.** To show the same form on two websites, add two keys. For testing on your own computer, add a key for `localhost` (or `127.0.0.1`). #### Get the code Click **Get code** next to a key to see its code at any time. ![The Embed snippet window with Catalog item, Language and the code](https://97821998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2yV1foUgoGHBC66VBDw%2Fuploads%2F2yGsya3q4uGzh3o7ZaIk%2Fembed--form-code.jpg?alt=media) * **Catalog item** (optional): connects the embedded form to a booking or product item from **CraftForms → Catalog**. The code then carries a signature for that item, so a visitor can't swap the item or its price. * **Language**: by default, the form uses the language of the page it sits on, if CraftForms is translated into it, and this site's language otherwise. Pick a language to always use that one. Languages you added in **Settings → Field Message Translations** are listed too (see [Field Message Translations](/documentation/form-building/general-settings/field-message-translations.md)). * **Embed snippet**: click **Copy snippet** and paste it into your website where the form should appear. * **Static shortcodes**: the same form as a shortcode, for site generators and builders that take shortcodes. If a form has two or more keys, use the **by form key** shortcode, because the form ID alone can't tell them apart. * **For developers: signatures for every catalog item**: only needed when a site generator (Astro, Hugo) builds pages for many items from one template. Each item then needs its own `data-resource-sig` next to its `data-resource-id`. Change the catalog item or language, then copy the code again: they are part of the code. #### Signed catalog items The **Catalog items** column shows whether a key still accepts older code without a signature: * **Signed only**: only code with a catalog item signature can load an item. This is the safe setting. * **Unsigned allowed**: older code without a signature still loads catalog items, so a visitor could swap the item. Once your website uses the current code, click **Require signed**. #### Revoke a key Click the bin icon (**Revoke key**). The form stops loading on that website straight away, and visitors there can no longer send it. You can add a new key later, but the website then needs the new code. ### Search The **Search** tab lists your availability searches: visitors pick dates and see which of your booking items are free, then book on the item's booking form. ![The Search tab with one search](https://97821998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2yV1foUgoGHBC66VBDw%2Fuploads%2FSKTQWIy0TQs052hN12tZ%2Fembed--search-tab.jpg?alt=media) * **Add New** (on the Search tab) adds a search: the website it appears on, the items, its style, the Guests field and its texts. * **Get code** shows its code again. * The pencil icon (**Edit search**) changes its items, style and texts. Changes to the items show on your website straight away, with the same code. After changing the style, the Guests field, the texts or the language, copy the code again. * The bin icon (**Remove search**) removes it. It stops working on that website straight away. A search stays on the website it was added for. To show a search on another website, add another search. The full guide is in [Catalog Search](/documentation/ecommerce/catalog/catalog-search.md#on-another-website). #### Catalog Listing (PRO) The **Search** tab also holds listings: your catalog items as cards, a list of upcoming free dates and times, or a calendar of free dates, with a Book button. See [Catalog Listing](/documentation/ecommerce/catalog/catalog-listing.md). 1. On the **Search** tab, click **Add New**. 2. Under **What to show**, pick **Listing — cards, upcoming dates or a calendar of your items**. 3. Enter the **Website domain** (like `example.com`, without `https://`) and, if you like, a **Name**. 4. Pick what to **Show** and tick the **Items to show**. Then set the view: **Columns**, **Days ahead**, **Rows at most**, **Price shown**, **Button text**, the **Style** and the **Language**. 5. Click **Add listing**, then **Copy snippet** and paste the code into your website. In the list, a listing shows as **Listing · items · view** (for example "Listing · 3 items · cards"). Like a search, it works only on its website, and the pencil and bin icons change or remove it. Changes show on your website straight away, with the same code. The full guide is in [Catalog Listing](/documentation/ecommerce/catalog/catalog-listing.md#on-another-website). ### Headless mode You can lock down this WordPress install and use it only as a backend for your embedded forms. Turn it on in **CraftForms → Settings → Headless mode**. It closes the public side of the site but keeps the CraftForms embed and submission endpoints open, and you can turn it off again at any time. [More about this setup in our blog](https://craftformswp.com/use-wordpress-as-a-locked-down-form-backend-for-static-sites/). ### Styling An embedded form loads asynchronously, which can take a moment. Until it's there, a small spinner shows in its place. You can style the spinner to match your website, with custom CSS on your website. Custom CSS snippet (example): ```css [data-craftforms-embed] { --craftforms-embed-loader-color: #e4572e; --craftforms-embed-loader-opacity: 1; } ``` Full setup: ```css [data-craftforms-embed] { --craftforms-embed-loader-color: #2563eb; /* ring colour */ --craftforms-embed-loader-opacity: 1; /* 0–1 */ --craftforms-embed-loader-size: 2.5em; /* diameter */ --craftforms-embed-loader-width: 4px; /* stroke thickness */ --craftforms-embed-loader-speed: 1.2s; /* one rotation */ --craftforms-embed-loader-height: 180px; /* min box height */ } ``` Or inline on the snippet's `div`, which is handy on a static site with no stylesheet to edit: ```html
```