# Installer les formulaires sur votre site

> Ajoutez une fois le script Emailit à votre site, placez les formulaires intégrés, ouvrez des formulaires depuis votre propre code, et gérez les jetons, la publication et les réponses des formulaires.

Une seule balise script affiche tous les formulaires en ligne de votre espace de travail sur votre site. Cette page explique où la placer, comment positionner les formulaires intégrés, comment ouvrir un formulaire depuis votre propre code et comment vérifier que les réponses arrivent.

## Avant de commencer

- Concevez et publiez au moins un formulaire. Seuls les formulaires en ligne apparaissent sur votre site. Consultez [Concevoir un formulaire](/fr/docs/forms/build/).
- Vous devez pouvoir modifier le HTML de votre site, ou ajouter une balise HTML personnalisée dans votre gestionnaire de balises.

## Ajouter le script

1. **Copiez l’extrait de code.** Sur **Email Marketing → Forms**, sélectionnez **Install**. L’extrait figure aussi sur la page de chaque formulaire, dans la carte **Installation**. Il se présente ainsi, avec la clé publique de votre espace de travail dans le chemin :

```html
<script async src="https://js.emailit.com/js/<WORKSPACE_PUBLIC_KEY>/emailit.js"></script>
```

2. **Ajoutez-le à chaque page.** Collez-le une fois dans la mise en page ou le gabarit commun de votre site, idéalement juste avant la balise fermante `</body>`. C’est le même extrait pour tous les formulaires de l’espace de travail : vous ne l’installez qu’une fois.

3. **Publiez vos formulaires.** Les pop-ups, panneaux coulissants, formulaires pleine page et bannières en ligne apparaissent désormais sur votre site sans code supplémentaire.

Le script se charge de manière asynchrone et ne bloque pas votre page. En cas de problème, comme une erreur réseau, il reste silencieux et votre page continue de fonctionner. Il fonctionne aussi lorsqu’il est ajouté via un gestionnaire de balises.

Si votre site utilise une Content Security Policy, autorisez `https://js.emailit.com` dans `script-src` et `connect-src`.

## Affichage des formulaires superposés

| Type | Moment de l’affichage |
| --- | --- |
| **Banner** | Dès le chargement de la page. Toutes les bannières en ligne sont affichées. |
| **Popup**, **Flyout**, **Full page** | 2,5 secondes après le chargement de la page. Un seul de ces formulaires s’affiche par chargement de page. |

Pour modifier ce délai, définissez `display_delay_seconds` dans les `settings` du formulaire avec [Mettre à jour un formulaire](/fr/docs/api-reference/forms/update/).

Quand un visiteur ferme un formulaire, celui-ci reste masqué dans ce navigateur pendant 7 jours. Après un envoi, il reste masqué pendant un an. Emailit le mémorise dans le stockage local du navigateur, sous la clé `emailit_forms_v1`, et ne dépose aucun cookie. Si le stockage local n’est pas disponible, les formulaires s’affichent à chaque chargement de page.

## Intégrer un formulaire dans votre page

Les formulaires intégrés s’affichent dans votre contenu, par exemple dans un pied de page ou la barre latérale d’un blog. En plus du script, ils ont besoin d’un élément conteneur :

1. **Copiez le conteneur.** Ouvrez la page du formulaire intégré. La carte **Installation** affiche le conteneur avec le jeton public du formulaire :

```html
<div data-emailit-form="FORM_TOKEN"></div>
```

2. **Placez-le.** Collez le conteneur là où le formulaire doit apparaître. Vous pouvez utiliser le même formulaire à plusieurs endroits.

