Personalizar formulario de suscripción de Mailchimp

Por lo general los bloggeros que manejamos blogger, al menos cuando recién empezamos, confiamos en el método de suscripción de Feedburner y ya; sin embargo para el que realmente sabe de marketing online y otras yerbas, no hay como Mailchimp.
Mailchimp es uno de los gestores de lista de correo más sensacionales que existe, pues aunque tenga una versión de pago, la gratuita es super archi poderosa para los mortales cristianos que nos iniciamos en esto. Asique para los que no conocen Mailchimp, prometo prontamente comentarles cómo abrir cuenta y armar listas y qué es una campaña y todo eso. Dicho lo cual, ahora voy a suponer que llegaste acá porque ya tenés una lista y te pasó un poco como a mí: buscaste infinidad de tutoriales sobre cómo personalizar esa cajita que ponemos como formulario de inscripción en el blog para que se apunten y nada, che, que no la encontraste.


 Para los que ya están usando este gestor sabrán que pueden engalanar todo lo que quieran el formulario de suscripción pero salvo que lo inserten a modo de iframe, ese en particular NO lo pueden embeber. El formulario embebido es más feo que trabajar un feriado asique hoy yo te voy a contar que gracias a mi cabezadurismo pude encontrar finalmente, in Englishhhh,una descripción de cómo hacer al menos algo como lo que tengo acá en el sidebar. Todo gracias a los genios de uhurunetwork.com Pero antes de que quieras seguir el tutorial y te des cuenta que NO se puede copiar porque tengo el click derecho deshabilitado y me maldigas peor que la señora Ganush- cosa que no me causaría ninguna gracia- descargá y abrí este documento word y ahí si vas a poder copiar y pegar todiño lo que quieras.

Empecemosle.

Personalizar formulario de suscripción de Mailchimp

Lo primero es tener en cuenta que en la parte de formularios de suscripciones, donde dice generales, hayas habilitado que ingresen nombre y mail, cosa que siempre conviene porque podés después personalizar las campañas en forma muy chula con los TAGS y lograr cosas mágicas como que  cada texto incluya el nombre del suscriptor, como cuando te llega un mail de suscripción y te dice algo como "oye, Pabela, estas son las novedades" bla bla y vos te caes de culo porque pusieron tu propio nombre y te crees que el pobre cristiano escribe mail por mail. En fin.

 Entonces, primero se elegiría General forms, ahí maquillalo todo re limmmdo porque puede que alguien se suscriba también con una versión online, luego vas de nuevo a "signup forms" y elegis la que dice Embedded forms como muestra el círculo rojo de la imagen de arriba.
Ahi te aparecen algunas opciones para "embeber" (todas feas y horribles, frías e impersonales) elegis cualquiera porque lo que te importa es buscar el ID de la lista que es la que aparece en rojo acá

O sea, lo que dice entre comillas después de form action. Bien y acá viene la cosa. Pimero vas a copiar este código siguiente y ponerlo en un widget o donde quieras que aparezca la cajita de suscripción:

<!-- Begin MailChimp Signup Form --> <div id="mailchimp"> <form action="TU-PROPIO-ID-DE-LA-LISTA" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"> <input type="email" size="30" value="Ingresa tu E-mail" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" /> <input type="text" size="30" value="Ingresa tu nombre" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" /> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <div class="clear"> <input type="submit" value="Me apunto!" name="subscribe" id="mc-embedded-subscribe" class="button" /> </div> </form> </div> <!--End mc_embed_signup-->

En rojo  tenés lo que podés cambiar, salvo la ID de la lista que es obligatoria poner la tuya obviamemmmte.

Luego tenemos que darle estilo para que se vea bonita la cosa e invite a que se suscriban y acá tengo que aclararles que les estoy pasando MI código, después si más o menos entienden algo de CSS pueden variar el look. Igual en color les pongo algunas cosillas que pueden cambiar.
¡Dónde moco pego esto??, si manejás las plantillas blogger andá a plantilla> personalizar> avanzado >agregar css y lesto. Si tenés una plantillas de otro lado pues te vas a plantilla> edición html> con control F buscás ]]></b:skin> y lo mandás ANTES y chin pum gualá...

#mailchimp { background: url("URL-IMAGEN") no-repeat;
padding: 175px 85px;
 }
#mailchimp input {
border: medium none;
 color: gray;
 font-family: Open Sans,sans-serif;
 font-size: 16px;
 font-style: normal;
margin-bottom: 10px;
padding: 8px 10px;
width: 200px;
 border-radius: 20px;
 -moz-border-radius: 20px;
 -webkit-border-radius: 20px;
 }
 #mailchimp input.email { background: #fff }
 #mailchimp input.name { background: #fff}
 #mailchimp input[type="submit"] {
background: #A9D0F5;
 color: #000; cursor: pointer;
 font-size: 15px;
 width: 75%; padding: 8px 0; }
 #mailchimp input[type="submit"]:hover { color: #F2C94C }

En rojo tenés básicamente como para cambiar la imagen de fondo de la cajita, si no querés una imagen cambia por un código de color; te quedaría algo como
background: #f8f8f8

Lo que está en verde son todos los colores de la cosa, esos podés ir eligiendo otros, te recomiendo para ello una fantástica página que tiene todiños los colores.

Algunas aclaraciones, en mi caso tuve que jugar un poco para que encajaran los campos de datos en medio de la imagen, eso lo hice toqueteando donde dice width: 75%.
Si se comen una coma, punto o comilla sonaron porque no les va a andar asique fijarse bien. De última recuerden que pueden visitar el post de donde saqué esto como para ver mejor la cosa, aunque aviso que está en inglés:
http://uhurunetwork.com/digital-dna/customizing-mailchimp-form-design/

Cualquier cosa dejen comentario que si algo no sé responder soy lo bastante testaruda para poder buscar la respuesta. Y de última me pongo a llorar y te digo "ni idea, amig@".

Última advertencia, mejor compartí la entrada porque sino