# Créer et intégrer un formulaire d'abonnement

Pushwoosh vous offre la flexibilité de créer des formulaires d'abonnement pour différents scénarios d'inscription, de personnaliser les champs que vous collectez et d'afficher le formulaire sous forme de widget modal ou en ligne sur votre site web.

## Comment créer un formulaire

Pour créer un nouveau formulaire d'abonnement :

1. Allez dans **Audience → Formulaires d'abonnement**.
2. Cliquez sur **Créer un formulaire**.

<img src="/subscription-forms-1.webp" alt="Page des formulaires d'abonnement avec les cartes Double Opt-In et Formulaires d'abonnement, le lien Comment utiliser et le bouton Créer un formulaire"/>
3. Configurez le formulaire. Un aperçu en direct apparaît à droite et se met à jour au fur et à mesure que vous modifiez les paramètres.

### Configurer les paramètres généraux

Configurez les champs suivants.

> **Tous les champs de cette section sont obligatoires.**

- **Nom interne du formulaire :** utilisé uniquement dans Pushwoosh, non visible par les abonnés. Exemple : « Inscription à la newsletter ».
- **Type d'affichage :** choisissez comment le formulaire apparaît sur votre site :
  - **Popup modal :** une superposition qui apparaît par-dessus la page lorsque le **Déclencheur** que vous avez défini se produit, par exemple **Immédiatement** ou après quelques secondes (voir [Définir le moment d'affichage du popup modal](#définir-le-moment-daffichage-du-popup-modal)). Idéal pour les inscriptions à la newsletter ou les offres promotionnelles que vous souhaitez que les visiteurs remarquent.
  - **Intégré en ligne :** le formulaire se trouve dans le contenu de votre page (par exemple, dans une barre latérale ou au bas d'un article). Les visiteurs le voient comme faisant partie de la mise en page, et non comme un popup distinct.
- **URL de la politique de confidentialité :** le formulaire affiche une case à cocher de consentement (« J'accepte la politique de confidentialité ») qui renvoie à cette URL. Exemple : `https://example.com/policy`.

<img src="/subscription-forms-2.webp" alt="Interface de création de formulaire d'abonnement avec Nom interne du formulaire, Type d'affichage, URL de la politique de confidentialité et configuration des champs du formulaire"/>

#### Définir le moment d'affichage du popup modal

Pour le **Popup modal** uniquement :

1. Définissez quand le popup apparaît sur la page. Dans le menu déroulant **Déclencheur**, sélectionnez :
  - **Immédiatement** (par défaut)
  - Après 3 secondes
  - Après 5 secondes
  - Après 10 secondes
2. Dans le menu déroulant **Fréquence**, sélectionnez la fréquence à laquelle chaque visiteur voit le popup :
  - **Une fois par visiteur** (par défaut) : une fois par appareil
  - **Une fois par session** : une fois par session de navigateur
  - **Toujours** : à chaque fois qu'ils visitent la page

<img src="/subscription-forms-3.webp" alt="Création d'un formulaire d'abonnement avec le type d'affichage Popup modal, les menus déroulants Déclencheur et Fréquence, et les boutons Ajouter un champ"/>

### Configurer les champs du formulaire

Chaque formulaire inclut un champ **E-mail** par défaut (il ne peut pas être supprimé). Vous pouvez ajouter jusqu'à quatre champs supplémentaires, pour un total de cinq.

Cliquez sur **+ Prénom**, **+ Nom de famille**, **+ Numéro de téléphone** ou **+ Champ personnalisé** pour les ajouter.

<Aside type="note">
Les valeurs de ces champs intégrés sont enregistrées dans des tags standards : `first_name`, `last_name` et `phone`. Les champs personnalisés enregistrent leurs valeurs dans les tags que vous sélectionnez dans le paramètre **Tag lié**.
</Aside>

Pour chaque champ, cochez **Obligatoire** si le visiteur doit le remplir (les champs obligatoires affichent un astérisque `*`). Utilisez l'icône de la corbeille pour supprimer un champ.

<img src="/subscription-forms-4.webp" alt="Liste des champs du formulaire avec E-mail, Prénom, Numéro de téléphone, Nom de famille, Ville et configuration du champ sélectionné"/>

#### Créer un champ personnalisé

1. Cliquez sur **+ Champ personnalisé** dans la liste des champs.
2. Sous **Tag lié**, choisissez le tag Pushwoosh qui stockera la valeur soumise depuis ce champ (par exemple `birthday`). Vous devez créer le tag à l'avance.
3. Définissez l'**Étiquette du champ** : le texte que les visiteurs voient à côté de la saisie (par exemple `Date de naissance`).
4. Définissez éventuellement un **Texte indicatif (optionnel)** : un texte d'aide à l'intérieur du champ vide (par exemple `MM/JJ/AAAA`).
5. Activez ou désactivez l'option **Obligatoire**.

<img src="/subscription-forms-7.webp" alt="Configuration d'un champ personnalisé avec Tag lié, Étiquette du champ, Texte indicatif et case à cocher Obligatoire"/>

### Personnaliser les étiquettes du formulaire

Par défaut, tout le texte du formulaire est en anglais. Pour traduire le formulaire dans une autre langue ou modifier une formulation, cliquez sur **Personnaliser les étiquettes** sous l'aperçu en direct.

<img src="/subscription-forms-16.webp" alt="Boîte de dialogue Personnaliser les étiquettes du formulaire avec les champs Titre, Bouton, Texte de la politique de confidentialité, Texte du lien de la politique de confidentialité, Message de succès, Message de double opt-in, Étiquette de l'e-mail et Texte indicatif de l'e-mail"/>

Dans la boîte de dialogue **Personnaliser les étiquettes du formulaire**, vous pouvez modifier :

- **Titre**
- **Bouton**
- **Texte de la politique de confidentialité**
- **Texte du lien de la politique de confidentialité**
- **Message de succès**
- **Message de double opt-in** (s'applique uniquement si le double opt-in est activé)
- **Étiquette** et **Texte indicatif** optionnel pour chaque champ du formulaire

Cliquez sur **Enregistrer** pour appliquer vos modifications. Elles apparaissent immédiatement dans l'aperçu en direct. Le formulaire publié est mis à jour après que vous avez enregistré ou publié le formulaire d'abonnement.

### Prévisualiser et enregistrer le formulaire

Un aperçu en direct apparaît sur le côté droit de l'interface de création de formulaire d'abonnement et se met à jour au fur et à mesure que vous modifiez les paramètres. Utilisez **Réinitialiser l'aperçu** sous l'aperçu pour restaurer l'état par défaut de l'aperçu.

<Aside type="note">
Les soumissions de test depuis l'**Aperçu** ne créent pas d'abonnés dans votre projet.
</Aside>

<img src="/subscription-forms-5.webp" alt="Création d'un formulaire d'abonnement avec aperçu en direct à droite, Réinitialiser l'aperçu et bouton Créer en haut à droite"/>

Lorsque vous avez terminé de configurer le formulaire, cliquez sur **Créer** dans le coin supérieur droit.

### Copier le code d'intégration et l'ajouter à votre site

<Aside type="caution" icon="setting" title="Assistance d'un développeur requise">
Vous aurez besoin de l'aide de votre équipe de développement pour ajouter le code d'intégration à votre site web.
</Aside>

Une boîte de dialogue s'ouvre avec le code d'intégration pour votre formulaire. Cliquez sur **Copier le code** pour copier l'extrait dans le presse-papiers.

<img src="/subscription-forms-11.webp" alt="Boîte de dialogue du code du formulaire modal avec extrait de script, instruction de coller avant la balise de fermeture body et bouton Copier le code"/>

#### Où coller le code d'intégration sur votre site web

Ajoutez le script au HTML de la page où il doit s'exécuter.

- Pour un **Popup modal**, l'approche habituelle consiste à placer le script avant la balise de fermeture `</body>`.

- Pour une **Intégration en ligne**, placez l'extrait à l'endroit exact de votre balisage où vous souhaitez que le bloc de formulaire apparaisse.

<Aside type="tip" title="Personnaliser le widget avec CSS">
Vous pouvez surcharger le style par défaut (couleurs, typographie, espacement et le modal) sur votre site en définissant des propriétés personnalisées CSS sur l'élément `pushwoosh-subscribe-widget`. [En savoir plus](/fr/product/audience-data-and-segmentation/subscription-forms/customize-widget/).
</Aside>

### À quoi ressemblent les différents types d'affichage sur votre site web

Ces exemples montrent comment chaque type de formulaire peut apparaître sur une page en direct. Les étiquettes des champs et les marqueurs obligatoires correspondent à ce que vous configurez dans le constructeur de formulaires.

<Tabs>
<TabItem label="Popup modal">

<img src="/subscription-forms-14.webp" alt="Superposition d'inscription à la newsletter modale sur une page web avec champs e-mail, nom, téléphone, case à cocher de la politique de confidentialité et bouton S'abonner"/>

</TabItem>
<TabItem label="Intégré en ligne">

<img src="/subscription-forms-15.webp" alt="Formulaire d'inscription à la newsletter en ligne dans le corps de la page avec champs e-mail, nom, téléphone, case à cocher de confidentialité et bouton S'abonner"/>

</TabItem>
</Tabs>

## Prochaines étapes

- [Activer le double opt-in](/fr/product/audience-data-and-segmentation/subscription-forms/double-opt-in/) pour exiger une confirmation par e-mail avant que les abonnés ne soient ajoutés
- [Personnaliser le widget du formulaire d'abonnement](/fr/product/audience-data-and-segmentation/subscription-forms/customize-widget/) pour qu'il corresponde à votre site web
- [Consulter les performances du formulaire et exporter les abonnés](/fr/product/audience-data-and-segmentation/subscription-forms/form-analytics-and-export/) pour suivre les résultats et télécharger les données des abonnés