# Concevoir un formulaire

> Utilisez l’éditeur de formulaires pour ajouter des étapes, du texte, des images, des boutons et des champs de saisie, mettre en forme le formulaire, le prévisualiser sur chaque appareil et le publier une fois les contrôles réussis.

L’éditeur de formulaires est un éditeur plein écran dans lequel vous concevez ce que voient les visiteurs : une ou plusieurs étapes de formulaire, une étape de confirmation, chacun de leurs blocs et les styles du formulaire. Cette page passe en revue chaque partie de l’éditeur et les contrôles qu’un formulaire doit réussir avant de pouvoir être publié.

## Avant de commencer

- Les formulaires sont en accès anticipé. Consultez [Formulaires](/fr/docs/forms/) s’ils ne sont pas disponibles dans votre espace de travail.
- Créez le formulaire sous **Email Marketing → Forms** avec **Create form**, en lui donnant un **Name** et un **Type**.

## Ouvrir l’éditeur

Sur la page du formulaire, sélectionnez **Edit form**. L’éditeur s’ouvre par-dessus le tableau de bord :

- **En-tête :** le nom du formulaire (sélectionnez-le pour le renommer), le badge **Draft** ou **Live**, un indicateur **Unsaved** quand vous avez des modifications, **Undo** et **Redo**, un bouton par étape, **Add step**, **Publish**, **Save** et le bouton de fermeture.
- **Canevas :** un aperçu en direct de l’étape sélectionnée. Basculez entre **Desktop**, **Mobile** et **Both**, vérifiez la taille du formulaire, zoomez avec **Scale** et sélectionnez **Reset canvas** pour le recentrer.
- **Panneau latéral :** les onglets **Content** et **Styles**, et **Alerts & checks** en bas.

Sélectionnez **Save** pour conserver vos modifications. Enregistrer un formulaire en ligne le met aussi à jour sur votre site.

## Étapes

Un nouveau formulaire comporte deux étapes : **Step 1**, avec un texte « Join our list », un champ **Email** et un bouton **Subscribe**, et une étape **Success** qui affiche « Thanks for subscribing! ».

- **Les étapes de formulaire** contiennent les champs que remplissent les visiteurs. Sélectionnez **Add step** (le bouton plus dans l’en-tête) pour ajouter une autre étape de formulaire. Les nouvelles étapes se placent avant l’étape de confirmation.
- **L’étape de confirmation** s’affiche une fois que le visiteur a envoyé le formulaire. Utilisez-la pour remercier, renvoyer vers une page ou offrir un code de réduction.
- **Passez d’une étape à l’autre** avec des boutons. Un bouton **Next step** valide l’étape en cours et affiche la suivante. Un bouton **Submit** valide l’étape, envoie la réponse et affiche l’étape de confirmation.

Sélectionnez le bouton d’une étape dans l’en-tête pour la modifier sur le canevas.

## Ajouter des blocs

Dans l’onglet **Content**, sélectionnez un bloc pour l’ajouter à l’étape en cours. Pour insérer un bloc à un endroit précis, survolez le canevas entre deux blocs et sélectionnez le bouton plus. Faites glisser les blocs pour les réorganiser, et sélectionnez un bloc pour modifier ses paramètres. **Delete** se trouve en haut des paramètres de chaque bloc.

| Groupe | Bloc | Utilisation |
| --- | --- | --- |
| **Elements** | **Text** | Titres et paragraphes, avec gras, italique, liens et emoji. |
| | **Button** | Envoyer le formulaire, passer à l’étape suivante, fermer le formulaire ou ouvrir un lien. |
| | **Image** | Un logo, une photo de produit ou une bannière, avec un lien facultatif. |
| **Inputs** | **Email** | L’adresse e-mail du visiteur. Le format est contrôlé. |
| | **Text input** | Tout texte court, comme un nom ou une entreprise. |
| | **Phone** | Un numéro de téléphone. Le format est contrôlé. |
| | **Radio** | Un choix dans une liste. |
| | **Checkbox** | Plusieurs choix dans une liste, ou une case de consentement unique. |
| | **Date** | Une date, au format de votre choix. |
| | **Dropdown** | Un choix dans une liste, présenté dans un menu compact. |

### Paramètres des blocs

**Text**

- Contenu, modifié directement sur le canevas.
- **Typography** : **Alignment**, **Font size**, **Weight**, **Color** et **Link color**.

**Button**

- **Label** et **Action** : **Submit**, **Next step**, **Close** ou **Go to URL**. **Go to URL** nécessite aussi une **URL**.
- **Button style** : **Width** (automatique ou pleine largeur), **Alignment**, **Background**, **Text**, **Hover** et **Border radius**.

**Image**

