Embedded Forms

Put a Formerie form inside any page, from a one-line script to your own components.

Choose A Method

Method	The form looks like	Code needed
Script embed	Your hosted form’s branding, in an iframe	One script tag
Browser mount	Your site’s CSS, rendered in your page	A little JavaScript
Framework package or SDK	Your own components	Your own UI

Script Embed

Open a form, then Release, choose Embed, and copy the code:

HTML

<script
  src="https://forms.formerie.com/embed.js"
  data-formerie-form="example.com/contact"
></script>

The script adds an iframe where the tag sits, showing your published hosted form with its logo, colours, and font. Use these optional attributes:

Attribute	Use
`data-formerie-height`	Minimum height. The default is `720px`
`data-formerie-target`	A CSS selector for where the form goes
`data-formerie-title`	The iframe’s title, for screen readers

The iframe keeps the height you set and doesn’t resize itself, so pick a height that fits your longest form.

Browser Mount

Use this when the form should sit directly in your page and follow your CSS.

Install @formerie/client

Shell

npm install @formerie/client

Shell

pnpm add @formerie/client

Shell

yarn add @formerie/client

Shell

bun add @formerie/client

TypeScript

import { FormerieRuntimeClient, mountFormerieRuntimeForm } from "@formerie/client";

await mountFormerieRuntimeForm("#contact-form", {
  client: new FormerieRuntimeClient(),
  target: { workspace: "example.com", form: "contact" },
});

Add your site under Allowed origins in the form’s settings first.

Your Own Components

Framework packages for React, Vue, Svelte, and others let you keep your own markup. See Framework Entry Points. All packages are in alpha, so their APIs may change.

What Stays The Same

Every method uses the same server checks: validation, conditions, spam checks, human verification, and delivery settings. Recipients and provider keys never reach the page.