Integración del formulario de registro de AJAX Mailchimp

¿Hay alguna forma de integrar mailchimp simple (una entrada de correo electrónico) con AJAX, por lo que no hay 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

Usted no necesita una clave de API, todo lo que tiene que hacer es plop la forma estándar MailChimp generado en su código (personalizar el aspecto, según sea necesario) y en la forma de "acción" cambio de atributo post?u=a post-json?u=y luego, al final de la acción de formas anexar &c=?para solucionar cualquier problema entre dominios. También es importante tener en cuenta que cuando envíe el formulario debe utilizar GET en lugar de POST.

Su etiqueta de formulario se verá así de forma predeterminada:

<form action="http://xxxxx.us#.list-manage1.com/subscribe/post?u=xxxxx&id=xxxx" method="post" ... >

cámbialo para que se parezca a esto

<form action="http://xxxxx.us#.list-manage1.com/subscribe/post-json?u=xxxxx&id=xxxx&c=?" method="get" ... >

Mail Chimp devolverá un objeto json que contiene 2 valores: 'resultado' - esto indicará si la solicitud fue exitosa o no (solo he visto 2 valores, "error" y "éxito") y 'msg' - un mensaje describiendo el resultado.

Envío mis formularios con este poco de jQuery:

$(document).ready( function () {
    // I only have one form on the page but you can be more specific if need be.
    var $form = $('form');

    if ( $form.length > 0 ) {
        $('form input[type="submit"]').bind('click', function ( event ) {
            if ( event ) event.preventDefault();
            // validate_input() is a validation function I wrote, you'll have to substitute this with your own.
            if ( validate_input($form) ) { register($form); }
        });
    }
});

function register($form) {
    $.ajax({
        type: $form.attr('method'),
        url: $form.attr('action'),
        data: $form.serialize(),
        cache       : false,
        dataType    : 'json',
        contentType: "application/json; charset=utf-8",
        error       : function(err) { alert("Could not connect to the registration server. Please try again later."); },
        success     : function(data) {
            if (data.result != "success") {
                // Something went wrong, do something to notify the user. maybe alert(data.msg);
            } else {
                // It worked, carry on...
            }
        }
    });
}

Según la respuesta de gbinflames, mantuve el POST y la URL, de modo que el formulario continuaría 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, el uso de .submit () de jQuery 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;
});

Usted debe utilizar el código del lado del servidor con el fin de asegurar su cuenta de MailChimp.

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

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

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 en el archivo Léame agregando su clave API e 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 store-address.phpcomo se 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) Cree su formulario HTML / CSS / jQuery. No es necesario estar en una página PHP.

Aquí hay algo como index.htmlel aspecto de 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.

• store-address.php descargado como parte de los ejemplos de PHP en el sitio de Mailchimp y modificado con su CLAVE de API e ID de LISTA . Necesita 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 de la URL dentro de store-address.php para que pueda encontrarlo.

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);
});

Según la respuesta de gbinflames, esto es lo que funcionó para mí:

Genere un formulario de registro de lista de mailchimp simple, copie la URL de acción y el método (publicación) en su formulario personalizado. También cambie el nombre de los nombres de los campos de su formulario a todo en mayúsculas (nombre = 'EMAIL' como en el código original de mailchimp, EMAIL, FNAME, LNAME, ...), luego use esto:

      $form=$('#your-subscribe-form'); // use any lookup method at your convenience

      $.ajax({
      type: $form.attr('method'),
      url: $form.attr('action').replace('/post?', '/post-json?').concat('&c=?'),
      data: $form.serialize(),
      timeout: 5000, // Set timeout value, 5 seconds
      cache       : false,
      dataType    : 'jsonp',
      contentType: "application/json; charset=utf-8",
      error       : function(err) { // put user friendly connection error message  },
      success     : function(data) {
          if (data.result != "success") {
              // mailchimp returned error, check data.msg
          } else {
              // It worked, carry on...
          }
      }

En cuanto a esta fecha (febrero de 2017), parece que mailchimp ha integrado algo similar a lo que sugiere gbinflames en su propio formulario generado por javascript.

No necesita ninguna otra intervención ahora, ya que mailchimp convertirá el formulario en uno enviado ajax cuando javascript esté habilitado.

Todo lo que necesita hacer ahora es simplemente pegar el formulario generado desde el menú de inserción en su página html y NO modificar ni agregar ningún otro código.

Esto simplemente funciona. ¡Gracias MailChimp!

Utilice el complemento jquery.ajaxchimp para lograrlo. ¡Es muy fácil!

<form method="post" action="YOUR_SUBSCRIBE_URL_HERE">
  <input type="text" name="EMAIL" placeholder="e-mail address" />
  <input type="submit" name="subscribe" value="subscribe!" />        
  <p class="result"></p>
</form>

JavaScript:

$(function() {
  $('form').ajaxChimp({
    callback: function(response) {
      $('form .result').text(response.msg);
    }
  });
})

Por otro lado, hay algunos paquetes en AngularJS que son útiles (en AJAX WEB):

https://github.com/cgarnier/angular-mailchimp-subscribe