En este post veremos como editar el código HTML de un formulario de suscripción de Mailrelay. Pero lo que aprenderás aquí podrás aplicarlo para cualquier formulario, no solo los de Mailrelay. Va a ser un artículo corto, apto para vagos de la lectura.. jejej

Mailrelay es para mi el autoresponder que mejores prestaciones brinda en su cuenta Free, pero tiene sus debilidades. Tal vez el principal problema es su dificultosa integración con plugis para WordPress. No son muchos los plugins que permiten la integración vía api, pero si hay mucho que podemos integrar usando su código HTML. Algunos de los plugins que permiten la integración vía HTML inhabilitan sus funciones de edición de formulario dejando que las mismas deban hacerse del lado del código. Como ejemplos puedo nombrarte; ConvertPlug, Rapydology, Bloom.

Al usar algunos de esos plugins me surgió la necesidad de editar el código HTML del formulario de suscripción de Mailrelay.

Edición Código HTML de Formulario de Suscripción – Mailrelay

Comencemos por tomar un código HTML tal cual nos da Mailrelay. El mismo lo obtuve creando un formulario personalizado (si no sabes como hacerlo ve este tutorial). Usaré el plugin ConvertPlug para montar dicho formulario. En dicho formulario solo pido el correo, e incluí una página de salida.

<p>Rellene el siguiente formulario para suscribirse.</p>
<form enctype=”application/x-www-form-urlencoded” action=”https://luisforgiarini.ip-zone.com/ccm/subscribe/index/form/flhiyu9roi” method=”post”>
<dl class=”zend_form”>
<dt id=”groups-label”> </dt>
<dd id=”groups-element”>
<input type=”hidden” name=”groups[]” value=”2″></dd>
<dt id=”email-label”>
<label for=”email” class=”required”>Email</label>
</dt>
<dd id=”email-element”>
<input type=”text” name=”email” id=”email” value=””></dd>
<dt id=”submit-label”> </dt>
<dd id=”submit-element”>
<input type=”submit” name=”submit” id=”submit” value=”Suscribir”></dd>
<dt id=”anotheremail-label”> </dt>
<dd id=”anotheremail-element”>
<input type=”text” name=”anotheremail” id=”anotheremail” value=”” style=”position: absolute; left: -5000px” tabindex=”-1″></dd>
<dt id=”successUrl-label”> </dt>
<dd id=”successUrl-element”>
<input type=”hidden” name=”successUrl” value=”https://luisforgiariniblog.com/pagina-salida” id=”successUrl”></dd>
</dl>
</form>
<p> <a href=”http://mailrelay.com” target=”_blank”>enviar newsletter</a> by Mailrelay </p>

Al insertar dicho formulario en ConvertPlug , el mismo se ve de la siguiente manera.

Editar codigo HTML de formulario de suscripcion Mailrelay

La apariencia del formulario no es muy buena, muchos posibles suscriptores se espantarán.. jeje. Con las ediciones del código que realizaré modificaremos lo siguiente:

  • Borrar textos que sobran. Como “Rellene el siguiente formulario para suscribirse”.
  • Cambiar de color al botón de suscripción.
  • Cambiar el texto del botón.
  • Colocar texto dentro de la caja de suscripción.
  • Borrar el texto de la caja cuando se haga click.
  • Abrir la pagina de salida en una nueva ventana.

De seguro habría algunas otras cosas para modificar el formulario, pero bueno eso es lo que he hecho yo.. jeje. Si conoces otros trucos luego me los pasas en los comentarios 😉

Borrando Textos De Sobra

Empezamos por lo más fácil, creo que podrías hacerlo sin mi ayuda pero bueno no me cuesta nada escribirlo.. jejje. Te marcaré en rojo lo que debes borrar.

<p>Rellene el siguiente formulario para suscribirse.</p>
[…] <dt id=”anotheremail-label”> </dt>
<dd id=”anotheremail-element”>
<input type=”text” name=”anotheremail” id=”anotheremail” value=”” style=”position: absolute; left: -5000px” tabindex=”-1″></dd>
[…] <p> <a href=”http://mailrelay.com” target=”_blank”>enviar newsletter</a> by Mailrelay </p>

Elimine dos textos que sobran, al inicio y final. Y ademas un campo (anotheremail) que no tiene utilidad para el caso.

Cambiar De Color El Botón De Suscripción

Ahora haremos algo crucial, cambiar el color del botón de suscripción. Es un pequeño detalle que influye mucho en el porcentaje de suscriptores que tendrá tu formulario.

Debes buscar la siguiente línea de código.

<input id=”submit” name=”submit” type=”submit” value=”Suscribir” /></dd>

Y añadir dentro de ella el siguiente atributo: style=”background-color: #FF8B00″. Donde #FF8B00 será el color que tu elijas, en este caso es naranja.

<input id=”submit” style=”background-color: #FF8B00″ name=”submit” type=”submit” value=”Suscribir” /></dd>

Como consejo te puedo decir que según estadísticas los colores que mejor funcionan son el naranja y amarillo. 😉

Cambiar Texto De Botón

Esta edición del código HTML de formulario es facilísima, solo debes tomar la misma línea de código anterior.

<input id=”submit” style=”background-color: #FF8B00″ name=”submit” type=”submit” value=”Suscribir” /></dd>

Y colocar el texto que tu quieras donde te marqué con rojo.

<input id=”submit” style=”background-color: #FF8B00″ name=”submit” type=”submit” value=”Suscríbete!!!” /></dd>

Colocar Texto En Caja De Suscripción

Si estuviste atento cuando te mostré como se ve el código HTML del formulario original que da Mailrelay, habrás visto que no hay texto dentro de la caja de suscripción. Sino que el texto (Email) se encuentra sobre la caja, eso a mi no me gusta, y voy a cambiarlo.

Primero eliminemos el texto Email que esta sobre la caja. Para ello busca la siguiente línea y elimina el texto (en rojo).

<label for=”email” class=”required”>Email</label>

Hecho esto, añadamos el texto dentro de la caja. Debes rastrear este código:

<input type=”text” name=”email” id=”email” value=“”></dd>

Ahora coloca el texto que tu quieras entre las comillas “”.

<input type=”text” name=”email” id=”email” value=“Tu Mejor Correo”></dd>

Borrar Texto De caja De Suscripción Con Un Click

Seguro alguna vez rellenaste un formulario en el cual antes de cargar tus datos tuviste que borrar el texto dentro de la casilla. Por ejemplo tuviste que borrar el texto “NOMBRE”, para escribir el tuyo en su lugar. No se a ti, pero eso a mi me molesto. Lo que haré aquí es hacer que el texto se borre cuando hagas click en la casilla.

Para lograr ese efecto volvemos al último código:

<input type=”text” name=”email” id=”email” value=“Tu Mejor Correo”></dd>

Y agregamos lo siguiente onFocus=”if (this.value==’Coloca Tu Mejor Correo’) this.value=”;”. Debe quedarte así.

<input type=”text” name=”email” id=”email” value=“Tu Mejor Correo”  onFocus=”if (this.value==‘Tu Mejor Correo’) this.value=”;”></dd>

El texto que va dentro de la caja debe coincidir con el del atributo onFocus, de lo contrario el truco no funcionará. 😉

Abrir Página de Salida En Una Nueva Ventana

Terminamos con algo tan útil como fácil de editar en el código HTML de un formulario de suscripción. Hacer que que la página de salida se abra en una nueva ventana.

Esto lo lograremos añadiendo el atributo target=”_blank”. Lo importante es que lo añadas en la apretura de la etiqueta <form> al inicio, como veremos a continuación:

<form enctype=”application/x-www-form-urlencoded” action=”https://luisforgiarini.ip-zone.com/ccm/subscribe/index/form/flhiyu9roi” method=”post” target=”_blank”>

Fácil no?? 😉

Resultado Final Del Código HTML de Formulario De Suscripción

Bueno ya vimos todo lo que te prometí en lo que respecta a edición del código HTML del formulario de suscripción de Mailrelay. Solo queda que te muestre los resultados, para ello primero te dejo el código editado completo:

<form enctype=”application/x-www-form-urlencoded” action=”https://luisforgiarini.ip-zone.com/ccm/subscribe/index/form/flhiyu9roi” method=”post” target=”_blank”>
<dl class=”zend_form”>
<dt id=”groups-label”> </dt>
<dd id=”groups-element”>
<input type=”hidden” name=”groups[]” value=”2″></dd>
<dt id=”email-label”>
<label for=”email” class=”required”></label>
</dt>
<dd id=”email-element”>
<input type=”text” name=”email” id=”email” value=”Tu Mejor Correo” onFocus=”if (this.value==’Tu Mejor Correo’) this.value=”;”></dd>
<dt id=”submit-label”> </dt>
<dd id=”submit-element”>
<input style=”background-color: #FF8B00″ type=”submit” name=”submit” id=”submit” value=Suscribete></dd>
<dt id=”successUrl-label”> </dt>
<dd id=”successUrl-element”>
<input type=”hidden” name=”successUrl” value=”https://luisforgiariniblog.com/pagina-salida” id=”successUrl”></dd>
</dl>
</form>

Luego de montarlo en el plugin ConvertPlug el formulario se ve como muestra la imagen siguiente:

Editar codigo HTML de formulario de suscripcion - Mailrelay

Personalmente creo que ha mejorado bastante. 🙂 Pero bueno como te dije cuando empece esta edición del código HTML del formulario, si conoces otros trucos pásamelos. Puedes dejarlos en los comentarios.

Con esto doy por terminado el artículo. Si te sirvió compártelo que no cuesta nada 🙂

 

 

¿Cansado que tu Blog no funcione?

 

Si es así suscríbete para recibír GRATIS el Ebook "Como Crear Un Blog Perfecto Sin Meter La Pata". Con el aprenderás todos los secretos para tener el blog de tus sueños. :)

 

 

Además te envio como BONUS TRACK la Guía SEO Oficial De Google.

You have Successfully Subscribed!

Shares
Share This