Como crear un formulario lead magnet para aumentar tu lista de suscriptores

Como crear un formulario lead magnet para aumentar tu lista de suscriptores

En un artículo anterior comentaba que todos los gurú de los negocios en Internet afirman que "el dinero esta en la lista de suscriptores", y concluía diciendo que tienen mucha razón ya que sin una lista de suscriptores no hay ventas

Hoy te voy enseñar a como crear un sencillo formulario para ofrecer tu lead magnet y con ello logres convertir tus visitas en suscriptores.

Como crear un formulario de suscripción para ofrecer lead magnet y aumentar mi lista de clientes en un 100%


Antes que nada quiero explicarte a breves rasgos que es un lead magnet y como esto ayudará a que tus lista de suscriptores aumente diariamente.

Lead Magnet, es un termino que se usa muy a menudo en el email marketing y no es mas que un contenido gratuito que ofreces a tus visitas a cambio de un email u otros datos.

¿Entendiste la idea? Aun no...

Te explico rápidamente: debes crear un formulario de suscripción en el cual expliques a tus visitas que si se suscriben tu le enviaras directamente al buzón de email algo que ellos necesitan (una guía en formato Pdf con información relevante de acuerdo a tu temática) totalmente gratis.

Ahora bien, el formulario de suscripción es la herramienta que tu visita usará para suscribirse y es donde tu debes colocar todo tu esfuerzo, información llamativa sobre el lead magnet, para ayudar a que tu visita se convierta en suscriptor.

¿Nada difícil verdad?

formulario-de-suscripcion-para-lead-magnet

Empecemos...

Pasos previos.

1. Debes tener acceso a la herramienta que permite crear listas de suscriptores, yo en lo personal recomiendo Benchmarkemail (soy afiliado gracias).

2. Una vez dentro de esta herramienta, crea una "Nueva lista" de contacto.

3. Luego crea un "Formulario de Registro" apuntado a tu nueva lista de suscriptores.

4. Obtén el código HTML de tu nuevo formulario de registro y guárdalo en un archivo txt (bloc de notas), tranquilo lo usaremos luego ya verás.

Crear formulario para obsequiar un lead magnet y aumentar la lista de suscriptores


1. Carga el siguiente código Css en tu archivo de estilos para dar forma al formulario de suscripcion. 



<!-- Código de suscripción CSS sin imagen -->

/* Cajas con contenido de color */ 
.box-blue,
.box-gray,
.box-green,
.box-grey,
.box-red,
.box-yellow,
.box-cafe,
.box-pago {
    margin:0 0 25px;
    overflow:hidden;
    padding:20px;
    -webkit-border-radius: 10px;
        border-radius: 10px;
}
 
.box-blue {
    background-color:#d8ecf7;
    border:1px solid #afcde3;
}
 
.box-gray {
    background-color:#e2e2e2;
    border:1px solid #bdbdbd;
}
 
.box-green {
    background-color:#d9edc2;
    border:1px solid #b2ce96;
}
 
.box-grey {
    background-color:#F5F5F5;
    border:1px solid #DDDDDD;
}
 
.box-red {
    background-color:#f9dbdb;
    border:1px solid #e9b3b3;
}
 
.box-yellow {
    background-color:#fef5c4;
    border:1px solid #fadf98;
}

.box-cafe {
    background-color:#F5F5F5;
    border:2px solid #e56223;
    border-radius: 10px;
}

.box-pago {
    background-color:#FFFFFF;
    border:2px solid #e56223;
    border-radius: 10px;
}

/* Viñeta con imagen */

.vinieta1{
padding-left: 12px;
background: url('https://2.bp.blogspot.com/-HipqbZ0HtaI/WOeKwgrl09I/AAAAAAAAEWY/BFTpPyOilTIVVi2NB4YqfdPVC8r_NtukQCLcB/s1600/1491587271_ok-sign.png')1em 0.2em no-repeat;
margin-bottom: 1em;
list-style-type: none;
 }

 .vinieta2{
padding-left: 12px;
background: url('https://1.bp.blogspot.com/-pru5_245O8M/WOeKwm_ssyI/AAAAAAAAEWU/-t8kLQ0-kPYlhlA705J6vKCNaWYT5NRmQCLcB/s1600/1491587282_checked.png')1em 0.2em no-repeat;
margin-bottom: 1em;
list-style-type: none;
 }

 .vinieta3{
padding-left: 12px;
background: url('https://2.bp.blogspot.com/-IueF3xTLfng/WOeKwswMchI/AAAAAAAAEWQ/vYWxD8-OM9MgTT5t38kN7uimP-ABfAxpwCLcB/s1600/1491587301_OK.png')1em 0.2em no-repeat;
margin-bottom: 1em;
list-style-type: none;
 }

