# Formulaires intégrés

Placez un formulaire Formerie dans n’importe quelle page, d’un simple script jusqu’à vos
propres composants.

## Choisir une méthode

| Méthode | Le formulaire ressemble à | Code requis |
| --- | --- | --- |
| Intégration par script | Votre formulaire hébergé et sa marque, dans une iframe | Une balise script |
| Montage dans le navigateur | Votre site et son CSS, directement dans la page | Un peu de JavaScript |
| Paquet de framework ou SDK | Vos propres composants | Votre interface |

## Intégration par script

Ouvrez un formulaire, puis **Publication**, choisissez **Intégrer** et copiez le code :

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

Le script ajoute une iframe à l’endroit de la balise. Elle affiche votre formulaire
hébergé publié, avec son logo, ses couleurs et sa police. Ces attributs sont facultatifs :

| Attribut | Utilité |
| --- | --- |
| `data-formerie-height` | Une hauteur minimale, pour un formulaire qui ne doit jamais rapetisser. Facultatif, puisque l’iframe s’ajuste à votre formulaire |
| `data-formerie-target` | Un sélecteur CSS pour choisir où placer le formulaire |
| `data-formerie-title` | Le titre de l’iframe, pour les lecteurs d’écran |

L’iframe s’ajuste à votre formulaire et le suit quand il change : vous n’avez aucune hauteur
à calculer. Un formulaire de deux sections ou plus s’affiche une étape à la fois, comme sur
sa page hébergée. Consultez [Sections et formulaires à étapes](/fr/guides/multi-step-forms/).

C’est la balise script qui apporte l’ajustement automatique. Une iframe ajoutée en appelant
directement `mountFormerieEmbed()` garde sa hauteur fixée jusqu’à la prochaine version du SDK.

## Montage dans le navigateur

Utilisez cette méthode quand le formulaire doit se trouver directement dans votre page
et suivre votre 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" },
});
```

Ajoutez d’abord votre site sous **Origines autorisées** dans les réglages du formulaire. Le
montage dans le navigateur affiche toutes les sections ensemble, chacune avec son titre.
Suivant et Précédent ainsi que les résumés de section arrivent avec la prochaine version du
SDK.

## Vos propres composants

Les paquets de framework pour React, Vue, Svelte et d’autres vous laissent garder votre
balisage. Consultez [Points d’entrée par framework](/fr/guides/framework-entry-points/). Tous les
paquets sont en version alpha : leurs API peuvent changer.

## Ce qui ne change pas

Chaque méthode utilise les mêmes vérifications sur le serveur : validation, conditions,
antipourriel, vérification humaine et réglages de livraison. Les destinataires et les
clés de fournisseur n’arrivent jamais dans la page.