formulario-suscripcion-benchmarkemail

En esta entrada voy a implementar y configurar un formulario de suscripción, desarrollado en HTML y CSS, con una de las mejores herramienta de email marketing como lo es Benchmarkemail.

 Para este ejemplo usare uno de los formulario de suscripción personalizado para mailchimp que encontré por la red y publique hace ya algunos días.

 Antes de empezar quiero que sepas que Benchmarkemail es para mi concepto uno de los mejores autorespondedores gratuito que he probado hasta ahora, con su plan gratuito puedes enviar hasta 14.000 correos electrónicos para 2000 suscriptores por mes y mas que todo puedes crear respuestas automáticas generando mas de una campaña de email marketing eficaz.

Códigos HTML 100% Optimizados

Suscríbete y recibe directamente en tu email, los mejores códigos HTML que necesitas para editar tu página web.








He leído y estoy de acuerdo con la Política de Privacidad


Empecemos la adaptación del formulario personalizado para Benchmarkemail:

 1. Crear una cuenta en Benchmarkemail. 
2. Crear una lista de contactos y un formulario de contacto en Benchmarkemail.

 Para crear una cuenta gratis y configurar tu lista de contacto, así como crear un formulario básico en benchmarkemail, solo debes seguir unos sencillos pasos que lo describen en la pagina oficial de Benchmarkemail.com, pero si quieres profundizar un poco mas y conocer todo el potencial que ofrece esta herramienta para el email marketing en forma rápida, te recomiendo que descargues y leas la Guía Completa de Benchmarkemail. 

3. Copiar el código en HTML del formulario obtenido con Benchmarkemail en el portapapeles para ser usado en la posterior adaptación. 

 Como deduzco que leíste la guía completa de Benchmarkemail y ya tienes tu lista de contactos, así como tu formulario básico con el cual empezaremos la adaptación, solo quiero mostrarte como se vería tu código HTML obtenido con Benchmarkemail.

 


<!-- BEGIN: Signup Form Manual Code from Benchmark Email Ver 3.0 ------> 

 <style type="text/css"> 

