WordPress e Mailchimp API con modulo in AJAX e PHP
da Massimo Della Rovere · pubblicato il 20 Luglio, 2014 · modificato il 5 Giugno, 2017

Mailchimp è uno dei più importanti servizi di mailing list, deve il suo successo ad un’interfaccia semplice, pulita e veloce con decine di funzioni disponibili. Tra tutte queste troviamo anche un plugin per WordPress che ci permette di inserire in maniera semplice un form HTML per la richiesta d’iscrizione ad una newsletter. Anche se i form messi a disposizione sono molto completi, la maggior parte delle volte si viene rediretti al sito di Mailchimp tramite un URL personalizzato del nostro account.

Purtroppo questa tecnica non è molto piaciuta ad alcuni miei clienti, i quali mi hanno chiesto se si poteva trovare una soluzione diversa, proprio per questo ho fatto alcune prove e sono riuscito a far funzionare un form HTML che tramite una chiamata AJAX a WordPress esegue una registrazione utilizzando PHP e le API di Mailchimp. Il risultato lo potete trovare direttamente in fondo a questo articolo prima dei commenti.

Inserire un form HTML

La prima cosa che dobbiamo fare è scrivere un piccolo codice HTML per la definizione di un form che sarà sottomesso tramite javascript e con cui sarà effettuata una chiamata di tipo AJAX secondo lo standard di WordPress. Per semplicità non indicherò i controlli che è possibile inserire per la validità dei campi del form, ma mi concentrerò solo sul flusso logico del programma, il resto lo aggiungete voi in base alle vostre esigenze.

<form action="" method="post" id="MyForm" name="MyForm">
  <input type="text" name="FNAME" placeholder="Nome">
  <input type="text" name="LNAME" placeholder="Cognome">
  <input type="text" name="EMAIL" placeholder="Indirizzo email">
  <button type="submit"><span>Sottoscrivi</span></button>
</form>

Come potete notare non esiste nessuna destinazione per il form action, in quanto sarà sottomesso tramite un’evento javascript che eseguirà anche la chiamata AJAX.

// Controllo sottomissione del form che riguarda
// la sottoscrizione alla newsletter di mailchimp

jQuery(document).ready(function() {
  jQuery("#MyForm").submit(function(e) {
    myFunctionSubscribe(this);
  });
});

// Funzione per eseguire i controlli dei campi
// del form dopo la richiesta di sottomissione

function myFunctionSubscribe(form) {
  email = jQuery(form).find('input[name="EMAIL"]').val();
  if (myValidateEmail(email)) myFunctionAjax(form);
}

// Funzione per eseguire la chiamata ajax su
// wordpress e aggiornare la newsletter mailchimp

function myFunctionAjax(form) {
  serialize = jQuery(form).serialize();
  jQuery.ajax({
    type:"POST",
    url :"http://mydomain.com/wp-admin/admin-ajax.php",
    data:{action:'mySubscribe',fields:serialize},
    success:function(data) {},
    error: function(error) {}
  });
}

// Funzione per controllare il campo email prima di 
// eseguire la richiesta di sottomissione del form

function myValidateEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

In questo codice abbiamo impostato la chiamata AJAX con la definizione di un’azione chiamata (mySubscribe) la quale deve essere definita in WordPress per richiamare una funzione presente nel nostro tema o nel nostro plugin, vi aggiungo il codice PHP nel prossimo paragrafo. Ovviamente per dare un’aspetto decente al form dovete aggiungere anche del codice CSS sia per i campi che per il tasto di sottomissione.

Configurazione AJAX

In WordPress per collegare un’azione ad una funzione bisogna utilizzare il comando del core chiamato add_action($stringa). La stringa da passare deve essere composta da due suffissi wp_ajax_wp_ajax_nopriv_ su cui aggiungere il nome dell’azione che abbiamo definito nella chiamata jQuery, nel nostro caso è (mySubscribe). In ogni caso è meglio che vi riporto il codice PHP completo che è sempre la soluzione migliore :)

// Definizione della chiamata ajax per esecuzione
// chiamata a mailchimp e registrazione email

function my_php_subscribe() { 
  // QUI INSERIREMO IL CODICE PHP CON MAILCHIMP API
};

// Aggiungo esecuzione della chiamata AJAX sia in ambito
// pubblico che come utente correttamente collegato

add_action('wp_ajax_mySubscribe','my_php_subscribe');
add_action('wp_ajax_nopriv_mySubscribe','my_php_subscribe');

Se volete approfondire questo argomento ho scritto un’articolo a riguardo, lo trovate su questo blog con il titolo di WordPress come gestire le chiamate AJAX.

Framework PHP

Prima di aggiungere codice alla nostra funzione dobbiamo scaricare il software ufficiale per gestire le API di Mailchimp tramite il linguaggio PHP. Esistono diversi metodi per installare questo framework, io vi consiglio di scaricare l’ultima versione in formato zip da questo link (download Mailchimp API) e poi spacchettarlo in una directory presente sul vostro server. La directory deve essere configurata per il require() di PHP.

Chiave API e ID Lista

