Formulario de suscripción a newsletter responsive con CSS

Conseguir que un usuario se suscriba a una newsletter es siempre un desafío donde son muchos los factores que entran en juego. La calidad y utilidad de tus contenidos son fundamentales, pero también hay pequeños detalles que pueden hacer inclinar la balanza hacia tu lado si el usuario está indeciso. Uno de estos detalles es sin duda el diseño que apliques al formulario de suscripción de la newsletter, y por supuesto, si este es responsive estás adaptando la misma experiencia para usuarios que accedan también desde móvil y tablets como vimos recientemente con el ejemplo de los banners.

Ya hemos hablado de cómo crear una lista de suscripción, cómo automatizar el envío de emails cuando publiquemos nuevo contenido…pero todo este esfuerzo y trabajo puede ser en balde si nadie se suscribe a nuestra lista, si los usuarios no encuentran el formulario de suscripción o si este no les resulta atractivo y no les genera la suficiente confianza como para dejarnos sus emails.

Para tratar de paliar este último punto, hemos diseñado varios ejemplos sencillos de formularios de suscripción, con distintas combinaciones de colores y patrones para que puedas mejorar la UX de tus usuarios cuando vayan a formar parte de tu lista de correos, todos ellos usando CSS y HTML.

Ejemplos diseños de formularios para newsletter con CSS
Algunos de los ejemplos que hemos diseñado para hacer que experiencia de nuestros futuros suscriptores sea más amigable.

Estructura HTML de un formulario de suscripción

Hace poco escribíamos sobre formularios y validación con CSS, utilizando el potencial que nos permite los patrones y etiquetas de HTML5. Pero para este ejemplo hemos optado por un HTML que ya esté en uso y sirva para todos aquellos usuarios que lo tengan implementado en su web como punto de partida para modificar solo el CSS. Se trata del widget de suscripción de WordPress.com, también disponible para WordPress.org usando el plugin Jetpack, por lo que si estás usando uno de nuestros temas WordPress, ya puedes añadir estos diseños via CSS.

El HTML es muy sencillo, consta de un elemento section definido por la clase .widget_blog_subscription que contiene el form con tres elementos p, que en este orden definen:

  1. Texto de párrafo simple, para realizar una llamada a la acción. Por ejemplo: suscríbete a nuestra newsletter!
  2. El segundo párrafo contiene el el input que recogerá el mail
  3. Por último, el input submit para enviar nuestro email

Quizás no sea la estructura más eficiente y semántica, pero vamos a tomarlo como un reto, pues es el HTML que nos genera dicho widget y solo tendremos acceso a personalizarlo via CSS:

<section class="widget widget_blog_subscription">
	<form action="#" method="post" accept-charset="utf-8" id="subscribe-blog">
		<p>Subscribe to our newsletter.</p>
		<p>
			<input type="text" name="email" style="width: 95%; padding: 1px 2px" placeholder="Enter your email address" value="" id="subscribe-field">
		</p>
		<p>
			<input type="submit" value="Follow me!">
		</p>
	</form>
</section>

Diseño minimalista con colores planos

Es este primer diseño hemos optado por centrar el contenido y usar una paleta de colores planos y con un botón ocupando el 100% de ancho como footer del widget. Hemos incluido dos combinaciones de colores posibles:

El CSS es muy sencillo, tan solo hay que definir muy bien los valores de margin y padding para que todo quede centrado y correctamente alineado:

.widget_blog_subscription {
	display: block;
	margin: 50px auto;
	width: 60%;
	max-width: 490px;
	min-width: 320px;
	position: relative;
	overflow: hidden;
	background-color: #F6F6F2;
}
.widget_blog_subscription p {
	margin: 0;
	text-align: center;
}
.widget_blog_subscription p:first-child {
	margin: 40px 15px 0;
	color: #F38630;
	text-transform: uppercase;
	text-align: center;
	font-size: 40px;
	font-family: 'PT Sans Narrow', sans-serif;
	letter-spacing: 1px;
}
.widget_blog_subscription input[type="text"] {
	margin: 45px 30px;
	color: #999;
	padding: 25px 15px !important;
	text-align: center;
	width: 100% !important;
	max-width: calc(100% - 90px);
	outline: none;
	border: 0;
	text-transform: uppercase;
	font-size: 12px;
}
.widget_blog_subscription input[type="text"]::-webkit-input-placeholder {
	color: #69D2E7;
}
.widget_blog_subscription input[type="text"]:-moz-placeholder {
	color: #69D2E7;
}
.widget_blog_subscription input[type="text"]::-moz-placeholder {
	color: #69D2E7;
}
.widget_blog_subscription input[type="text"]:-ms-input-placeholder {
	color: #69D2E7;
}
.widget_blog_subscription input[type="submit"] {
	margin: 0;
	background-color: #69D2E7;
	color: #fff;
	padding: 25px 15px !important;
	text-align: center;
	width: 100%;
	max-width: 100%;
	outline: none;
	border: 0;
	text-transform: uppercase;
	font-size: 12px;
	cursor: pointer;
	-webkit-transition: .1s all ease-in-out;
	-moz-transition: .1s all ease-in-out;
	-o-transition: .1s all ease-in-out;
	transition: .1s all ease-in-out;
}
.widget_blog_subscription input[type="submit"]:hover {
	background-color: #F38630;
}

El uso de important! es obligado aquí, pues el HTML generado por el Widget ya trae algunos estilos en línea que solo se pueden sobrescribir de esta forma.

Imitando un correo aéreo con CSS

