Suscripción + Checkbox con Mailchimp

16.2.18

Coding

Seguro que ya habrás leído sobre LOPD, RGPD y de cómo es importante proteger los datos que se recolectan en un blog, sea de servicios y productos o personal.

Crea tu formulario personalizado para Mailchimp

Hoy te compartiré cómo integrar una caja de suscripción personalizable en tu blog, conectada con Mailchimp y que posee el obligatorio checkbox con enlace a las políticas de privacidad que si no la tienes aún, deberías empezar ya a redactarla pues es primordial.

¿Por qué con Mailchimp? He probado las más populares herramientas gratuitas y freemium para Email Marketing, aunque ya sabrás que no las aplico en este espacio. Estas son Mailchimp, Mailrelay, Mailerlite y el clásico Feedburner.

De las cuatro, tan sólo con Mailchimp podrás implementar el checkbox sencillamente y tener registrado en tu cuenta cuando tu nuevo suscriptor ha marcado 'sí' al checkbox obligatorio con el consentimiento a tus políticas.

Comenzaré en el supuesto de que ya posees la cuenta en Mailchimp y ya has creado una lista de suscriptores.



En Mailchimp

El formulario que he diseñado está pensado tan sólo para pedir el correo electrónico y tener el checkbox, datos más que suficientes para un newsletter o un resumen de tus artículos.

Asegúrate que en Mailchimp tengas los mismos campos creados:

Campos necesarios en formulario de Mailchimp

Luego, desde Embedded Forms, seleccionas Naked  y copias todo el código en tu editor de texto plano, ya que luego tomaremos algunos datos de él.

Obtener código para datos del formulario


En Blogger

Como siempre, hacer copia de seguridad del tema y desde la edición HTML busca ]]></b:skin> y dentro pegas los estilos (CSS). Hago notar que la fuente que tengas predeterminada será la misma que tendrá la caja.