Per utilizzare le API che ci vengono messe a disposizione da Mailchimp bisogna entrare nel pannello di amministrazione di Mailchimp e richiedere un API KEY, inoltre bisogna creare una lista di contatti in cui verranno inserite le nuove iscrizioni. Per ottenere una chiave bisogna andare nella sezione (My Profile) e selezionare dal menu principale la voce chiamata Extras -> API keys dove trovate l’opzione di creazione chiave.

API Mailchimp

Una volta creata la chiave segnatela da qualche parte che dopo la dobbiamo inserire nel nostro programma PHP. L’altro parametro che ci serve è il codice univoco della lista da utilizzare, quindi dobbiamo creare una nuova lista o selezionarne una esistente, andare nel menu (Setting -> List Name) e leggere il codice univoco della lista.

API Mailchimp

Adesso che abbiamo sia la chiave che il numero della lista possiamo finalmente scrivere la nostra funzione e provare il nuovo form per la sottoscrizione della newsletter.

Implementazione PHP

Dopo aver eseguito l’upload dei file che abbiamo scaricato possiamo implementare la funzione che era rimasta incompleta. Vi riporto qui di seguito il codice completo PHP che dovrete implementare nel vostro tema o plugin. Nel codice di esempio non ho implementato un (wp_nonce_field) che permette di controllare con più sicurezza una richiesta HTTP, però vi consiglio di farlo se volete implementare il programma.

// Definizione del processo ajax per esecuzione
// chiamata a mailchimp e registrazione email

function my_php_subscribe() 
{  
  // Inserite i vostri parametri
  $lista  = 'XXXXXXXXX';
  $APIkey = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';

  // Recupero i dati del form serializzati
  $fields = array(); parse_str($_POST['fields'],$fields);

  // Definizione dei campi per Mailchimp
  $fname = trim($fields['FNAME']);
  $lname = trim($fields['LNAME']);
  $email = trim($fields['EMAIL']);

  // Controllo formale della stringa EMAIL
  if (filter_var($email,FILTER_VALIDATE_EMAIL))
  {
    // Includo la classe di MAILCHIMP
    require_once('MYURL/mailchimp/src/Mailchimp.php'); 

    // Creazione oggetto per MAILCHIMP API
    $Mailchimp = new Mailchimp($APIkey); 
    $Mailchimp_Lists = new Mailchimp_Lists($Mailchimp); 

    // Definizione dei parametri aggiuntivi
    $merge_vars = array(
      'FNAME' => $fname, 
      'LNAME' => $lname, 
      'EMAIL' => $email,
    );  

    // Richiesta a mailchimp di inserimento contatto
    $Mailchimp_Lists->subscribe($lista,
      array('email'=>$email),$merge_vars); 
 
    // Controllo errore o inserimento riuscito
    if ($MailChimp->errorCode) return true;
      else echo "MAILCHIMP OK";
  }

  // La chiamata AJAX deve essere chiusa con die()
  die();
};

// Aggiungo esecuzione della chiamata AJAX sia in ambito
// pubblico che come utente correttamente collegato

add_action('wp_ajax_mySubscribe','my_php_subscribe');
add_action('wp_ajax_nopriv_mySubscribe','my_php_subscribe');

I passi presentati in questo tutorial sono gli stessi che ho utilizzato anche per il form di iscrizione newsletter in questo blog. Ovviamente ho aggiunto più controlli formali e ho gestito il codice di risposta per avvisare l’utente di iscrizione avvenuta o di errore. Per qualsiasi dubbio o problema scrivete pure nella sezione dei commenti. A presto.

4 Commenti

  1. Grazie mille per la risposta. Se eseguo il codice postato e inserisco una email che non ho mai registrato in mailchimp tutto va a buon fine. Se invece provo a inserire una email già presente su un server ricevo l’errore 500 mentre su un altro ecco ottengo questo: Fatal error: Uncaught exception ‘Mailchimp_List_AlreadySubscribed’. (Il messaggio è molto più lungo e indica anche diversi errori nella classe mailchimp).

    Al momento ho risolto utilizzando un’altra classe proposta come download da mailchimp però volevo capire quale fosse il reale problema.

  2. Ciao Marco, ultimamente hanno cambiato diverse cose, specialmente con la versione 2.0 quindi la cosa migliore è scaricare l’ultima versione PHP messa a disposizione ed eseguire le istruzioni presenti nella documentazione ufficiale di Mailchimp.

  3. Innanzitutto ti devo ringraziare per questo articolo: grazie a te sono riuscito ad implementare l’iscrizione a mailchimp in modo semplice e senza plugin!

    Volevo capire come verificare se un utente è già iscritto a quella lista ma non ho trovato una risposta cercando su google. Potresti aiutarmi?

  4. Ciao Marco, se vedi il programma che ho postato ad un certo punto controllo lo stato dell’errore, in realtà se fai il dump di quella variabile provando diversi casi, dovresti vedere anche il valore assegnato al codice di errore e descrizione quando la email già esiste.

    https://apidocs.mailchimp.com/api/2.0/lists/subscribe.php

condividi