.vinieta4{
background: url('https://4.bp.blogspot.com/-7ihJHUfJl4Y/WOeKwwKC5BI/AAAAAAAAEWc/rlMeUhe8MI0Qc7uIbgoqMGr2UioLMnuQwCLcB/s1600/1491587328_Accept_check_ok_success_tick_yes.png')1em 0.2em no-repeat;
margin-bottom: 1em;
list-style-type: none;
 }

.vinieta5{
background: url('https://3.bp.blogspot.com/-6rwA99Nku3s/WOeLSHe_qOI/AAAAAAAAEWg/tsz2uBdSc2A06NrXLw5Ke2TAi_gRZgSnQCLcB/s1600/1491587471_checked-2.png')1em 0.2em no-repeat;
margin-bottom: 1em;
list-style-type: none;
 }

/* Signup Form Entradas */

#optin { margin: 0 auto 2em; overflow: hidden; text-align: center }
 #optin input {
  background: #fff url(https://dl.dropboxusercontent.com/s/lr8s3pyb6lmmwf3/input.png) repeat-x bottom;
  border: 1px solid #ccc;
  float: left;
  font-size: 14px;
  margin: 0 10px 10px 0;
  padding: 8px 10px;
  width: 35%;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  box-shadow: 0 2px 2px #ddd;
  -moz-box-shadow: 0 2px 2px #ddd;
  -webkit-box-shadow: 0 2px 2px #ddd
 }
  #optin input.name { background: #fff url(https://dl.dropboxusercontent.com/s/14gf1ifoi7em5w8/name.png) no-repeat 10px center; padding-left: 35px }
  #optin input.email { background: #fff url(https://dl.dropboxusercontent.com/s/qyld0tyso6zuwz4/email.png) no-repeat 10px center; padding-left: 35px }
  #optin input[type="submit"] {
   background: #f6640e url(https://3.bp.blogspot.com/-07EUIGPJU-s/WKXzx5w_syI/AAAAAAAAD-0/VinlGeYAcdACduMh6vbzLY-ef1oiBJT4wCLcB/s1600/orange.png) repeat-x top;
   border: 1px solid #a44913;
   color: #fff;
   cursor: pointer;
   float: center;
   font-size: 14px;
   font-weight: bold;
   padding: 3px 5px;
   text-shadow: -1px -1px #562806;
   text-transform: uppercase;
   width: auto
  }
   #optin input[type="submit"]:hover { color: #ffdeb3 }
  #optin span { background: url(https://dl.dropboxusercontent.com/s/db38gp64b37oana/lock.png) no-repeat center left; float: left; margin-left: 15px; padding-left: 20px }

<!-- Código de suscripción CSS sin imagen -->


Recuerda que: 
En blogger será antes de la sentencia ]]></b:skin>, en Joomla emplea la ruta /templates/tu-plantilla/css/tu-plantilla-custom.css y en Wordpress la ruta /wp-content/themes/tu-plantilla/css/tu-plantilla-custom.css.

2. Busca y reemplaza el siguiente fragmento de código por el de tu formulario, recuerda lo creaste y guardaste en el archivo del bloc de notas.


<form style="display:inline;" action="https://lb.benchmarkemail.com//code/lbform" method=post name="frmLB773753" accept-charset="UTF-8" onsubmit="return _checkSubmit773753(this);" >
<input type=hidden name=successurl value="http://www.adaptacionesweb.com/p/estas-punto-de-suscribirte.html" />
<input type=hidden name=errorurl value="http://lb.benchmarkemail.com//Code/Error" />
<input type=hidden name=token value="mFcQnoBFKMTPnK%2F5TNcNWOZXUawFafLCMfD4HgpzBz1HNHYysVoPng%3D%3D" />
<input type=hidden name=doubleoptin value="" />

3. Una vez reemplazado el fragmento de código por el tuyo, copia y pega donde quieres que aparezca el formulario de suscriptores. 



