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

<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, 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'