# Embedding & hosted pages

Put a form on any website with one script tag, or share its hosted page when you have no website at all.

## The embed snippet

Click **Embed** on a form to copy its snippet. It has three parts: a container, the widget script, and a `load` call with your organization and form slugs.

html:

```html
<div id="f2wf-contact"></div>

<script src="https://form2wf.com/f2wf.js"></script>
<script>
  f2wf.load("your-org", "contact");
</script>
```

Load `f2wf.js` with a normal `<script src>` from your form2wf host. The widget works out the API address from its own script URL, so don't bundle it, rename it, or load it with `async`.

## load() options

all options:

```
f2wf.load("your-org", "contact", {
  containerId: "my-form",            // default: "f2wf-" + form slug
  submitText: "Send",                // default: "Submit"
  successTitle: "Thanks!",           // default: "Thank you!"
  successMessage: "We'll be in touch.", // default: "Your form has been submitted successfully."
  errorMessage: "Something went wrong — please try again.", // default: the server's message
  disableStyles: false,              // true: skip the base stylesheet (theme colors still apply)
  onError: function (err) { console.error(err); }
});
```

The success title and message come only from these options — n8n's reply isn't shown to the visitor. To show a per-submission result, use a [webhook button](https://form2wf.com/docs/data-pages#buttons), whose response is displayed.

## Several forms on one page

Give each form its own container; the default container id is `f2wf-` plus the form slug.

```
<div id="f2wf-newsletter"></div>
<div id="f2wf-contact"></div>

<script src="https://form2wf.com/f2wf.js"></script>
<script>
  f2wf.load("your-org", "newsletter");
  f2wf.load("your-org", "contact");
</script>
```

## Limit which websites can use a form

By default any website can embed a form. To restrict it, list your sites under **Form Settings → Allowed Websites** (one domain per line, or `allowed_domains` through the MCP server). Subdomains are included: `example.com` also allows `shop.example.com`. Loading, submitting, onload and button calls from other sites are refused with `403`. The hosted page always works.

This stops other websites from using the form in visitors' browsers. A script outside a browser can claim to be any site, so protect sensitive workflows with login-protected forms or a secret webhook header as well.

## Hosted pages

Every active form is also available as a standalone page:

```
https://form2wf.com/forms/your-org/contact
```

The page shows your organization name, uses the theme's background and primary colors, and passes its own query string to the form — so `…/forms/your-org/contact?plan=Pro` fills `{{params.plan}}`. Use it for links in emails, QR codes and social bios. The hosted page has its own heading, so set `showTitle: false` on forms mainly shared this way.

## JavaScript API

| Method | Description |
| --- | --- |
| `f2wf.load(org, form, options)` | Render a form into its container. |
| `f2wf.navigateToForm(slug, params)` | Replace the current form with another form of the same organization. |
| `f2wf.params` | Current params (URL query + navigation params). |
| `f2wf.getUser()`, `f2wf.getToken()` | The signed-in form user and their token, on login-protected forms. |
| `f2wf.logout()` | Sign the form user out and reload. |
| `f2wf.showNotification(message, type)` | Show the widget's toast notification. |

## Styling hooks

Every element carries an `f2wf-` class, so you can adjust the look from your own stylesheet:

| Class | Element |
| --- | --- |
| `.f2wf-form`, `.f2wf-fields`, `.f2wf-columns-2`…`-4` | Form, field grid, column variants |
| `.f2wf-field`, `.f2wf-title`, `.f2wf-subtitle`, `.f2wf-display-value` | Field wrapper, form title, section heading, display text |
| `.f2wf-submit`, `.f2wf-button-primary` / `-secondary` / `-danger`, `.f2wf-link` | Buttons and links |
| `.f2wf-table`, `.f2wf-row-action`, `.f2wf-table-empty` | Tables and row actions |
| `.f2wf-array-item`, `.f2wf-array-add-btn`, `.f2wf-object-content` | Repeatable and grouped fields |
| `.f2wf-file-zone`, `.f2wf-success-message`, `.f2wf-notification`, `.f2wf-user-bar` | File drop zone, success panel, toasts, signed-in bar |

css:

```
.f2wf-form { max-width: 560px; margin: 0 auto; }
.f2wf-submit { width: 100%; border-radius: 999px; }
```

## Content Security Policy

If your site sends a CSP header, allow the form2wf origin for scripts and requests:

```
Content-Security-Policy: script-src 'self' https://form2wf.com; connect-src 'self' https://form2wf.com; style-src 'self' 'unsafe-inline'
```

---
Source: https://form2wf.com/docs/embedding — Form2Workflow documentation (Publishing)