# Un thème et Mailchimp : template d’inscription à la newsletter sans iframe

> L'iframe fournie par Mailchimp casse la charte graphique de tous les sites où elle est posée. Appel direct à l'API pour un formulaire natif, intégré au template du thème.

- Auteur : WordPress Développement
- Publié le : 2021-07-09
- Mis à jour le : 2021-07-09
- Catégorie : Thèmes
- URL : https://www.wpmoderne.fr/themes/theme-mailchimp-inscription-newsletter-sans-iframe/

## L’essentiel

- Appel direct à l'API Mailchimp, pas de formulaire embarqué
- Design du formulaire entièrement maîtrisé par le thème
- Double opt-in géré côté Mailchimp, pas réinventé côté site

Pourquoi l'iframe d'inscription fournie par Mailchimp ne convient-elle presque jamais à un thème sur mesure ? Parce qu'elle impose sa propre typographie, ses propres marges et son propre bouton, impossibles à harmoniser finement avec la charte graphique du site qui l'accueille. Sur un projet de refonte pour un média en ligne, ce problème s'est posé concrètement : le formulaire d'inscription à la newsletter, en pied de chaque article, devait respecter au pixel près le design du thème.

La solution retenue a consisté à appeler directement l'API Mailchimp depuis le serveur, sans passer par l'iframe ni par le script embarqué habituel, pour obtenir un formulaire HTML entièrement natif au template du thème.

## Comprendre l'endpoint concerné

Mailchimp expose une API REST documentée permettant d'ajouter un contact à une liste (ou « audience ») sans passer par son formulaire intégré. L'endpoint utile pour une inscription simple est `POST /lists/{list_id}/members`, appelé avec une clé API et l'identifiant de la liste concernée, tous deux stockés en variables d'environnement plutôt qu'en dur dans le thème.

## Le formulaire côté template

Le template du thème (une partie réutilisable, `template-parts/newsletter.php`) affiche un formulaire HTML classique, sans dépendance à un script Mailchimp externe :

```
<form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
    <input type="hidden" name="action" value="inscription_newsletter">
    <?php wp_nonce_field( 'inscription_newsletter', 'newsletter_nonce' ); ?>
    <label for="email_newsletter">Adresse e-mail</label>
    <input type="email" id="email_newsletter" name="email" required>
    <button type="submit">S'inscrire</button>
</form>
```

> L'essentiel à retenir : Appel direct à l'API Mailchimp, pas de formulaire embarqué ; Design du formulaire entièrement maîtrisé par le thème ; Double opt-in géré côté Mailchimp, pas réinventé côté site

## Traitement côté serveur

Le hook `admin_post` reçoit la soumission et appelle l'API Mailchimp via `wp_remote_post()`, sans bibliothèque tierce supplémentaire :

```
add_action( 'admin_post_inscription_newsletter', function() {
    check_admin_referer( 'inscription_newsletter', 'newsletter_nonce' );

    $email = sanitize_email( $_POST['email'] ?? '' );
    if ( ! is_email( $email ) ) {
        wp_redirect( add_query_arg( 'newsletter', 'erreur', wp_get_referer() ) );
        exit;
    }

    $liste_id = getenv( 'MAILCHIMP_LIST_ID' );
    $cle_api  = getenv( 'MAILCHIMP_API_KEY' );
    $centre   = substr( strrchr( $cle_api, '-' ), 1 );

    $reponse = wp_remote_post(
        "https://{$centre}.api.mailchimp.com/3.0/lists/{$liste_id}/members",
        array(
            'headers' => array(
                'Authorization' => 'apikey ' . $cle_api,
                'Content-Type'  => 'application/json',
            ),
            'body' => wp_json_encode( array(
                'email_address' => $email,
                'status'        => 'pending',
            ) ),
        )
    );

    $statut = ( ! is_wp_error( $reponse ) && 200 === wp_remote_retrieve_response_code( $reponse ) )
        ? 'merci'
        : 'erreur';

    wp_redirect( add_query_arg( 'newsletter', $statut, wp_get_referer() ) );
    exit;
} );
add_action( 'admin_post_nopriv_inscription_newsletter', function() {
    do_action( 'admin_post_inscription_newsletter' );
} );
```

Le statut `pending` plutôt que `subscribed` déclenche automatiquement l'e-mail de confirmation Mailchimp (double opt-in), sans qu'aucune logique de confirmation ne doive être réécrite côté site : Mailchimp gère cette étape nativement.

## Retourner un message d'état lisible

Le template lit le paramètre `newsletter` de l'URL de retour pour afficher un message adapté, sans rechargement JavaScript ni appel asynchrone supplémentaire :

```
<?php if ( isset( $_GET['newsletter'] ) ) : ?>
    <?php if ( 'merci' === $_GET['newsletter'] ) : ?>
        <p class="newsletter-message">Merci ! Vérifiez votre boîte mail pour confirmer votre inscription.</p>
    <?php else : ?>
        <p class="newsletter-message newsletter-erreur">Une erreur est survenue, merci de réessayer.</p>
    <?php endif; ?>
<?php endif; ?>
```

## Ce qui reste du côté de Mailchimp

Cette intégration se limite à l'ajout d'un contact à une liste. La création des campagnes d'e-mailing, les scénarios d'automatisation (séquence de bienvenue, relance d'inactifs) et le paramétrage des tags de segmentation restent entièrement gérés dans l'interface Mailchimp, hors du périmètre du thème.

## En résumé

Appeler directement l'API Mailchimp depuis un formulaire natif du thème donne un contrôle total sur le design, évite le script tiers embarqué et conserve les garanties du double opt-in gérées côté Mailchimp. Pour un formulaire aussi visible qu'un encart newsletter en pied d'article, ce contrôle visuel vaut largement la vingtaine de lignes de PHP nécessaires.