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>
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.
