FormXen

Embed forms on your own site

Publish a form as a link anyone can open, or embed the widget so feedback is collected without sending people away from your page.

A published FormXen form has a public fill link that works on its own — share it in an email, a post, or a QR code, and anyone who opens it can respond without an account. That is the right choice when the form is the destination.

The embed widget is for when the form should not be a destination. It loads on your page, so someone gives feedback without leaving what they were doing. Because it runs in the context of your site, it can also do two things a bare link cannot: identify who is submitting, and arrive with fields already filled in.

Themes apply to both. Colors, fonts, and logo carry onto the public fill page and the embedded widget alike, so neither version looks like it came from somewhere else.

Two ways to publish

Public fill link

Every published form gets a link that anyone can open and submit without an account. Use it when the form is the thing you are sending people to — a registration, an application, a survey.

Embed widget

A single script tag mounts the feedback widget on your page. Use it when responding should not interrupt what the person is doing, and when you want the submission tied to the signed-in user.

Embedding a form

Basic embed

One script tag, one token. Drop it into the page where the widget should appear.

<script
  src="https://app.formxen.com/embed/feedback-widget.js"
  data-feedback-token="YOUR_FEEDBACK_TOKEN"
  async
></script>

Secure submitter IDs

If the submission should be attributed to a signed-in user, do not send the raw user ID from the browser — anyone can edit that. Compute an HMAC of the user ID on your server with your secret, pass the digest, and pass the plain ID alongside it so the server can verify the two match.

<script
  src="https://app.formxen.com/embed/feedback-widget.js"
  data-feedback-token="YOUR_FEEDBACK_TOKEN"
  data-user-id="HMAC_HEX_DIGEST"
  data-user-id-plain="YOUR_LOGGED_IN_USER_ID"
  async
></script>

Prefilled hidden fields

Pass values straight into the form’s hidden fields — the plan the user is on, the page they were viewing, the campaign that brought them. They arrive stored with the submission like any other answer.

<script
  src="https://app.formxen.com/embed/feedback-widget.js"
  data-feedback-token="YOUR_FEEDBACK_TOKEN"
  data-initial-values='{"hidden-field-id":"campaign-42"}'
  async
></script>

Script attributes

data-feedback-token: Required. Identifies which published form the widget collects for.
data-user-id: Optional. The HMAC hex digest of your user ID, computed on your server. Never the raw ID.
data-user-id-plain: Optional, and only alongside data-user-id. The plain user ID, so the server can verify the digest.
data-initial-values: Optional. A JSON object mapping hidden field IDs to the values they should arrive with.
async: Recommended. Keeps the widget from blocking the rest of your page while it loads.

How it is set up

Build and publish the form, then apply a theme so it matches the site it will sit on.
Copy the feedback token for that form from the app.
Add the script tag to your page with the token set.
If submissions should be attributed to a signed-in user, compute the HMAC server-side and pass both the digest and the plain ID.
Add any hidden fields you want prefilled, then set them through data-initial-values.

Questions teams ask

Do respondents need an account to fill in an embedded form?

No. Both the public fill link and the embedded widget accept submissions from anyone. Accounts are only for the people who build forms and read responses.

Why not just pass the user ID directly?

Because anything the browser sends can be edited by whoever is using that browser, so a raw user ID is a claim rather than a fact. Computing an HMAC on your server with your secret means the submission carries proof of identity, and passing the plain ID alongside lets the server check the two agree.

Can the embedded form match my site?

Yes. Themes set colors, fonts, and logo, and they apply to the embedded widget as well as the public fill page.

Can I prefill fields from my page?

Yes, through data-initial-values, which takes a JSON object keyed by hidden field ID. It is the usual way to attach plan, page, or campaign context to a submission.

Will the widget slow my page down?

Load it with the async attribute and it will not block the rest of the page. The widget’s own assets load after your page has started rendering.