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

Recibe gratis los 10 mandamientos
de la nube y la  automatización que te harán ganar tiempo inmediatamente.

Un email semanal con herramientas gratuitas y consejos que podrás aplicar ya mismo.

  • 10 claves para tener un negocio en la nube y automatizado.
  • Más de 20 herramientas gratuitas que a mí me ahorran 1700 euros cada año.
  • Cómo tener tu negocio atendido las 24 horas sin que tengas que aumentar tu jornada.

Protección de datos: La responsable de estos datos es Esther Morote. Finalidad: gestionar y enviar información de boletines y promociones a través de correo electrónico. Legitimación: consentimiento del nteresado. Destinatarios: No se cederán a terceros salvo obligación legal. Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del siguiente e-mail: contacto@esthermorote.com. Info adicional: Puedes consultar la información adicional y detallada sobre protección de datos aquí

2 comentarios en “Tutorial: formulario de suscripción al final de cada post”

  1. Hola Esther! he seguido tu tutorial, pero no consigo saber dónde poner el html para que el formulario de suscripciones aparezca al final de cada post. Podrías ayudarme? Gracias!

Deja un comentario

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