Como Editar Codigo HTML de Formulario de Suscripcion – Mailrelay

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.

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.

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.

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:

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 🙂