Sobre Air Mail formulario CSS
Inspirándonos en los sobres de correo aéreo para crear un formulario de suscripción a la newsletter algo retro y vintage

¿Recordáis los sobres de “air mail” que llevaban un borde de colores rojo y azul? Aunque esté prácticamente en desuso, solemos identificar estos colores con un envío postal, y en definitiva, la newsletter es eso, un envío postal por medios electrónicos. Así que para este ejemplo hemos preparado un formulario que parece un sobre sellado:

Para los sellos hemos utilizado unos pseudoelementos CSS y para los bordes del sobre un repeating-linear-gradient, con los colores azul y rojo tan característicos:

.widget_blog_subscription:after,
.widget_blog_subscription:before {
	content: '';
	width: 100%;
	height: 10px;
	display: block;
	background-image: repeating-linear-gradient(135deg, #F29B91 0px, #F09290 15px, transparent 15px, transparent 25px, #83B3DB 25px, #84ADCB 40px, transparent 40px, transparent 50px);
}
.widget_blog_subscription #subscribe-blog:before {
	content: '>>>>>';
	width: auto;
	height: auto;
	display: block;
	border: 2px solid rgba(242, 155, 145, 0.5);
	padding: 4px;
	position: absolute;
	top: 36px;
	right: -30px;
	color: rgba(242, 155, 145, 0.5);
	font-size: 28px;
	transform: rotate(17deg);
	font-weight: 400;
	text-decoration: underline;
	border-radius: 10px;
}
.widget_blog_subscription #subscribe-blog:after {
	content: '&';
	width: 50px;
	height: 50px;
	display: block;
	border: 4px double rgba(242, 155, 145, 0.5);
	padding: 10px;
	position: absolute;
	bottom: 30px;
	right: -10px;
	color: rgba(242, 155, 145, 0.5);
	font-size: 50px;
	transform: rotate(-30deg);
	font-weight: 400;
	border-radius: 99px;
	text-align: center;
	line-height: 50px;
}

Como variación al diseño de la postal o sobre de correo aéreo, hemos realizado una adaptación mas navideña, cambiando los colores y los sellos, inspirándonos a la que usamos en nuestra felicitación navideña:

Felicitación navideña en formulario de suscripción
EL formulario de suscripción también puede ser una buen sitio donde felicitar a tus futuros suscriptores las fiestas navideñas

Para ello, el fondo cambia a:

.widget_blog_subscription:after,
.widget_blog_subscription:before {
	content: '';
	width: 100%;
	height: 10px;
	display: block;
	background-image: repeating-linear-gradient(135deg, #eb5f5f 0px, #eb5f5f 15px, transparent 15px, transparent 25px, #8ac26d 25px, #8ac26d 40px, transparent 40px, transparent 50px);
}

Patrones CSS como fondo de formulario

En esta demo hemos usado el potencial de los patters de CSS3 para conseguir por un lado el aspecto de un bloc de notas (perfecto para un blog de educación o similar) y en segundo lugar un diseño más abstracto:

En ambos casos, como puedes ver el botón de suscribirse se sitúa a la derecha del campo del email, para que todo quede en una misma línea. En cuanto a los patrones, podéis encontrar más ejemplos aquí

Formualrio de newsletter en bloc de notas
Formulario de suscripción imitando un bloc de notas

Para el primero, el del cuaderno, el CSS ustilizado es:

.widget_blog_subscription {
	display: block;
	margin: 50px auto;
	width: 60%;
	max-width: 490px;
	min-width: 320px;
	position: relative;
	overflow: hidden;
	background-color: #F6F6F2;
	border-radius: 5px;
	padding: 50px;
	background-color: #fff;
	background-size: 100% 1em;
	background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0.03) 81px),
					-webkit-linear-gradient(#eee .05em, transparent .05em);
	background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0.03) 81px),
					-moz-linear-gradient(#eee .05em, transparent .05em);
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 79px, #83B3DB 79px, #83B3DB 81px, rgba(0, 0, 0, 0.03) 81px),
					linear-gradient(#eee .05em, transparent .05em);
}

Mientras que en el segundo ejemplo, la base geométrica abstracta se genera de la sigueinte forma:

.widget_blog_subscription {
	background-color: #ddd;
	background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #eee 75%, #eee), 
					linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
	background-size: 60px 60px;
	background-position: 0 0, 30px 30px;
}

Puedes probar a modificar los colores y fondos para obtener otros efectos y estilos. Recuerda cambiar los colores del texto y botones para crear contraste con el fondo que estás utilizando.

Formularios con diseño = usuarios felices

Es un hecho que un correcto diseño aporta mucho al contenido. Lo hace más legible y util a ojos de usuario, como veíamos con el ejemplo del menú hamburguesa o las imágenes ampliadas por CSS. Lo mismo sucede con los formularios, uno de los puntos donde van a interactuar con nosotros, de ahí la importancia de cuidar al máximo estos detalles.

Es por ello que animamos a que revises el diseño de estos elementos, que suelen quedar relegados en el cajón desastre del “si hay tiempo lo termino”. Una buena UX empieza siempre por el punto de acceso del usuario a nuestra app o web, y en muchos casos, como por ejemplo en el formato blog, los formularios de suscripción son ese punto de acceso. Por ello, cuidemos nuestros formularios y hagamos la vida más fácil a nuestros usuarios, ellos nos lo agradecerán!

Espero que los ejemplos hayan sido de ayuda e inspiración 🙂

Comentarios (3)

Deja un comentario

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