Web Component

Embed a FormWork form on another website with a copy-paste HTML snippet.

The FormWork web component lets you place a form on any website that accepts custom HTML. Most users should copy the embed code from the Share & Embed page in the form builder.

Copy the Embed Code

1. Open the form builder.
2. Go to Share.
3. Copy the Website Embed Code.
4. Paste it into your website where the form should appear.

For a published form, the embed code looks like this:

<formwork-form form-id="your-form-id"></formwork-form>
<script src="https://app.useformwork.com/static/client.js" type="module"></script>

If you copy code for a draft version, it includes preview-version-id so the embed points to that draft for testing.

Direct Share Links

The Share page also gives you a standalone form URL.

Use a direct share link when:

• You do not control the website HTML
• You want to send the form by email or message
• You are testing a draft form
• You want a full-page form instead of an embedded form

Supported Attributes

Most embeds only need form-id and the script tag.

Previewing Drafts

Draft preview embeds are for testing only.

<formwork-form
  form-id="your-form-id"
  preview-version-id="draft-version-id"
></formwork-form>
<script src="https://app.useformwork.com/static/client.js" type="module"></script>

Use preview embeds on staging pages or internal test pages. For live data collection, use the published embed code.

Resuming an Entry

FormWork can resume draft entries automatically for returning respondents. For most no-code use cases, you do not need to manage entry access details manually.

If your own application manages entry access, you can render an existing entry by passing the entry details to the embed.

<formwork-form
  form-id="your-form-id"
  entry-id="entry-id"
  entry-key="entry-key"
></formwork-form>
<script src="https://app.useformwork.com/static/client.js" type="module"></script>

Treat entry access details as sensitive. Do not place them in public page source unless the surrounding application is designed for that access pattern. Completed entries are not resumed as editable drafts.

Reading Current Answers

The web component exposes a getAnswers() method for custom pages that need to inspect the current in-browser form values.

<formwork-form id="quote-form" form-id="your-form-id"></formwork-form>
<script src="https://app.useformwork.com/static/client.js" type="module"></script>
<script>
  const form = document.getElementById("quote-form");
  const answers = form.getAnswers();
</script>

This is for client-side UI decisions only. Use workflows, entries, exports, or the REST API for durable server-side data.

Theme Mode

Use the theme attribute if the embed should ignore the saved form appearance mode.

<formwork-form form-id="your-form-id" theme="dark"></formwork-form>

Available values:

• auto
• light
• dark

If the attribute is omitted, the form uses the appearance settings saved in the builder.

Hiding Built-In UI

You can hide the title or submit button if the host page provides that part of the experience.

<formwork-form
  form-id="your-form-id"
  hide-title="true"
  hide-submit="true"
></formwork-form>

Only hide the submit button when another part of your page controls submission or when the form is being used as part of a custom flow.

Styling and Page Layout

The embedded form fills the space available to it. Wrap it in a container to control width.

<div style="max-width: 720px; margin: 0 auto;">
  <formwork-form form-id="your-form-id"></formwork-form>
</div>
<script src="https://app.useformwork.com/static/client.js" type="module"></script>

Use the Appearance editor for normal brand styling. Use CSS variables only for advanced custom sites that need code-level control.

Troubleshooting