.formbox-editor-773753 {margin: 0 auto;padding: 30px 40px;text-align: left;width: 100%;box-sizing: border-box;}
.formbox-editor-773753 fieldset {border: none;margin: 0;padding: 0;position: relative;}
.formbox-editor-773753 fieldset > input, .formbox-editor fieldset > textarea, .formbox-editable-field {margin: 10px 0;outline: none;}
.formbox-title-773753 {background: none;border: none;color: #000;font-family: Helvetica, Arial, sans-serif;font-size: 20px;padding: 0;width: 100%;word-break: break-word;margin: 10px 0;}
.formbox-title-773753 {border-radius: 0;min-height: 0;}
input.formbox-field-773753 {border: 2px solid #f1f2f2;border-radius: 0;box-sizing: border-box;color: #000;font-family: Helvetica, Arial, sans-serif;font-size: 14px;padding: 15px;width: 100%;}
input.field-error-773753 {border-color: #f15858;}
input.formbox-button-773753 {background-color: #21292d;border-width: 0;border-style: solid;border-color: #21292d;border-radius: 8px;color: #fff;display: inline-block;font-family: Helvetica, Arial, sans-serif;font-size: 14px;font-weight: 600;padding: 15px;margin: 10px 0;text-align: center;word-break: break-all;cursor: pointer;}
button.formbox-button-773753 {background-color: #21292d;border-width: 0;border-style: solid;border-color: #21292d;border-radius: 8px;color: #fff;display: inline-block;font-family: Helvetica, Arial, sans-serif;font-size: 14px;font-weight: 600;padding: 15px;margin: 10px 0;text-align: center;word-break: break-all;cursor: pointer;}
.formbox-editor-773753{background-color:#cc005f !important;width:350px !important;}
.formbox-title-773753{font-family:Helvetica, Arial, sans-serif !important;font-size:11px !important;font-weight:normal !important;color:#000000 !important;text-align:left !important;}
.formbox-button-773753{font-family:Helvetica, Arial, sans-serif !important;font-size:14px !important;font-weight:600 !important;color:#ffffff !important;background-color:#21292d !important;border-radius:2px !important;border-color:#21292d !important;border-width:0px !important;width:100% !important;border-style:solid;}
 #tdLogo773753 img{margin-botton:10px; max-width:230px;}
</style>
<script type="text/javascript">
function CheckField773753(fldName, frm){ if ( frm[fldName].length ) { for ( var i = 0, l = frm[fldName].length; i < l; i++ ) {  if ( frm[fldName].type =='select-one' ) { if( frm[fldName][i].selected && i==0 && frm[fldName][i].value == '' ) { return false; }  if ( frm[fldName][i].selected ) { return true; } }  else { if ( frm[fldName][i].checked ) { return true; } }; } return false; } else { if ( frm[fldName].type == "checkbox" ) { return ( frm[fldName].checked ); } else if ( frm[fldName].type == "radio" ) { return ( frm[fldName].checked ); } else { frm[fldName].focus(); return (frm[fldName].value.length > 0); }} }
function rmspaces(x) {var leftx = 0;var rightx = x.length -1;while ( x.charAt(leftx) == ' ') { leftx++; }while ( x.charAt(rightx) == ' ') { --rightx; }var q = x.substr(leftx,rightx-leftx + 1);if ( (leftx == x.length) && (rightx == -1) ) { q =''; } return(q); }
function checkfield(data) {if (rmspaces(data) == ""){return false;}else {return true;}}
function isemail(data) {var flag = false;if (  data.indexOf("@",0)  == -1 || data.indexOf("\",0)  != -1 ||data.indexOf("/",0)  != -1 ||!checkfield(data) ||  data.indexOf(".",0)  == -1  ||  data.indexOf("@")  == 0 ||data.lastIndexOf(".") < data.lastIndexOf("@") ||data.lastIndexOf(".") == (data.length - 1)   ||data.lastIndexOf("@") !=   data.indexOf("@") ||data.indexOf(",",0)  != -1 ||data.indexOf(":",0)  != -1 ||data.indexOf(";",0)  != -1  ) {return flag;} else {var temp = rmspaces(data);if (temp.indexOf(' ',0) != -1) { flag = true; }var d3 = temp.lastIndexOf('.') + 4;var d4 = temp.substring(0,d3);var e2 = temp.length  -  temp.lastIndexOf('.')  - 1;var i1 = temp.indexOf('@');if (  (temp.charAt(i1+1) == '.') || ( e2 < 1 ) ) { flag = true; }return !flag;}}
function _checkSubmit773753(frm){
if ( !isemail(frm["fldEmail"].value) ) { 
   alert("Por favor introduzca el Email");
   return false;
}
 return true; }
</script> 

<div align="center"> 

<div class="formbox-editor-773753" style="background: #fff; width: 320px;">

<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.benchmarkemail.com/Code/ThankYouOptin?language=spanish" /> 

<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="" />

<fieldset><div class="formbox-title-773753"></div></fieldset> 

<fieldset class="formbox-field-fname-773753"> 

<input type=text placeholder="Nombre" class="formbox-field-773753" name="fldfirstname" maxlength=100 /></fieldset> 

<fieldset class="formbox-field-email-773753"> 

<input type=text placeholder="Email *" class="formbox-field-773753" name="fldEmail" maxlength=100 /></fieldset>

<fieldset><button type="submit" id="btnSubmit" krydebug="1751" class="formbox-button-773753">Suscribirse</button></fieldset>

</form>

</div>
</div> 

 <!-- END: Signup Form Manual Code from Benchmark Email Ver 3.0 ------>
El código que usaremos y que nos interesa para la adaptación posterior es el que esta a continuacion, no te preocupes ya te explico como lo adecuaremos para nuestros fines. 



<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.benchmarkemail.com/Code/ThankYouOptin?language=spanish" /> 
<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="" />
<fieldset><div class="formbox-title-773753"></div></fieldset> 
<fieldset class="formbox-field-fname-773753"> 
<input type=text placeholder="Nombre" class="formbox-field-773753" name="fldfirstname" maxlength=100 /></fieldset> 
<fieldset class="formbox-field-email-773753"> 
<input type=text placeholder="Email *" class="formbox-field-773753" name="fldEmail" maxlength=100 /></fieldset>
<fieldset><button type="submit" id="btnSubmit" krydebug="1751" class="formbox-button-773753">Suscribirse</button></fieldset>
</form>

4. Descargar el paquete de formularios personalizados para MailChimp.
5. Escoger el formulario a implementar, para este caso voy a usar el No. 6 (Ver imagen) 
6. Añadir el códigos CSS del formulario escogido en nuestra plantilla o servidor.
7. Subir las imágenes a usar en el formulario y obtener su enlace.

 Para los pasos del 4 al 7 el codigo en HTML del formulario personalizado para MailChimp que usaremos seria el siguiente: 

 1. Código CSS que dará el estilo al formulario, colocarlo como parte del archivo style.css de nuestra plantilla.

 

#optin { margin: 0 auto 2em; overflow: hidden; text-align: center } 

#optin input { 

background: #fff url(images/input.png) repeat-x bottom; 

border: 1px solid #ccc; 

float: left; 

font-size: 14px; 

margin: 0 10px 10px 0; 

padding: 8px 10px; 

width: 200px; 

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(images/name.png) no-repeat 10px center; padding-left: 35px } 

#optin input.email { background: #fff url(images/email.png) no-repeat 10px center; padding-left: 35px } 

#optin input[type="submit"] { 

background: #217b30 url(images/green.png) repeat-x top; 

border: 1px solid #137725; 

color: #fff; 

cursor: pointer; 

float: left; 

font-size: 14px; 

font-weight: bold; 

padding: 3px 5px; 

text-shadow: -1px -1px #1c5d28; 

text-transform: uppercase; 

width: auto

} 

#optin input[type="submit"]:hover { color: #c6ffd1 } 

#optin span { background: url(images/lock.png) no-repeat center left; float: left; margin-left: 15px; padding-left: 20px }
Este es el código que vamos usar para dar estilo a nuestro formulario,
para ello se debe reemplazar lo escrito con rojo por las URL de las imágenes dadas en la descarga y subidas a nuestro servidor.
Si no dispones de servidor, copia el enlace de las imágenes que te dejo a continuación y reemplaza según su nombre.
1. https://dl.dropboxusercontent.com/s/14gf1ifoi7em5w8/name.png
2. https://dl.dropboxusercontent.com/s/qyld0tyso6zuwz4/email.png
3. https://dl.dropboxusercontent.com/s/2s0ojx1l2294efn/green.png
4. https://dl.dropboxusercontent.com/s/db38gp64b37oana/lock.png

2. Código HTML que mostrara el formulario en nuestro sitio web y que adaptaremos con Benchmarkemail.

 

<!-- Begin MailChimp Signup Form --> 
<div id="optin">
<form action="http://kolakube.us2.list-manage.com/subscribe/post?u=ba2d7d2ff28fe4f2581509340&amp;id=a355e20f0d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input type="email" size="30" value="Enter your email" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> 
<input type="text" size="30" value="Enter your name" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> 
<div id="mce-responses" class="clear"> 
<div class="response" id="mce-error-response" style="display:none"></div> 
<div class="response" id="mce-success-response" style="display:none"></div> 
</div>
<div class="clear"> 
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
<span>I take your privacy very seriously</span>
</div> 
</form> 
</div>

Este es el código HTML que adaptaremos con Benchmarkemail,
pero debemos cambiar todo lo que esta escrito con rojo para que se configure completamente.

 8. Adaptar el código HTML del formulario con Benchmarkemail con el código HTML del formulario personalizado para MailChimp.

 Teniendo ya los códigos listos procedemos a realizar la adaptación completa y que solo seria cambiar los códigos de MailChimp por los obtenido en Benchmarkemail de la siguiente manera:

 1. Buscamos la siguiente linea de código de MailChimp.

 

<form action="http://kolakube.us2.list-manage.com/subscribe/post?u=ba2d7d2ff28fe4f2581509340&amp;id=a355e20f0d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">

2. La cambiamos por la linea de código de Benchmarkemail.

 

<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.benchmarkemail.com/Code/ThankYouOptin?language=spanish" /> 

<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. Buscamos las etiquetas donde se ingresan los nombre y correo electrónico en MailChimp.

 

<input type="email" size="30" value="Enter your email" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> 

<input type="text" size="30" value="Enter your name" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">

4. Los reemplazamos por las etiquetas de Benchmarkemail.

 

<input type="email" size="30" value="Ingresa un email valido" name="fldEmail" class="required email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> 

<input type="text" size="30" value="Ingresa tu nombre" name="fldfirstname" class="name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">

5. Buscamos la etiqueta del botón enviar de MailChimp.

 

<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> <span>I take your privacy very seriously</span>

6. Reemplazamos por la obtenida con Benchamarkemail.

 

<input type="submit" value="Suscribirse Ahora" name="subscribe" id="btnSubmit" krydebug="1751" class="button"> <span>Tus datos están 100% seguros y no serán compartidos con nadie</span>

9. Copiar y pegar el nuevo código en el lugar que necesitamos en nuestra web/blog.

 Una vez realizado dichos cambios en el codigo HTML del formulario personalizado para MailChimp por el codigo obtenido por Benchmarkemail, ya podremos implementarlo en nuestro sitioweb y en el lugar que lo necesitemos.

 Este es el código HTML del formulario de suscripción completo ya adaptado para la herramienta de email marketing Benchmarkemail.

 

<!-- Begin Benchmarkemail Signup Form --> 

<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.benchmarkemail.com/Code/ThankYouOptin?language=spanish" /> 

<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 type="email" size="30" value="Ingresa tu email" name="fldEmail" class="required email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> 

<input type="text" size="30" value="Ingresa tu nombre" name="fldfirstname" class="name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> 

<div class="clear"> 

<input type="submit" value="Suscribete Ahora" name="subscribe" id="btnSubmit" krydebug="1751" class="button"> 

<span>Tus datos están 100% seguros y no serán compartidos con nadie</span> 

</div> 

</form>

</div> 

<!--End Benchmarkemail_signup-->
Recuerda que si decides emplear el código completo del formulario de suscripción que te presento, debes cambiar lo escrito con color rojo por los que tu datos obtenidos al crear un formulario básico con Benchmarkemail.com
10. Testeamos que todo este funcionando a la perfección.

 Cuando todo esta listo, colocamos el código HTML del formulario personalizado de suscripción donde lo necesitemos y lo probamos con una suscripción nueva.

 Como te podras dar cuenta yo lo tengo implementado al final de cada entrada y funcionando de maravilla.

 Espero que este formulario te sea de gran utilidad a la hora de gestionar tu lista de suscriptores y mas aun en el momento de crear tus campañas de email marketing automatizadas.
El proceso de adaptación es muy simple solo hay que tener bien claro que vamos a utilizar y que cambiar o eliminar para que la configuración funcione a la perfección. Si tienes problemas al implementarlo no dudes en escribirme.