Tutorial: formulario de suscripción al final de cada post

¿Sabías que poca gente llega al final de los posts que escribes? Menos de un 40% de las personas que entran en tu blog llegan a leerse tus artículos. Los que llegan al final son verdaderos interesados en el tema, en ti, en tu blog, o en el artículo… sea como sea, hay un alta probabilidad de conseguir un suscriptor. Por eso recomienda Víctor Martín en su curso de Email Marketing poner la caja de suscripción al finalizar cada post.

Para este tutorial recomiendo que ya tengas:

1) Tu programa de gestión de newsletter, como MailRelay, Acumbamail, Mailchimp…

2) Tus claves del FTP de tu web y un programa para abrirlo, como Filezilla.

3) No obligatorio: un programa para editar documentos html y css, como Notepad++ o SublimeText. No es obligatorio, puedes hacerlo con el bloc de notas.

¡Dentro vídeo!

Código HTML

<div class=”suscripcion”>
<p>ESCRIBE AQUÍ EL TEXTO PREVIO AL FORMULARIO</p>
<form  SUSTITUYE ESTO POR LA ETIQUETA FORM DE TU FORMULARIO>

<INPUT 

AÑADE A CADA INPUT (CAMPO): class=”suscripcioninput”

AÑADE A CADA INPUT (CAMPO):
value=”TEXTO QUE QUIERAS” onfocus=”if ( this.value == ‘TEXTO QUE QUIERAS’) { this.value = ‘ ‘; }” onblur=”if ( this.value == ‘ ‘ ) { this.value = ‘TEXTO QUE QUIERAS’; }”

/>

AÑADE AL INPUT (BOTÓN): class=”enviarsuscripcion”
CÁMBIALE EL VALUE POR EL TEXTO QUE QUIERAS EN EL BOTÓN: value=”¡Apúntate ya!”
</form>
</div>

Código CSS

.suscripcion {
background-color: #90F4B0; /* COLOR DE FONDO DE LA CAJA */
padding: 1em;
}
.suscripcion p{
color: #000; /* COLOR DE LA LETRA DEL PRIMER PÁRRAFO */
font-size: 1.5em;
font-weight: bold !important; /* BORRAR TODA LA LÍNEA SI NO LO QUIERES NEGRIGA*/
}
.suscripcioninput {
width: 80% !important;
border: solid 1px #E6E6E6; /* COLOR Y TAMAÑO DEL BORDE DE LOS CAMPOS */
height: 20px;
font-size: 1.2em;
color:#A4A4A4; /* COLOR DEL TEXTO DE LOS CAMPOS */
margin: 0 0 15px 0;
padding-left: 10px;
}
.suscripcioninput :focus {
outline: 0;
border-color: #FFBF00; /* COLOR DEL BORDE CUANDO SE PINCHA EN UN CAMPO */
}
.enviarsuscripcion {
background: #000; /* COLOR DEL BOTÓN */
width: 50% !important; /* ANCHO DEL BOTÓN */
border: none !important; /* BORDE DEL BOTÓN */
height: 35px !important;
font-size: 1.5em;
font-weight: bold !important; /* FUENTE NEGRITA */
margin: 0 0 15px 0;
padding-left: 10px;
color:#fff !important; /* COLOR DE LA LETRA DEL BOTÓN */
}
.enviarsuscripcion:hover {
cursor:pointer !important;
cursor: hand;
background: #fff !important; /* COLOR DEL BOTÓN CON EL RATÓN ENCIMA */
color: #000 !important; /* COLOR DE LA LETRA DEL BOTÓN CON EL RATÓN ENCIMA */
}

ENLACES

Colores HTML

Programa Filezilla, para entrar al FTP de vuestra web

Programa Notepad++, para editar documentos php, html o css

Programa SublimeText, otro editor para programación