Cómo Personalizar los Formulario de Suscripción de Mailrelay con Html y CSS

Construir un formulario de suscripción para tu blog o web es necesario desde el principio. Hay que tener un canal de comunicación con los lectores y el formulario de suscripción cumple esos objetivos.

Si obtenéis un número significativo de correos podréis empezar una estrategia de email marketing y mantener a los suscriptores al día de vuestras publicaciones y de cualquier acción que hagáis.

En este post vamos a ver,

• Primero, como crear un formulario con HTML y CSS y los elementos que lo componen.
• Luego construiremos un formulario de suscripción con Mailrelay, empresa española de email marketing que te permite tener 15.000 suscriptores y el envío de 75.000 mails mensuales, entre otras cosas, de manera gratuita.
• Y luego personalizaremos ese formulario que hemos hecho en Mailrelay para darle un diseño acorde a nuestro blog.
• Para terminar os dejamos algunos ejemplos de diseños de formularios de suscripción para Mailrelay, con el código html y la hoja de estilos CSS,  para que podáis utilizarlos en vuestra web.

Recordad. Es muy importante incluir desde el principio un formulario de suscripción en vuestra web.

Empezamos construyendo un formulario muy sencillo solo con Html y las hojas de estilo para darle forma.

#1- Cómo hacer un formulario HTML

Es bueno ver este paso para entender cómo construir un formulario y qué partes son importantes. Es muy sencillo.

En Aula CM han publicado un post muy bueno para empezar con el Html y el  CSS. Os recomiendo su lectura.

Para trabajar el código podéis ir a la web codepen.io/. Una vez en la web, en el menú de la izquierda pinchad pen o start y os llevará a una pantalla con un recuadro para añadir el HTML, otro para el CSS y te mostrará debajo como va quedando. Es ideal para escribir código.

Probad con los códigos de este formulario que estamos haciendo para ir viendo como queda.

El código HTML de un formulario de suscripción muy simple sería algo parecido a esto:

<form>
<p>Suscríbete a Nuestra Newsletter</p>
<p><label>Nombre</label>
<input type="text" placeholder="Pon tu nombre"></p>
<p><label>Email</label>
<input type="email" placeholder="Escribe tu emal"></p>
<input type="submit" value="ENVIAR">
</form>


Se vería así. No tiene ningún diseño aplicado. Simple HTML.

Ahora le daremos forma con CSS. Primero vamos a ver los elementos que componen este formulario de suscripción.

• Etiqueta form. Es la etiqueta que abre y cierra el formulario.
• Las etiquetas label son una descripción corta para el campo de texto como nombre, email…
• Etiquetas input hay de varios tipos: texto, email, url, date, submit… según lo que  el usuario debe rellenar en el área de texto. Tienen la forma <input type=”text”>
• Textarea es el área donde el usuario escriba los campos que has diseñado.
• Required son los campos que quieres que sean obligatorios rellenar por el usuario. Ejemplo <input type=”text” required>
• Placeholder es cuando escribimos un texto en el textarea para ayudar al usuario a completar los campos. Ejemplo <input type="email" name="email" placeholder="Escribe tu emal"> Con esto nos podemos ahorrar el nombre del campo. (No añadimos la etiqueta label)

Entendido. Hemos hecho un formulario con un titular, dos inputs, uno de texto para el nombre y otro de email para el correo electrónico del usuario y, por último el input submit para enviar nuestro formulario.

Además hemos añadido la etiqueta label de nombre y email y hemos utilizado también el placeholder para facilitarle las cosas al usuario.

En un formulario de suscripción no hace falta utilizar el label y el placeholder pero, como ejemplo para ver como funcionan todos los elementos, nos vale.

#2- Aplicar CSS a un formulario Html

Por medio de las hojas de estilos vamos a darle un poco de diseño a este formulario. Sin complicarnos. Simplemente para que veáis como aplicar CSS. Primero añadimos las clases a los elementos html y luego aplicamos a estas clases los estilos CSS.

El nuevo código Html sería:

<form class="suscripcion">
<p class="titular">Suscríbete a Nuestra Newsletter</p>
<p class="parrafo"><label class="etiqueta">Nombre</label>
<input class="entrada" type="text" placeholder="Escribe tu nombre"></p>
<p class="parrafo"><label class="etiqueta">Email</label>
<input class="entrada" type="email" placeholder="Escribe tu emal"></p>
<p class="parrafo">
<input class="enviar" type="submit" value="ENVIAR"></p>
</form>

