MailChimp proporciona una buena herramienta para generar su formulario de suscripción el cual le servirá en la mayoría de los casos. Sin embargo, algunos clientes, quieren una forma totalmente personalizada o integrarlo con la plantilla ya existente. Hoy voy a compartir un tutorial rápido en la forma de integrar formulario HTML con el API de MailChimp usando PHP y jQuery.
La página de formulario (index.php)
jQuery se encargará de hacer una llamada AJAX utilizando el método $ .ajax y el plugin jQuery para enviar los datos de nuestro formulario al archivo subscribe.php. Para el diseño de esta página se ha utilizado el Framework Bootstrap 3, combinandolo con un pequeño fragmento de código de el sitio web Bootsnipp.com
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Formulario de suscripción a Mailchimp con PHP y Bootstrap</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <link href="css/custom.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row" style="margin-top:60px"> <div class="col-md-6 col-md-offset-3"> <div class="panel panel-info"> <div class="panel-heading"> <h4> <span class="glyphicon glyphicon-envelope"></span> SUSCRÍBETE A NUESTRO BOLETÍN</h4></div> <div class="panel-body"> <form class="form" role="form" method="post" name="suscribime" id="suscribime"> <div id="resultados_ajax"></div> <hr class="colorgraph"> <div class="form-group"> <input type="email" name="email" id="email" class="form-control input-lg" placeholder="Tu correo electrónico" required> </div> <div class="form-group"> <input type="text" name="fname" id="fname" class="form-control input-lg" placeholder="Nombres" required> </div> <div class="form-group"> <input type="text" name="lname" id="lname" class="form-control input-lg" placeholder="Apellidos" required> </div> <hr class="colorgraph"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <button type="submit" class="btn btn-lg btn-success btn-block">Suscribir</button> </div> </div> </form> </div> </div> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <script> $( "#suscribime" ).submit(function( event ) { var parametros = $(this).serialize(); $.ajax({ type: "POST", url: "subscribe.php", data: parametros, beforeSend: function(objeto){ $("#resultados_ajax").html("Enviando..."); }, success: function(datos){ $("#resultados_ajax").html(datos); } }); event.preventDefault(); }); </script> </body> </html> |
Archivo css (css/custom.css)
Este archivo se encarga de embellecer nuestro formulario
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
body { background: url(http://images1.fanpop.com/images/image_uploads/Golden-Gate-Bridge-san-francisco-1020074_1024_768.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .panel-info { opacity: 0.9; margin-top:30px; } .form-group.last { margin-bottom:0px; } .navbar-nav li button { margin-top: 8px; } .navbar-brand { padding-top: 5px; } .navbar-brand img { height: 40px } .navbar-header { padding-left: 50px; } /* Credit to bootsnipp.com for the css for the color graph */ .colorgraph { height: 5px; border-top: 0; background: #c4e17f; border-radius: 5px; background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); } |
Procesador del formulario (subscribe.php)
Este archivo se conecta a la API de Mailchimp con la ayuda de la clase: MCAPI.class.php para poder almacenar los datos recogidos en nuestro formulario del index.php. Por favor asegúrate de haber generado la clave de la API desde tu cuenta de Mailchimp y luego copiar el ID de la lista
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<?php if (empty($_POST['email'])){ $errors[] = "Correo electrónico vacío"; } elseif (empty($_POST['fname'])) { $errors[] = "Nombre vacío"; } elseif (empty($_POST['lname'])) { $errors[] = "Apellido vacío"; } elseif (!empty($_POST['email']) && !empty($_POST['fname']) && !empty($_POST['lname'])) { require_once 'inc/MCAPI.class.php'; $api = new MCAPI('TU_API_KEY'); $merge_vars = array('FNAME'=>$_POST["fname"], 'LNAME'=>$_POST["lname"]); // Enviar los datos del suscriptor aMailChimp // Referencia a la documentacion de parametros: http://apidocs.mailchimp.com/api/1.3/listsubscribe.func.php $retval = $api->listSubscribe( 'TU_LIST_ID', $_POST["email"], $merge_vars, 'html', false, true ); if ($api->errorCode){ $errors[]= "<h4>Por favor, inténtelo de nuevo.</h4>"; } else { $messages[]= "<h4>Gracias, se le ha añadido a nuestra lista de correo.</h4>"; } } else { $errors[] = "Error desconocido"; } if (isset($errors)){ ?> <div class="alert alert-danger" role="alert"> <button type="button" class="close" data-dismiss="alert">×</button> <h4>Error!</h4> <?php foreach ($errors as $error) { echo $error; } ?> </div> <?php } if (isset($messages)){ ?> <div class="alert alert-success" role="alert"> <button type="button" class="close" data-dismiss="alert">×</button> <h4>¡Bien hecho!</h4> <?php foreach ($messages as $message) { echo $message; } ?> </div> <?php } ?> |
¡Eso es todo! Ahora puedes comprobar en tu servidor web con algunas pruebas y ver si son capturados en tu lista de MailChimp.
Herramientas / Créditos
Para descargar los archivos, debes realizar cualquiera de las siguientes acciones sociales:
[sociallocker]
[/sociallocker]