<!-- Código de suscripción HTML sin imagen -->
<div class="box-pago">
<!-- titulo -->
<div style="width: 100%; float: left;margin:0px 0px 15px 0px;text-align:center;"><h3>
<b><span style="color: #f15f2a;">Mejora tu sitio web y obtén más clientes</span></b></h3></div>
<!-- ./titulo -->
<div style="text-align:center;margin:0 auto;width:100%;">
<div style="width: 95%; float: left;margin:0px 15px 10px 15px;text-align:justify;">
<b>Suscríbete y conoce las características que tu sitio web necesita para convertirse en un imán de potenciales clientes</b>
</div>
</div>
<!-- beneficios -->
<div style="text-align:center;margin:0 auto;width:100%;">
<div style="width: 100%; float: left;margin:0px 15px 0px 15px;text-align:left;">
<ul class="vinieta3">
    <li> Multiplica tus ingresos aprovechando al máximo tu sitio web.</li>    
</ul>
<ul class="vinieta3">
<li> Comienza a generar tráfico cualificado y de interés para tu oferta.</li>   
</ul>
<ul class="vinieta3">    
    <li> Convierte tus visitas en clientes gracias a una web optimizada.</li>
</ul>
<!-- ./beneficios -->
</div>
<div style="clear: both;"/>
</div>
</div>
<!-- footer -->
<div style="width: 100%; float: left;margin:15px 15px 0px 15px;text-align:center;">
<div id="optin">
<form style="display:inline;" action="https://lb.benchmarkemail.com//code/lbform" method=post name="frmLB773753" accept-charset="UTF-8" onsubmit="return _checkSubmit773753(this);" >
<input type=hidden name=successurl value="http://www.adaptacionesweb.com/p/estas-punto-de-suscribirte.html" />
<input type=hidden name=errorurl value="http://lb.benchmarkemail.com//Code/Error" />
<input type=hidden name=token value="mFcQnoBFKMTPnK%2F5TNcNWOZXUawFafLCMfD4HgpzBz1HNHYysVoPng%3D%3D" />
<input type=hidden name=doubleoptin value="" />
<input class="required email" name="fldEmail" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" size="35" type="email" value="Ingresa tu email" /> 
<input class="name" name="fldfirstname" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" size="35" type="text" value="Ingresa tu nombre" /> <br />
<div class="clear">
<input class="button" id="btnSubmit" krydebug="1751" name="subscribe" type="submit" value="Suscribete Ahora" /> 
<span>
Tus datos están 100% seguros. 
</span>
</div>
</form>
</div></div>
<!-- ./footer -->
</div>
<!-- ./Código de suscripción HTML sin imagen -->


Listo, con eso ya tienes una caja de suscripción para ofrecer información imán para tus visita, estoy seguro que tu lista de suscriptores te lo agradecerá.

Puedes ver a continuación un ejemplo del formulario funcionando al 100% en esta entrada.

Convierte a tus suscriptores en clientes


Suscríbete y descubre los 5 emails que harán que tus suscriptores comiencen a comprarte de forma automática 24*7*365.

  • Multiplica tus ingresos aprovechando tu autoresponder.
  • Comienza a crear una relación con tus suscriptores desde el primer email.
  • Acaba con el síndrome de la "lista muerta" de tu newsletter.

Tus datos están 100% seguros.
Estilos del formulario:

Puedes cambiar el color del borde, solo debes reemplazar box-pago por cuarquier de las siguientes sentencia:

box-blue
box-gray
box-green
box-grey
box-red
box-yellow
box-cafe

También puedes cambiar la imagen del visto, reemplazando vinieta3 por las siguientes:

  • vinieta1
  • vinieta2
  • vinieta3
  • vinieta4
  • vinieta5

Recuerda, para que tus visitas se suscriban a través del formulario, la información puesta en él debe ser de interés para tu audiencia y acorde a tu temática, ademas debes cumplir lo que prometes.

No olvides colocar como mínimo tres beneficios que obtendrá tu vista al optar por suscribirse (observa mi formulario y deja volar tu imaginación).

Eso es todo por el momento. 

Cuéntame por medio de un comentario que te pareció este tipo de formulario. ¿Lograste instalarlo en tu web? Si/No

No dudes en comentar, responderé todo tipo de comentario al respecto.

Compártelo con tus amigos. ¡GRACIAS!
Publicado por: Vicente Espinoza

Puedo hacerlo yo para ti, porque no tienes tiempo ni ganas: ¡Contrátame Aquí!
O puedo explicarte como crear un sitio web completamente dinámico sin ser un experto en programación web. ¡Suscríbete Ahora!

Mentoría blogging 1:1 Únete Ya!

¿Necesitas ayuda?