# 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` | A minimum height, for a form that should never get shorter. Optional, since the iframe fits your form |
| `data-formerie-target` | A CSS selector for where the form goes |
| `data-formerie-title` | The iframe's title, for screen readers |

The iframe sizes itself to your form, and follows along as the form changes, so
there's no height to work out. A form with two or more sections shows one step at a
time, just like its hosted page. See
[Sections And Multi-Step Forms](/guides/multi-step-forms/).

The script tag brings the automatic sizing. An iframe you add by calling
`mountFormerieEmbed()` directly keeps its set height until the next SDK release.

## Browser Mount

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

npm:

```sh
npm install @formerie/client
```

pnpm:

```sh
pnpm add @formerie/client
```

Yarn:

```sh
yarn add @formerie/client
```

Bun:

```sh
bun add @formerie/client
```

```ts
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. A browser
mount shows every section together, each with its heading. Next and Back and section
summaries arrive with the next SDK release.

## Your Own Components

Framework packages for React, Vue, Svelte, and others let you keep your own
markup. See [Framework Entry Points](/guides/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.