> ## Documentation Index
> Fetch the complete documentation index at: https://apidoc.crowdchange.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget de formulaire de don

> Intégrez le widget de formulaire de don CrowdChange à votre site pour accepter des dons en ligne ou en modal, avec couleurs et langue personnalisables.

Le widget `donation-form` intègre à votre site Web un formulaire de don CrowdChange entièrement fonctionnel. Il peut s'afficher **en ligne** (inline) dans la page ou s'ouvrir en tant que **fenêtre contextuelle** (popup) déclenchée par votre propre bouton ou lien, et il prend en charge une disposition compacte **basic** ainsi que la disposition **full**.

Nouveau avec les widgets? Commencez par [l'aperçu des widgets](/widgets/overview) pour ajouter le script d'intégration.

![CrowdChange donation form widget](https://files.readme.io/e965032972a5bea2c29a877978e7f2e90b4b96d28a50557a403379dd361064ab-image.png)

## Exemples d'utilisation

### Formulaire de don en ligne

Affiche le formulaire de don directement dans le flux de la page.

```html theme={null}
<crowdchange widget="donation-form"
             fundraiser="1000"
             mode="inline"
             language="en"
             color-primary="#cc0000"
             color-background="#e3ae7a"
></crowdchange>
```

Remplacez `fundraiser` par l'ID de votre collecte de fonds obtenu à l'étape 1 de l'aperçu.

<Tip>
  Pour les intégrations en ligne, vous pouvez fournir votre propre espace réservé en imbriquant, à l'intérieur de l'élément `<crowdchange>`, un élément marqué de `data-crowdchange-loading="true"`. Il s'affiche jusqu'à ce que le formulaire termine son chargement.
</Tip>

***

### Formulaire de don en fenêtre contextuelle (disposition complète)

Une fenêtre contextuelle nécessite un déclencheur — un bouton ou un lien — pour s'ouvrir. Définissez `target` avec un sélecteur CSS correspondant au déclencheur.

```html theme={null}
<crowdchange widget="donation-form"
             fundraiser="10000"
             mode="popup"
             target=".my-donate-button"
></crowdchange>

<button type="button" class="my-donate-button">Faire un don maintenant</button>
```

***

### Formulaire de don en fenêtre contextuelle (disposition de base)

La disposition de base affiche un formulaire plus compact.

```html theme={null}
<crowdchange widget="donation-form"
             fundraiser="16"
             layout="basic"
             mode="popup"
             target="#btn-donate-2"
             color-primary="#23990d"
></crowdchange>

<button type="button" id="btn-donate-2">Faire un don maintenant</button>
```

***

## Paramètres pris en charge

| Paramètre JS      | Attribut d'élément | Description                                                       | Valeur par défaut              |
| :---------------- | :----------------- | :---------------------------------------------------------------- | :----------------------------- |
| `widget`          | `widget`           | Type de widget : `donation-form`.                                 | Obligatoire                    |
| `fundraiser`      | `fundraiser`       | L'ID de la collecte de fonds.                                     | Obligatoire                    |
| `mode`            | `mode`             | `inline` ou `popup`.                                              | `popup`                        |
| `layout`          | `layout`           | `full` ou `basic`.                                                | `full`                         |
| `language`        | `language`         | Le code de langue, p. ex. `en`, `fr`.                             | `en`                           |
| `target`          | `target`           | Sélecteur CSS de l'élément qui déclenche la fenêtre contextuelle. |                                |
| `colorPrimary`    | `color-primary`    | Couleur primaire personnalisée.                                   | Thème de la collecte de fonds. |
| `colorBackground` | `color-background` | Couleur d'arrière-plan personnalisée.                             |                                |
| `refSource`       | `ref-source`       | Source de référence, utilisée uniquement à des fins de rapport.   | `embed`                        |