# Personnaliser le widget de formulaire d'abonnement

Par défaut, le widget de formulaire d'abonnement utilise un style neutre qui fonctionne sur la plupart des pages. Après avoir ajouté le [code d'intégration](/fr/product/audience-data-and-segmentation/subscription-forms/create-subscription-forms/#copy-the-embed-code-and-add-it-to-your-site), vous pouvez l'adapter à l'identité visuelle de votre site en définissant des propriétés personnalisées CSS sur l'élément `pushwoosh-subscribe-widget`. Les valeurs dans les tableaux ci-dessous remplacent les valeurs par défaut.

<Aside type="caution" icon="setting" title="Assistance d'un développeur requise">
Vous pourriez avoir besoin de l'aide de votre équipe de développement pour appliquer ces modifications de style de widget sur votre site web.
</Aside>

## Personnaliser les couleurs

| Variable | Description | Par défaut |
| --- | --- | --- |
| `--esw-primary-color` | Couleur principale pour les boutons, les liens et les accents | `#0E72E5` |
| `--esw-primary-hover` | Couleur de survol des éléments principaux | `#1A85FF` |
| `--esw-text-color` | Couleur du texte principal | `#4B5057` |
| `--esw-text-secondary` | Texte secondaire (placeholders, légendes) | `#969CA3` |
| `--esw-background` | Arrière-plan du widget | `#FFFFFF` |
| `--esw-surface-color` | Couleur de surface (survols, arrière-plan secondaire) | `#F7F9FA` |
| `--esw-border-color` | Couleur de la bordure | `#DCE1E5` |
| `--esw-border-color-focus` | Couleur de la bordure à l'état focus | `#0E72E5` |
| `--esw-error-color` | Couleur d'erreur | `#E52E59` |
| `--esw-success-color` | Couleur de succès | `#479900` |
| `--esw-success-bg` | Arrière-plan du message de succès | `#F7F9FA` |

## Typographie

| Variable | Description | Par défaut |
| --- | --- | --- |
| `--esw-font-family` | Famille de polices | `Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` |
| `--esw-font-size-base` | Taille de police de base | `14px` |
| `--esw-font-size-title` | Taille de police du titre | `18px` |
| `--esw-font-size-label` | Taille de police de l'étiquette de champ | `12px` |
| `--esw-font-size-small` | Petit texte (erreurs, notes) | `12px` |
| `--esw-font-weight-regular` | Graisse normale | `400` |
| `--esw-font-weight-medium` | Graisse moyenne | `500` |
| `--esw-font-weight-bold` | Graisse grasse | `700` |
| `--esw-line-height-base` | Hauteur de ligne de base | `1.4` |
| `--esw-line-height-title` | Hauteur de ligne du titre | `1.2` |

## Tailles et espacements

| Variable | Description | Par défaut |
| --- | --- | --- |
| `--esw-input-height` | Hauteur du champ de saisie | `36px` |
| `--esw-button-height` | Hauteur du bouton | `36px` |
| `--esw-spacing-xs` | Espacement très petit | `4px` |
| `--esw-spacing-sm` | Petit espacement | `8px` |
| `--esw-spacing-md` | Espacement moyen | `16px` |
| `--esw-spacing-lg` | Grand espacement | `24px` |
| `--esw-popup-width` | Largeur de la modale | `380px` |
| `--esw-popup-max-width` | Largeur maximale de la modale | `90vw` |

## Apparence

| Variable | Description | Par défaut |
| --- | --- | --- |
| `--esw-border-radius` | Rayon des coins pour les éléments | `4px` |
| `--esw-border-radius-popup` | Rayon des coins de la modale | `8px` |
| `--esw-shadow-popup` | Ombre de la boîte modale | `0 0 6px rgba(0, 0, 0, 0.06), 0 10px 16px rgba(0, 0, 0, 0.1)` |

## Exemples

<Tabs>
<TabItem label="CSS">

```css
pushwoosh-subscribe-widget {
  --esw-primary-color: #ff6b6b;
  --esw-border-radius: 12px;
  --esw-font-family: "Inter", sans-serif;
}
```

</TabItem>
<TabItem label="Attribut de style">

```html
<pushwoosh-subscribe-widget
  formCode="YOUR_FORM_CODE"
  style="--esw-primary-color: #ff6b6b; --esw-border-radius: 12px;"
></pushwoosh-subscribe-widget>
```

</TabItem>
</Tabs>