CSS
/* CAJA DE SUSCRIPCION POR BLOGTASTICO.COM */
.mail-cyball {padding: 0; margin: 75px 0 0 0; width: 100%; height: auto; border: 0; display: inline-block;background-color: #badded; }
.mail-cyball .mailform {padding: 50px 0 75px 0; margin-left:15%;display: block; width: 70%; } 
.mail-cyball .mailform input.email {text-align: center; padding: 8px; color: #777; font-size: 17px; font-weight: normal; width: 100%; height: 55px!important; line-height: 1.5em; overflow: hidden!important; outline: none!important; display: block; border:0; box-sizing: border-box!important;background-color: #f7f7f7;letter-spacing:1px}
.mail-cyball .mailform input.button {color:#777;text-align:center; cursor:pointer; font-size:18px; border:none; background: #f7f7f7; margin-top: 25px; outline: none!important; padding: 4px!important; float: none;text-transform: uppercase;width: 100%; height: 55px!important;}
.mail-cyball .mailform input.button:hover {background: #222;text-decoration:none;color: #f7f7f7;}
.mail-cyball h2 {margin-top: 75px; margin-bottom: 20px; text-align: center; }
.mail-cyball p {margin-top: 20px;font-weight:normal;font-size:1.2em;line-height: 1.25;text-align: center; color:#444;}
.mail-cyball .privacidad {font-size:.79em; margin-top:35px}
.mail-cyball .privacidad span a {color: #222;}
.mail-cyball .privacidad input[type=checkbox] {width:20px;margin:0!important}

Ahora localiza el espacio donde pegarás la estructura (HTML), lo ideal es al final de cada post y esto puede variar de plantilla a plantilla. También, al ser responsive, puedes colocar la caja en el sidebar y se ajustará sin problemas.

HTML
<div class='mail-cyball'>
<h2>Suscríbete al blog</h2>
<p>Recibe los últimos artículos y novedades en tu buzón</p>
<div class='mailform'>
<form action='URL DE TU FORM EN MAILCHIMP' class='confirmail validate' id='mc-embedded-subscribe-form' method='post' name='mc-embedded-subscribe-form' target='_blank'>
<center>
<input class='required email check' id='mce-EMAIL' name='EMAIL' onblur='if(this.value==&apos;&apos;)this.value=&apos;TU CORREO...&apos;;' onfocus='if(this.value==&apos;TU CORREO...&apos;)this.value=&apos;&apos;;' type='email' value='TU CORREO...'/>
<div class='mc-field-group input-group privacidad'>
    <span>&#191;Aceptas que los datos recabados aquí sean tratados para /uso que tú le darás, sea solamente newsletter o comunicaciones comerciales, debes indicarlo con claridad/. Puedes leer además<a href='URL POLITICAS' target='_blank'>Política de Privacidad</a> del blog</span>
  <label for='ID DEL CHECKBOX'><input id='DATOS DE MAILCHIMP' name='DATOS DE MAILCHIMP' type='checkbox' value='1'/>sí</label>
</div>
 <div class='clear' id='mce-responses'>
<div class='response' id='mce-error-response' style='display: none;'>
<div class='response' id='mce-success-response' style='display: none;'>
</div>
</div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<input class='button' id='mc-embedded-subscribe' name='subscribe' type='submit' value='suscribir'/></center>
</form>
</div>
<!--End mc_embed_signup-->
</div>


Dentro del HTML hay unos datos coloreados que ajustarás con el código obtenido en Mailchimp:
  • URL DE TU FORM EN MAILCHIMP Corresponde al atributo action dentro de la etiqueta form. Es el enlace de tu formulario.
  • URL POLITICAS Corresponde al enlace a la página que debes tener con tus políticas de privacidad.
  • ID DEL CHECKBOX y DATOS DE MAILCHIMP corresponden al mismo valor, que es el atributo id dentro de la etiqueta input con type='checkbox'. Se repite porque en la primera ocasión se indica que el label corresponde a ese input en específico.
  • 'DATOS DE MAILCHIMP es el valor del atributo name dentro de la etiqueta input con type='checkbox'. Este junto a los dos anteriores son muy importantes de mantener para que se registre correctamente la aceptación de tus políticas (lo verás en el listado, cómo un campo más).

Como es importante demostrar que se han aceptado tus políticas, el checkbox debe llenarse obligatoriamente y aquí he creado un script en Jquery para que si tu futuro suscriptor se ha saltado este paso, no le sea posible la suscripción y le notifica el porqué. Sólo debes añadirlo antes de </body>.
<script>
//<![CDATA[
jQuery(".confirmail").on("submit",function(e){var a=jQuery(this).find('[name^="group"]');if(a.length){for(var r=0;r<a.length;r++)if(a[r].checked)return!0;return alert("Sólo puedes suscribirte si aceptas la política de privacidad, ya que es normativa internacional tu aceptación explícita"),e.preventDefault(),!1}return!0});
    // ]]>
</script> 

Si notas, he resaltado una parte del script en rojo, ya que tienes que asegurarte que ese texto coincida con parte del name de tu checkbox, sino tu formulario sería enviado aunque no hayan aceptado tu política de privacidad y uso de los datos que obtendrás.

Con esto termina la instalación de la caja de suscripción. Lo que seguro te encantará es que basta con modificar unas cuantas líneas del CSS y podrás personalizarla a tu antojo. Por ahora, el estilo 'predeterminado' es:

Resultado del tutorial

Si tienes alguna duda sobre el proceso, puedes colocarla en los comentarios y con gusto te contestaré.







yo, cyball

Escrito por Cyball Ruiz

Creadora de ANMATT Studio donde encuentras recursos y consejos para tu espacio en Blogger.






Otros artículos...



Se ha comentado...

  1. Hola! me esta sirviendo mucho esta cja de suscripcion :) pero me gustaria saber como se puede añadir la etiqueta de nombre, para que el suscriptor coloque su nombre.

    Gracias por el aporte

    ResponderEliminar
    Respuestas

    1. Me alegra que te funcione la cajilla.

      Respondiendo a tu duda, es totalmente posible agregar un campo para obtener el nombre de quien se suscriba, primero es crear el formulario indicado en Mailchimp, y luego en el formulario HTML que comparto agregar un input tipo text, enlazado al campo name del formulario Mailchimp. Saludos!

      Eliminar
  2. Hola, me puedes ayudar en esto?, por favor porque no se identifiar en que parte exactamente esta el final de la entrada en mi sitio (https://chicaotaku29.blogspot.com), gracias!

    ResponderEliminar
    Respuestas
    1. Hola Chica Otaku, si buscas colocar la cajilla JUSTO al terminar el post, y que sea algo automático, localiza en tu tema (viendo la edición HTML) el correspondiente a las entradas (si es que tu tema separa estilos entre páginas y entradas)

      Esta etiqueta data, es la que crea todo el cuerpo de tu entrada...

      Eliminar