Install

The minimum install is two lines of HTML.

The basic snippet

<div data-form-id="frm_01H..."></div>
<script src="https://formspring.io/embed.js" defer></script>

That's it. Save, deploy, the form appears.

The data-form-id is the public ID of your form. Find it on the form's edit page → Embed tab. It's also in the URL of the form on the dashboard.

The script auto-discovers every element with data-form-id on the page and renders into it. You can have multiple forms on the same page — give each its own <div> with its own data-form-id.

Init options as data attributes

Most options can be set inline:

<div
  data-form-id="frm_01H..."
  data-theme="dark"
  data-redirect="https://example.com/thanks"
  data-success-message="Got it. We'll be in touch soon."
  data-button-text="Send message"
></div>
<script src="https://formspring.io/embed.js" defer></script>

Attribute	Default	Notes
`data-form-id`	required	Form's public ID
`data-theme`	`auto`	`light`, `dark`, `auto` (matches `prefers-color-scheme`)
`data-redirect`	inherits form setting	URL to redirect to on success
`data-success-message`	inherits form setting	Inline success text shown if no redirect
`data-button-text`	"Submit"	Submit button label
`data-locale`	`auto`	`en`, `de`, `fr`, `es`, `it`, `nl`, `pt`, `ja`
`data-disable-analytics`	`false`	Set to `true` to skip the page-view ping

Init options programmatically

For options that don't fit cleanly in a string attribute, configure via the global Formspring object before the script loads:

<div id="contact"></div>

<script>
  window.formspringConfig = {
    formId: 'frm_01H...',
    mountTo: '#contact',
    theme: 'dark',
    onSuccess: (submission) => console.log('sent', submission.id),
    onError: (error) => console.warn('failed', error),
    fields: {
      message: { placeholder: 'How can we help?' }
    }
  };
</script>
<script src="https://formspring.io/embed.js" defer></script>

When you provide window.formspringConfig, the widget skips auto-discovery and only renders the form you configured. To configure multiple forms manually, use window.formspringConfigs as an array.

CSP considerations

If your site has a Content Security Policy, you'll need to allow the widget's domain in three directives:

script-src  https://formspring.io;
connect-src https://formspring.io;
img-src     https://formspring.io data:;

If you use captcha, also allow:

hCaptcha: https://hcaptcha.com https://*.hcaptcha.com for script-src, connect-src, frame-src.
reCAPTCHA: https://www.google.com https://www.gstatic.com for script-src, connect-src, frame-src.

The widget does not use eval or inline <script>. It's safe with strict script-src policies.

If you cannot allow a third-party script at all (high-security environments), use headless mode — you bundle the validation logic yourself and POST to the API directly.

Subresource integrity

For pinned releases, use the versioned URL with an integrity hash (find both on the Embed tab of the form's edit page):

<script
  src="https://formspring.io/embed/v1.7.2.js"
  integrity="sha384-Abc123..."
  crossorigin="anonymous"
  defer
></script>

The unversioned https://formspring.io/embed.js always points to the latest stable release. We don't ship breaking changes within a major version.

Verifying the install

Load the page in a fresh browser tab.
Open the dev tools console. The widget logs [Formspring] mounted form frm_01H... when it boots.
Submit a test entry. You should see it appear in your dashboard within seconds.
The submission's metadata will include source: "embed" so you can tell embed traffic apart from raw POST traffic.

If the form doesn't render, check:

The form ID is correct.
The form is published (unpublished forms refuse to render via embed).
Your CSP allows formspring.io in script-src and connect-src.
The browser console for explicit errors.