3. **Vérifiez le script.** Assurez-vous que le [script](#add-the-script) est aussi présent sur la page.

Le script remplit chaque conteneur `data-emailit-form` dont le jeton correspond à un formulaire intégré en ligne. Il surveille aussi la page : les conteneurs ajoutés plus tard, par exemple par une application monopage, sont remplis dès leur apparition. Les formulaires intégrés s’affichent à chaque fois, que le visiteur les ait déjà envoyés ou non.

## Ouvrir un formulaire depuis votre code

Appelez `emailit("show", token)` pour ouvrir un pop-up, un panneau coulissant, un formulaire pleine page ou une bannière au moment de votre choix, par exemple depuis un bouton :

```html
<button type="button" onclick="emailit('show', 'FORM_TOKEN')">
  Join the newsletter
</button>
```

- Le formulaire s’ouvre immédiatement, même si le visiteur l’a déjà fermé ou envoyé.
- Le formulaire doit être en ligne, et le script doit être présent sur la page.
- Les appels effectués pendant le chargement du script sont mis en file d’attente et exécutés dès qu’il est prêt.
- Pour un formulaire intégré, `show` analyse de nouveau la page à la recherche de ses conteneurs.

`openForm` fonctionne comme alias de `show`.

## Gérer un formulaire en ligne

### Mettre à jour ou dépublier

Les modifications enregistrées sur un formulaire en ligne, ou sa dépublication, sont répercutées sur votre site en une minute environ. Pour retirer un formulaire de votre site, ouvrez sa page et sélectionnez **Unpublish**. Il repasse à l’état de brouillon et vous pourrez le republier plus tard.

### Réinitialiser le jeton public

Chaque formulaire a un jeton public, affiché sous **Public token** sur sa page. Les conteneurs d’intégration et les appels `emailit("show", ...)` l’utilisent. Pour en émettre un nouveau, appelez [Réinitialiser le jeton public](/fr/docs/api-reference/forms/reset-token/) :

```bash
curl https://api.emailit.com/v2/forms/frm_8Lq2Wx5nVb3Tk/reset-token \
  -X POST \
  -H "Authorization: Bearer $EMAILIT_API_KEY"
```

L’ancien jeton cesse immédiatement de fonctionner : mettez à jour vos conteneurs et votre code avec le nouveau `token` de la réponse. Les formulaires superposés qui s’affichent automatiquement ne sont pas concernés.

## Vérifier les réponses

Envoyez le formulaire sur votre site avec vos propres informations, puis ouvrez la page du formulaire dans le tableau de bord. **Recent submissions** liste chaque réponse avec son heure **Created** et son **Payload** : les valeurs envoyées, indexées par le nom de propriété de chaque champ. Filtrez la liste par date de création.

En plus des valeurs, Emailit enregistre avec chaque réponse l’URL de la page, le référent, l’adresse IP du visiteur et le user agent de son navigateur. Mentionnez-le dans votre politique de confidentialité.

Les réponses ne sont pas encore ajoutées à vos contacts ni à vos listes. Consultez [Réponses](/fr/docs/forms/#submissions).

## Dépannage

<details>
<summary>Le formulaire n’apparaît pas</summary>

Vérifiez que le formulaire est **Live** et que le script est présent sur la page, avec la clé de votre espace de travail dans son URL. Si vous avez déjà fermé ou envoyé le formulaire, il reste masqué dans votre navigateur : ouvrez la page dans une fenêtre de navigation privée, ou supprimez l’entrée `emailit_forms_v1` du stockage local. N’oubliez pas qu’un seul pop-up, panneau coulissant ou formulaire pleine page s’affiche par chargement de page.

</details>

<details>
<summary>Un formulaire intégré ne s’affiche pas</summary>

Vérifiez que le type du formulaire est **Embed**, qu’il est en ligne et que la valeur `data-emailit-form` du conteneur correspond au jeton public actuel du formulaire. Si vous avez réinitialisé le jeton, mettez à jour le conteneur.

</details>

## Voir aussi

  - [Concevoir un formulaire](/fr/docs/forms/build/): Concevez les étapes, les champs et les styles.
  - [API des formulaires](/fr/docs/api-reference/forms/): Créez, publiez et gérez des formulaires depuis votre code.

---
Source: https://emailit.com/fr/docs/forms/install/