3 trucos sencillos para personalizar los formularios de Magic Action Box

¿Te gustaría aprender a personalizar tus formularios de Magic Action Box más allá de los estilos que vienen como predeterminados?

Hoy te voy a enseñar 3 trucos muy sencillos, los cuales de por sí ya mejoran el aspecto de los formularios pero lo más importante es que si coges el tema de las clases de CSS, en realidad podrías moldear a tu gusto absolutamente cualquier parte del formulario.

Lo que vamos a ver es esto:

  • Cómo cambiar el color y tamaño del titulo (main heading)
  • Cómo cambiar el color del fondo
  • Cómo cambiar el color del botón de aceptar
  • Bonus: cómo eliminar el molesto campo vacío

Tocando los formularios de Magic Action Box

NOTA: todo lo que te voy a relatar por escrito, lo puedes ver y ampliado en el video.

YouTube video

 

El tema está en que en la versión gratuita hay muchas opciones y cosas que no puedes hacer respecto de la versión de pago, esto obvio.

Peeero, si que se pueden alterar algunas y personalizarlo a nuestro gusto, mediante código CSS.

Hay dos formas de aplicar código CSS para modificar nuestro formulario:

  1. Directamente en los campos de inserción de texto
  2. En el último recuadro de «Custom CSS»

Insertar HTML y CSS en los campos

Podemos insertar etiquetas HTML y código CSS embebido en campos como el «main heading» o cualquier otro.

Es de esta forma como modifico las características del titulo, por ejemplo, poniéndole una etiqueta H1.

Sólo con esto, el titulo ya tomará las características que tenga la etiqueta H1 en mi «style.css» del tema, es decir, tendrá el tamaño, color y alineación del resto de H1 de la plantilla.

Esto está bien, porque da homogeneidad y así no tienes tipografías distintas dentro del formulario de las de tu sitio web. Pero puedes ir más allá.

Mediante CSS «directo», podríamos aplicarle más características concretas a ese titulo sólo. Por ejemplo, imagina que quieres el color y tamaño de los H1 de todo el sitio, ok, pero quieres que concretamente el titulo del formulario tenga alineación centrada.

Todos los H1 de tu web no tendrán esa carcaterística, por lo que se lo puedes indicar específicamente para ese titulo, así:

<h1 style=»text-align:center;»>¡Suscríbete gratis!</h1>

Ojo, esto tiene un problema que explico ampliamente en el video: el plugin tiene un «bug», un error de programación, que hace que cuando metemos código en los campos de escritura, cuando guardamos y volvemos a editarlos otra vez, esos campos se trastornan y hay que volver a escribirlo, de lo contrario, si modificas otra cosa y guardas sin arreglar eso, todo el formulario se desconfigura.

Insertar CSS en el «Custom CSS»

Dentro de la edición de vuestro Action Box, abajo del todo tenemos un área de texto llamado «Custom CSS» donde podréis incluir vuestro código CSS personalizado.

Desde aquí, podremos indicar nuevos atributos a las clases que controlan el fondo del formulario o el botón de aceptar, que son las dos cosas que pienso que más nos interesan para modificar el aspecto visual de nuestro formulario.

Mediante Web Developer o Firebug, o cualquier otro programa que utilices similar, se pueden averiguar las clases CSS que aplican a cada cosa del formulario.

Yo ya he hecho este trabajo para el fondo y el botón, y te digo que las clases son:

.mab-wrap (es el contenedor del formulario, con esto controlas el fondo y los bordes, etc)

.mabstyle-default.magic-action-box form input[type=»submit»] (esto controla el botón del estilo Default)

.mabstyle-default.magic-action-box form input[type=»submit»]:hover (y esto otro el estado «sobre el botón» del estilo Default)

Es importante tener en cuenta que dependiendo del estilo predeterminado que estemos utilizando variarán las clases a modificar.

La clase .mab-wrap esa si que es común a todos los estilos.

Los estilos predeterminados que nos ofrece en la versión gratuita son:

  • Default (en grises)
  • Dark (más oscuro)
  • Royalty (en azul)
  • Pink (en rosa chicle)

Para el estilo Default, ves que pone en las clases «.mabstyle-default.magic-action-box«, bueno pues para el resto de estilos es lo mismo, pero sustituyendo «default» por «dark», «royalty» o «pink». Sencillo.

Es con estas técnicas con las que personalizo mis formularios, como este:

formularios-de-magic-action-box

El campo vacío que a veces aparece

Me ha pasado a veces y por lo visto a algunos lectores también, que al copiar el código de MailChimp a un Action Box luego en pantalla aparece un campo de inserción de texto, como pueden ser el de «Nombre» o «Email» pero sin etiqueta, como suelto por ahí.

Dicho campo creo que es por un tema de seguridad anti-robots (no me hagas mucho caso) pero el tema es que es un poco absurdo y no lo queremos, por lo que hay que eliminarlo.

Por suerte es muy fácil, en el video verás muy claro donde es pero ya te digo que es el DIV que hay justo antes del botón de «submit» dentro del código.

Para no liarla, te recomiendo hacer una copia de todo el texto del código a un .txt antes de borrar nada, no vaya a aser que telo cargues y quieras volver a como estabas.

Tienes ese mismo código en MailChimp siempre, pero bueno, yo lo veo más cómodo.

La inserción de una imagen o video en el formulario

No he querido entrar en esto en este post, pero lo dejo pendiente para otro que sirva de ampliación a este. Prometido.

Concluyendo

Y hasta aquí este post sobre cómo personalizar tus formularios con Magic Action Box. Obviamente no he tocado toooodo lo que se podría configurar del formulario, pero eso ya os lo dejo a vosotros para que investigueis qué atributos CSS se tendrían que modificar para alterar otras partes del mismo.

Dos cosas antes de terminar, que me las sé de otros post de este estilo:

  1. No voy a contestar preguntas técnicas concretas en los comentarios, del tipo «¿cómo podría entonces cambiar el color de los bordes?«. Que no te siente mal, mi tiempo es limitado y hago lo que puedo compartiendo estas cosas, pero no puedo entrar en investigar solicitudes puntuales de cada lector. Espero lo comprendas.
  2. Tienes no obstante otros artículos para profundizar en CSS y complementar esto: https://www.haciaelautoempleo.com/css-basico/

Por último: si te ha gustado este artículo, te ha sido útil y crees que puede serlo para otras personas, compártelo y gánate un +1 en el karma cósmico de la red 😉

5/5 - (1 voto)

¿Te gustaría autoemplearte y trabajar desde casa pero no sabes por dónde empezar?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Responsable » Omar de la Fuente Prieto (servidor)
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de Haciaelautoempleo) dentro de la UE. Ver política de privacidad de Webempresa. (https://www.webempresa.com/aviso-legal.html).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

Scroll al inicio

UNA PREGUNTA RÁPIDA

¿Tienes ya una página web propia?