Integración del formulario de registro de AJAX Mailchimp

¿Hay alguna forma de integrar mailchimp simple (una entrada de correo electrónico) con AJAX, de modo que no haya actualización de página ni redirección a la página predeterminada de mailchimp?

Esta solución no funciona jQuery Ajax POST no funciona con MailChimp

Gracias

Dec 08 '11 10:12 alexndm

Según la respuesta de gbinflames, mantuve la POST y la URL, para que el formulario siguiera funcionando para aquellos con JS desactivado.

<form class="myform" action="http://XXXXXXXXXlist-manage2.com/subscribe/post" method="POST">
  <input type="hidden" name="u" value="XXXXXXXXXXXXXXXX">
  <input type="hidden" name="id" value="XXXXXXXXX">
  <input class="input" type="text" value="" name="MERGE1" placeholder="First Name" required>
  <input type="submit" value="Send" name="submit" id="mc-embedded-subscribe">
</form>

Luego, usando .submit() de jQuery se cambió el tipo y la URL para manejar las respuestas JSON.

$('.myform').submit(function(e) {
  var $this = $(this);
  $.ajax({
      type: "GET", // GET & url for json slightly different
      url: "http://XXXXXXXX.list-manage2.com/subscribe/post-json?c=?",
      data: $this.serialize(),
      dataType    : 'json',
      contentType: "application/json; charset=utf-8",
      error       : function(err) { alert("Could not connect to the registration server."); },
      success     : function(data) {
          if (data.result != "success") {
              // Something went wrong, parse data.msg string and display message
          } else {
              // It worked, so hide form and display thank-you message.
          }
      }
  });
  return false;
});

Apr 23 '2013 15:04 skube

Para cualquiera que busque una solución en una pila moderna:

import jsonp from 'jsonp';
import queryString from 'query-string';

// formData being an object with your form data like:
// { EMAIL: '[email protected]' }

jsonp(`//YOURMAILCHIMP.us10.list-manage.com/subscribe/post-json?u=YOURMAILCHIMPU&${queryString.stringify(formData)}`, { param: 'c' }, (err, data) => {
  console.log(err);
  console.log(data);
});

May 30 '2018 18:05 adriendenat

Debe utilizar el código del lado del servidor para proteger su cuenta de MailChimp.

La siguiente es una versión actualizada de esta respuesta que usa PHP :

Los archivos PHP están "protegidos" en el servidor donde el usuario nunca los ve, pero jQuery aún puede acceder y utilizar.

1) Descargue el ejemplo de PHP 5 jQuery aquí...

http://apidocs.mailchimp.com/downloads/mcapi-simple-subscribe-jquery.zip

Si solo tiene PHP 4, simplemente descargue la versión 1.2 de MCAPI y reemplace el MCAPI.class.phparchivo correspondiente arriba.

http://apidocs.mailchimp.com/downloads/mailchimp-api-class-1-2.zip

2) Siga las instrucciones del archivo Léame agregando su clave API y su ID de lista al store-address.phparchivo en las ubicaciones adecuadas.

3) Es posible que también desee recopilar el nombre de sus usuarios y/u otra información. Debe agregar una matriz al store-address.phparchivo utilizando las variables de combinación correspondientes.

Así es como store-address.phpse ve mi archivo donde también recopilo el nombre, apellido y tipo de correo electrónico:

<?php

function storeAddress(){

    require_once('MCAPI.class.php');  // same directory as store-address.php

    // grab an API Key from http://admin.mailchimp.com/account/api/
    $api = new MCAPI('123456789-us2');

    $merge_vars = Array( 
        'EMAIL' => $_GET['email'],
        'FNAME' => $_GET['fname'], 
        'LNAME' => $_GET['lname']
    );

    // grab your List's Unique Id by going to http://admin.mailchimp.com/lists/
    // Click the "settings" link for the list - the Unique Id is at the bottom of that page. 
    $list_id = "123456a";

    if($api->listSubscribe($list_id, $_GET['email'], $merge_vars , $_GET['emailtype']) === true) {
        // It worked!   
        return 'Success!&nbsp; Check your inbox or spam folder for a message containing a confirmation link.';
    }else{
        // An error ocurred, return error message   
        return '<b>Error:</b>&nbsp; ' . $api->errorMessage;
    }

}

// If being called via ajax, autorun the function
if($_GET['ajax']){ echo storeAddress(); }
?>

4) Crea tu formulario HTML/CSS/jQuery. No es necesario estar en una página PHP.

Aquí hay algo parecido a cómo index.htmlse ve mi archivo:

<form id="signup" action="index.html" method="get">
    <input type="hidden" name="ajax" value="true" />
    First Name: <input type="text" name="fname" id="fname" />
    Last Name: <input type="text" name="lname" id="lname" />
    email Address (required): <input type="email" name="email" id="email" />
    HTML: <input type="radio" name="emailtype" value="html" checked="checked" />
    Text: <input type="radio" name="emailtype" value="text" />
    <input type="submit" id="SendButton" name="submit" value="Submit" />
</form>
<div id="message"></div>

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function() {
    $('#signup').submit(function() {
        $("#message").html("<span class='error'>Adding your email address...</span>");
        $.ajax({
            url: 'inc/store-address.php', // proper url to your "store-address.php" file
            data: $('#signup').serialize(),
            success: function(msg) {
                $('#message').html(msg);
            }
        });
        return false;
    });
});
</script>

Piezas requeridas...

• index.html construido como arriba o similar. Con jQuery, la apariencia y las opciones son infinitas.

• Archivo store-address.php descargado como parte de los ejemplos de PHP en el sitio de Mailchimp y modificado con su CLAVE API y ID de LISTA . Debe agregar sus otros campos opcionales a la matriz.

• Archivo MCAPI.class.php descargado del sitio de Mailchimp (versión 1.3 para PHP 5 o versión 1.2 para PHP 4). Colóquelo en el mismo directorio que su store-address.php o debe actualizar la ruta URL dentro de store-address.php para que pueda encontrarlo.

Feb 27 '2013 22:02 Sparky