y el archivo de las hojas de estilo CSS para este formulario de suscripción sería este:


.suscripcion {display: block; position: relative;margin: 20px auto; max-width: 300px; min-width: 220px; background-color: #f2f2f2; padding: 10px; font-family: 'PT Sans Narrow', sans-serif}
.titular {text-align:center;color:#FFBF00;font-size:22px;font-weight:bold}
.parrafo {margin: 12px;text-align: center}
.etiqueta {font-weight: bold; letter-spacing: 1px;padding: 0 20px 0 0}
.entrada {font-size: 14px; color: #999; border: 0}
.enviar {padding: 6px 12px; margin: 14px; background-color: #0174df;color: #fff; font-size: 16px; font-weight: bold; letter-spacing: 4px; cursor: pointer; border: 0; border-radius: 2px}
.enviar:hover {background-color:#FFBF00}
::placeholder {background-color:#F5ECCE;padding: 10px}
::-webkit-input-placeholder { /* Edge */
background-color:#F5ECCE;padding: 10px}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
background-color:#F5ECCE;padding: 10px}


Se vería así:

Podéis ver el código Html y CSS, y trastearlo, en esta dirección

https://codepen.io/fotovideoyweb/pen/MWYZYER

Probad a cambiar el diseño tocando el CSS, colores, tamaño, fuente…

Si quieres probarlo en vuestra web copia el css en el sitio habilitado en tu plantilla. Normalmente suele estar en opciones de tema o personalizar tema, Añade el html en un nuevo post en la pestaña html o editor de código, no en la visual.

Obviamente este formulario no funciona. Nos falta el código para enviar el formulario al servidor, el action, los atributos name e id, nos faltan las páginas de error, de aceptación… 

Para esto vamos a utilizar Mailrelay.

Mailrelay nos permitirá crear una base de datos con los emails de los usuarios que rellenen nuestro formulario de suscripción. Esa base de datos es oro para cualquier web porque es gente interesada en lo que hacemos.

#3- Cómo hacer un formulario de suscripción con Mailrelay

La verdad es que es tremendamente sencillo hacer un formulario de suscripción con Mailerelay. Por eso este post. Porque con Mailrelay es todo muy sencillo menos darle forma o diseño a los formularios.

Vamos al grano. Lo primero es darte de alta en Mailrelay. No se puede hacer con un correo de Gmail o Hotmail, tiene que ser con un correo web. O sea, tienes que tener un dominio y un correo en ese dominio.

Es muy fácil crear un correo web. En nuestro post Cómo Crear una Cuenta de Correo con mi Dominio y Configurarla en Gmail te lo explicamos.

Con el nombre y el correo nos damos de alta en Mailrelay. Si tienes algún problema ponte en contacto con ellos. El departamento de atención al cliente funciona muy bien y puedes comunicarte con ellos por cualquier sistema: email, teléfono, Whatsapp, Skype…

Una vez dados de alta entramos con nuestro usuario y contraseña. Vemos nuestro dashboard.

Lo primero que tenemos que hacer es un grupo donde irán nuestros correos. En el menú de arriba Suscriptores – Grupos.

Botón Añadir y le damos nombre al grupo. Podría ser suscriptores, por ejemplo.

Una vez creado el grupo volvemos al menú de arriba Suscriptores – Formularios de Suscripción – Añadir

Nos aparece esta pantalla. Rellenamos los campos.

Nombre del formulario. Pon el nombre que quieras. Es solo a nivel interno.

Tipo de campo déjalo en oculto si solo tienes un grupo. Esto es por si en el formulario queréis segmentar por grupos. Por ejemplo, un formulario para un ecommerce de ropa puede hacer un grupo de hombres y otro de mujeres para enviar luego ofertas solo de los productos que le interesa al usuario.

Grupos. El que has creado, en nuestro caso suscriptores.

Remitente. Añade el correo en el que queráis recibir el alta de nuevos suscriptores, normalmente será con el que te has dado de alta.

Campos de formulario. Tenéis dos tipos de campo para seleccionar. Campo incorporado y campo personalizado. En el incorporado tienes los típicos campos de nombre, email, dirección, web, mensaje… Nosotros vamos a hacer tres campos incorporados con nombre, email y acepto política de privacidad.

En el campo acepto la política de privacidad al final tienes un botón opciones de campo. En la descripción añade el texto que queráis que aparezca después del checkbox. En nuestro caso acepto la política de privacidad. El título dejarlo en blanco.

Solo nos queda rellenar las páginas personalizadas que necesitamos.  Tienes que volver a tu WordPress y crear y publicar tres páginas. Son estas

Url de éxito. La página que se mostrará al usuario cuando sus suscripción se ha llevado a cabo.

Url de error. La página que se mostrará al usuario cuando se ha producido un error al rellenar el formulario.

Url de confirmación. Por cuestiones legales el usuario debe confirmar que está de acuerdo con la suscripción con un doble check in. Esto Mailrelay lo hace enviando un email al correo del suscriptor y mediante un enlace en ese correo confirma que está de acuerdo con la suscripción. En esta página se le dice al usuario que le llegará un correo en el que tendrá que pinchar el enlace para ser suscriptor.

Para ver como están hechas estas páginas suscríbete a algún blog que os guste y veis como lo han hecho ellos.

Una vez creadas estas tres páginas en tu WordPress las añades en páginas personalizadas en Mailrelay. Le das a actualizar o guardar formulario y ya está. Ya tienes hecho tu formulario de suscripción en Mailrelay.

Si vais a el menú de arriba Suscriptores – formularios de suscripción veréis el formulario que habéis creado.

Los 4 iconos de la parte de la derecha os permiten duplicar, mostrar, editar o eliminar los formularios que hayáis creado.

#4- Incrustar y personalizar el formulario en nuestra web

Ahora viene la parte más complicadilla pero si seguís los pasos que aquí os explicamos no será nada complicado.

Si pincháis la url vuestro formulario  en la página de Mailrelay formularios de suscripción veréis como ha quedado. En nuestro caso ha quedado así.

Vamos a ver cómo incrustarlo en nuestro sitio web. Para ello pinchamos el icono de mostrar o editar (el azul o verde) y en la nueva pantalla en el menú de arriba generar código.

Nos da dos opciones. Como Pop up o incustrarlo en la web. Nosotros optamos por la opción de incrustarlo en la web que es menos invasiva. Los pop up cansan.

Le damos a ver código y nos ofrece dos posibilidades. Una pestaña que es código del formulario y otra que pone usar etiquetas de códigos antiguos (no recomendada).

La no recomendada es la que vamos a usar.

Supongo que pone no recomendada porque es más complicada de implementar pero es la que vamos a utilizar porque la opción código del formulario es un iframe. Ese iframe no podemos modificarlo porque es una llamada a la web de Mailrelay. Además los iframe ralentizan la carga de la página. Cuantos menos mejor.

Vamos pues, a usar el código Html que hay en la pestaña usar etiquetas de códigos antiguos (no recomendada). Lo copiamos y ya está. Puedes pegar este código en un widchet de html personalizado, en cualquier post o en vuestra landing page (en la vista código o html no en la visual).

El problema: que el diseño es una birria. Pero eso es muy fácil de apañar como hemos visto al principio.

Vamos por partes.

El código html que nos ha proporcionado Mailrelay es el siguiente. Lo detallamos:

<!-- encabezado formulario -->
<form class="simple_form form form-vertical" id="new_subscriber" novalidate="novalidate" action="https://fotovideoyweb.ipzmarketing.com/f/K..." accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&...;" />
<!-- etiqueta (label) nombre y campo (input) -->
<div class="form-group string optional subscriber_name"><label class="control-label string optional" for="subscriber_name">Nombre</label><input class="form-control string optional" type="text" name="subscriber[name]" id="subscriber_name" /></div>
<!-- etiqueta (label) email y campo (input) -->
<div class="form-group email required subscriber_email"><label class="control-label email required" for="subscriber_email"><abbr title="Requerido"> </abbr> Email</label><input class="form-control string email required" type="email" name="subscriber[email]" id="subscriber_email" /></div>
<!-- Acepto política privacidad -->
<p class="acceptance-text"></p>
<div class="form-group boolean optional subscriber_subscribed_with_acceptance">
<div class="checkbox"><input value="0" type="hidden" name="subscriber[subscribed_with_acceptance]" /><label class="boolean optional" for="subscriber_subscribed_with_acceptance"><input class="boolean optional" type="checkbox" value="1" name="subscriber[subscribed_with_acceptance]" id="subscriber_subscribed_with_acceptance" />acepto la política de privacidad</label>
</div>
</div>
<input type="text" name="anotheremail" id="anotheremail" style="position: absolute; left: -5000px" tabindex="-1" autocomplete="off" />

<div class="submit-wrapper">
<input type="submit" name="commit" value="Enviar" class="btn btn-primary" data-disable-with="Procesando" />
</div>
</form>

Intentando hacerlo lo más fácil posible y variando lo mínimo el código de Mailrelay vamos a ir sustituyendo las clases de los distintos elementos del formulario por las nuestras.

Nuestra hoja de estilos CSS para este formulario será esta.

<!-- formulario Mailrelay -->

.formulario{display: block; margin: 10px auto; max-width: 350px; min-width: 250px; position: relative; background-color: #f2f2f2; padding: 10px; font-family: 'PT Sans Narrow', sans-serif;}
.titular{margin-bottom:12px;padding: 10px; text-align: center; color: #ffbf00; font-size: 22px; font-weight: bold}
.campos {margin: 1px; padding: 8px; text-align: center; letter-spacing: 1px;}
.etiqueta{font-weight: bold; padding: 10px}
.entrada{font-size: 14px; color: #999; border: 0;}
.caja{padding:10px;}
.privacidad{color: #FA5858;}
.enviar{padding: 6px 12px; margin: 10px; background-color: #0174df; color: #fff; font-size: 16px; font-weight: bold; letter-spacing: 4px; cursor: pointer; border: 0; border-radius: 2px;}
.enviar:hover {background-color:#FFBF00;}
::placeholder {background-color:#F5ECCE;padding: 5px;}

Y vamos a ver el nuevo Html.

En verde hemos sustituido las clases que venían por defecto por la nuestras, En rojo lo que directamente nos hemos cargado. Y en azul lo que hemos añadido.

Queda así. En el encabezado del formulario copia el tuyo, ahí va todo el código de tu formulario para que funcione bien.

<!-- encabezado formulario -->
<form class="formulario" id="new_subscriber" novalidate="novalidate" action="pon tu código" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="pon tu código" />
<!-- titular -->
<p class="titular">Suscríbete a Nuestra Newsletter</p>
<!-- etiqueta (label) nombre y campo (input) -->
<div class="campos"><label class="etiqueta" for="subscriber_name">Nombre</label><input class="entrada" type="text" name="subscriber[name]" id="subscriber_name" placeholder="Escribe tu nombre" /></div>
<!-- etiqueta (label) email y campo (input) -->
<div class="campos"><label class="etiqueta" for="subscriber_email"><abbr title="Requerido"> </abbr> Email</label><input class="entrada" type="email" name="subscriber[email]" id="subscriber_email" placeholder="Escribe tu email"/></div>
<!-- Acepto política privacidad -->
<p class="acceptance-text"></p>
<div class="campos">
<div class="checkbox"><input value="0" type="hidden" name="subscriber[subscribed_with_acceptance]" /><label class="boolean optional" for="subscriber_subscribed_with_acceptance"><input class="boolean optional" type="checkbox" value="1" name="subscriber[subscribed_with_acceptance]" id="subscriber_subscribed_with_acceptance" />acepto la <a class="privacidad" href="#">política de privacidad</a></label>
</div>
</div>
<input type="text" name="anotheremail" id="anotheremail" style="position: absolute; left: -5000px" tabindex="-1" autocomplete="off" />
<!-- enviar -->
<div class="campos">
<input type="submit" name="commit" value="ENVIAR" class="enviar" data-disable-with="Procesando" />
</div>
</form>


Ahora os toca aplicar estos cambios y personalizar el formulario de Mailrelay a vuestro gusto.

#5. Ejemplos de formularios de suscripción

Como bonus os dejamos estos diseños de formularios con su Html y CSS. Pincha en el título para ver los códigos.

Formulario vertical con foto

Formulario para widchet

Formulario Horizontal para el cuerpo de la página

Y esto es todo. Si lo intentas no es difícil personalizar un formulario con Html y CSS.

Nosotros no somos expertos en programación ni en html ni en css pero esto funciona. Para cualquier duda tenéis los comentarios y si sabemos os responderemos. Y si te ha sido útil este post, por favor, comparte en tus redes.