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`	Hauteur minimale. La valeur par défaut est `720px`
`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 garde la hauteur fixée et ne se redimensionne pas d’elle-même. Choisissez donc une hauteur qui convient à votre plus long formulaire.

Montage dans le navigateur

Utilisez cette méthode quand le formulaire doit se trouver directement dans votre page et suivre votre CSS.

Installer @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" },
});

Ajoutez d’abord votre site sous Origines autorisées dans les réglages du formulaire.

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. 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.