- **Image URL**, **Alt text** et une **Link URL** facultative.
- **Layout** : **Width (%)**, **Alignment** et **Object fit**.

**Email, Text input, Phone et Date**

- **Property name** : la clé sous laquelle la valeur est stockée dans chaque réponse, par exemple `email` ou `company`. Elle doit être unique dans le formulaire.
- **Label**, **Placeholder** (ou **Date format** pour les dates : `MM/DD/YYYY`, `DD/MM/YYYY` ou `YYYY-MM-DD`) et **Help text**.
- **Required**, avec un **Required message** facultatif, et un **Invalid message** affiché quand une adresse e-mail ou un numéro de téléphone ne semble pas valide. Les numéros de téléphone sont plus faciles à valider au format international, comme `+15551234567`.

**Radio, Checkbox et Dropdown**

- **Property name**, **Label** et **Help text**.
- **Required**, avec un **Required message** facultatif.
- **Layout** : vertical ou horizontal.
- **Options**, une par ligne sous la forme `label|value`, par exemple `Weekly digest|weekly`.

**Tous les blocs**

- **Spacing** : **Margin top** et **Margin bottom**.
- **Visibility** : **Show on** **Desktop & mobile**, **Desktop only** ou **Mobile only**. Les blocs masqués restent dans le formulaire et ne sont exclus que de l’aperçu et de l’appareil correspondants.

## Mettre en forme le formulaire

L’onglet **Styles** règle l’ensemble du formulaire :

| Section | Paramètres |
| --- | --- |
| **Form type** | **Type**. Pour les panneaux coulissants, **Flyout side** (**Bottom right**, **Bottom left** ou **Bottom**). Pour les bannières, **Banner position** (**Top** ou **Bottom**). |
| **Size** | **Width (px)** et **Min height (px)**. Laissez la hauteur à 0 pour une hauteur automatique. |
| **Overlay** | **Overlay color** et **Opacity** derrière les pop-ups, les panneaux coulissants et les formulaires pleine page. |
| **Form background** | **Fill**, **Border color**, **Border width**, **Border radius**, **Padding** et **Shadow**. |
| **Side image** | Une image à gauche (**Left**) ou à droite (**Right**) du formulaire, avec **Image URL**, **Alt text** et **Size**. |
| **Background image** | Une image derrière le formulaire, avec **Image URL** et **Fit** (**Cover** ou **Contain**). |
| **Fonts** | **Font family** (**Inter**, **Georgia**, **Mono** ou **System**), **Heading color** et **Body color**. |
| **Input field styles** | Couleurs **Background**, **Border**, **Border radius**, **Text**, **Placeholder** et **Label**. |
| **Button styles** | **Fill**, **Text**, **Hover**, **Border radius** et **Style** (**Solid** ou **Outline**). Chaque bouton peut remplacer ces réglages. |
| **Close icon** | **Color**, **Size** et **Style** (**X** ou **Circle X**) du bouton de fermeture. Non affiché pour les formulaires intégrés. |

## Aperçu

Utilisez **Desktop**, **Mobile** ou **Both** au-dessus du canevas pour vérifier la mise en page sur chaque taille d’écran, y compris les blocs que vous avez masqués sur un appareil. **Undo** et **Redo** parcourent vos modifications récentes.

## Contrôler et publier

**Alerts & checks**, en bas du panneau latéral, liste les problèmes du formulaire. Un compteur rouge indique le nombre d’erreurs.

| Niveau | Contrôle |
| --- | --- |
| Erreur | « Add at least one form step before publishing. » |
| Erreur | « Add a success step before publishing. » |
| Avertissement | Une étape de formulaire ne contient aucun bloc de contenu. |
| Avertissement | Plus d’un champ e-mail. Utilisez si possible un seul champ e-mail. |
| Avertissement | Aucune étape de formulaire ne comporte de bouton d’envoi ou d’étape suivante. |
| Avertissement | Un bouton **Go to URL** n’a pas d’URL. |

Les erreurs bloquent la publication. Les avertissements non, mais corrigez-les pour que les visiteurs puissent remplir le formulaire.

Une fois les contrôles réussis, sélectionnez **Publish** dans l’en-tête de l’éditeur. Emailit enregistre le formulaire, le met en ligne et ferme l’éditeur. Vous pouvez aussi publier ou dépublier depuis la page du formulaire. Ensuite, [installez le script](/fr/docs/forms/install/) sur votre site si ce n’est pas déjà fait.

## Voir aussi

  - [Installer les formulaires](/fr/docs/forms/install/): Affichez vos formulaires en ligne sur votre site.
  - [Vue d’ensemble des formulaires](/fr/docs/forms/): Types de formulaires, statuts et réponses.

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