¿Cómo dar estilo a tus formularios de Mailchimp con CSS?

Este año estoy implementando algunos cambios en mi estrategia web, uno de ellos es el uso del Email Marketing y para eso decidí utilizar el tan conocido servicio de Mailchimp.

La verdad es que tenía a Mailchimp algo abandonado, la ultima vez que lo utilice fue hace ya casi tres años que me pidieron hacer una campaña para una revista en la que trabajaba. Y pues no le daba mucha importancia a sus bondades de alcance de usuarios, porque pues las redes sociales parecen ser más influyentes.

Sin embargo, me di cuenta que yo misma estaba suscrita a varios boletines que me parecen muy útiles y que van desde noticias hasta ofertas de tiendas online y freebies semanales y mensuales, como por ejemlo el de Creative Market, Envato Market, Shopify, Loly in The Sky, Bershka, Zara, etcétera.

Y como les decía en el primer parrafo, este año Mailchimp forma parte de mi estrategia web, tanto de los post que se escriben en este blog como de mis servicios para fotografía de bodas. Por ejemplo, una de las cosas que más suelen pedirme a través de Facebook, Whatsapp, Instagram e incluso vía email  es información sobre mis paquetes fotográficos para bodas y a veces es muy complicado contestar a tiempo; me paso cuando estuve de viaje en Japón y por los horarios en que me contactaban resultaba complicado estar atendiendo las solicitudes.

Además a todo cliente le encanta ser atendido con eficacia e inmediatez, así que pude darle solución a esto gracias a Mailchimp, construí un formulario de registro que envía como respuesta automática la información que me solicitan mis futuros clientes. Para hacerlo tuve que escribir algo de codigo CSS para personalizar los campos y etiquetas de Mailchimp y así lograr que mi formulario de registro no se viera tan genérico.

Así quedo mi Formulario de Registro

Hoy te comparto este código, es gratis y muy fácil de obtener,  solo tienes que desbloquear el contenido con un Like.

 

 

¿Cómo hacerlo?

  1. Regístrate en Mailchimp, ve a tu escritorio (DashBoard) y crea una lista. Si no sabes cómo hacerlo te recomiendo leer por aquí.
  2. Ya que tienes tu lista hecha, ahora tendrás que crear un Formulario de Registro (Signup Form). Si no sabes cómo hacerlo te recomiendo leer por aquí.
  3. Ahora sí, es momento de darle estilo a ese formulario para que se vea apetecible a los ojos.
  4. Te encontrarás con el editor que seguramente te mostrará un formulario muy básico al que le darás forma, tenemos las siguientes secciones:

En Build it vas a poder arrastrar todos los bloques de opciones que aparecen del lado derecho. En Design it podrás darle formato a varias partes de tu Formulario y en Translate it, vas a poder cambiar a tu idioma algunas de las etiquetas más comunes que se usan en el formulario.

5. Ahora, arrastra un bloque de texto o usa el que viene por defecto en la plantilla del fomulario, edítalo y en <> pega el siguiente código de texto:


<style type="text/css">

a{
font-weight:200 !important;
text-decoration: none !important;}

p{
text-align: justify;
letter-spacing: 2px;
margin-top: 1em;
margin-bottom: 3em;
margin-left: 2em;
margin-right: 2em;
line-height: 1.8;
word-spacing: 3px;

}

h2 {
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 2em;
margin-right: 2em;
line-height: 1.8;
word-spacing: 3px;
}
</style>

Ahí mismo y después del cierre de etiqueta de </style> tienes que hacer uso de los selectores (etiquetas css) que declaramos para poder darle formato al texto.

Por ejemplo, en mi texto la palabra Hola se encuentra escrita como <h2> Hola </h2> y el demás texto entre las etiquetas <p></p>

<p> Gracias por tu interés en mis servicios fotográficos…</p>

Espero que este breve tutorial, te sea útil para personalizar tu formulario de Mailchimp.

 

Foto de Portada:  Norbert Levajsics || Unsplash

 

 

 

 

 

Author: Rebecca Aldama

Blogger & Fotógrafa de Bodas, escribo un blog sobre Comunicación Visual, Marketing, Redes Sociales y Milenials. Colaboro con fotos en: @gettyimages @istock

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *