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 uno de los 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.
Tabla de contenidos
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.
<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://luisforgiarini.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.
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.
[…] <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.
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.
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.
Y colocar el texto que tu quieras donde te marqué con rojo.
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).
Hecho esto, añadamos el texto dentro de la caja. Debes rastrear este código:
Ahora coloca el texto que tu quieras entre las comillas «».
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:
Y agregamos lo siguiente onFocus=»if (this.value==’Coloca Tu Mejor Correo’) this.value=»;». Debe quedarte así.
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:
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:
<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://luisforgiarini.com/pagina-salida» id=»successUrl»></dd>
</dl>
</form>
Luego de montarlo en el plugin ConvertPlug el formulario se ve como muestra la imagen siguiente:
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 🙂
4.5