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.

 

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 😉

¿Has visto ya el contenido de mi curso gratuito?

Compártelo si crees que puede ser de utilidad para otros. ¡Gracias!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp

CURSO GRATUITO

PARA EMPRENDEDORES ONLINE

Algunos emprendedores buscan la libertad encerrados en una cárcel diaria de tareas infinitas.

Otros entienden su web y ganan mucho dinero con ella.

No te vayas sin dejar tu comentario...

18 comentarios en “3 trucos sencillos para personalizar los formularios de Magic Action Box”

  1. Saludos, Omar

    Quería preguntarte si hay una forma de añadir a los formularios de MAB una casilla de verificación, ya sabes, para el tema de la RGPD. Ya adapté los formularios de contacto que uso pero con los de suscripción aún tengo la duda…

    Agradecido!

  2. Raúl Rojas

    Hola Omar.

    Muy buena esta tu web.

    Tengo una idea desde hace dias sobre colocar en mi web (home) un encabezado con un formulario de suscripción, el tipico formulario pss, ya uso Magic Action Box pero solo en el blog, la cuestión es que quiero usar ese mismo plugin en la home pero sabemos que no tiene muchos estilos a menos que toques CSS y con este post vi que si es posible.

    No quería tocar código pero será necesario para obtener lo que quiero.

    Gracias por la ayuda a través de este artículo.

    Éxitos.

  3. ¡Muchísimas gracias Omar!
    Está muy bien explicado para quienes, como yo estamos empezando y nos cuesta tratar con estos temas.
    ¡Saludos!

  4. Hola Omar:
    He estado viendo tus artículos y vídeos sobre Mailchimp y Magic Action Box y están muy bien explicados y me han servido mucho. Sólo comentarte q los css también se pueden editar o al menos yo lo hago así para los colores, en la sección de plugin hay un editor. Yo voy a escoger el rosa q está acorde con el color de mi sitio y no me gusta para nada.
    Un saludo.

  5. Hola, Omar.
    Genial tu artículo sobre el Plugin Magic Action Pro.
    Para mi fue todo un descubrimiento y una mejora sustancial en la captación de emails y estética de mi Blog.
    Es un plugin que vale su peso en oro.
    Pongo este artículo en favoristos para echarle un vistazo tranquilamente.
    Gracias!

    1. Omar de la Fuente

      Sin duda es un plugin de los llamados «imprescindibles». Hay otros, cada cual el que le guste pero desde luego hay que tener algo que mejore la estética de los formularios de suscripción, es básico.

      Escribiré otro más adelante, pues como bien dijo el compañero Said hay unas opciones para crear tu propio estilo a medida si no sabes nada de CSS. Más curro, pero más personalización.

      Un abrazo Javier.

  6. Hola Omar
    Muy buen truco para cambiar el estilo del formulario de suscripción, aunque hay otra forma de crear estilo personalizado desde Magic Action Box Stettings >> Styles & Buttons… Requiere más tiempo pero da muy buenos resultados, es lo que llevo haciendo yo desde que descubrí el plugin.

    Muchas gracias por el truco campeón.

    1. Omar de la Fuente

      Pues tiens toda la razón.

      La verdad es que nunca me había puesto a investigar esas opciones, por tonto dí por descontado que no se podrían aplicar si no era con la versión de pago, ¡pero ya veo que no!

      Efectivamente da más trabajo que partir de un estilo ya predefinido, pero desde luego también te da muchas más opciones.

      Muchas gracias Said, escribiré más a fondo sobre esto 😉 Un saludo.

  7. Harrison Cardozo

    Hola, Omar Saludos desde Venezuela.
    Me estoy iniciando en este mundo del marketing digital y redes sociales. tengo una duda quisiera a ver si me puedes echar una ayudadita.
    Quiero saber la diferencia un boletín electrónico y un autorespondedor. porque quiero empezar a ganar suscriptores y en verdad no se como hacer y por donde empezar.
    En verdad te felicito por tus aportes.
    sin mas saludos. gracias

    1. Omar de la Fuente

      Un boletin es lo que se conoce como Newsletter, es decir, un email con los nuevos contenidos de tu blog, el cual puede ser enviado de forma automática o manual.

      Un autorespondedor es un email que se envía de forma automática cuando una persona se suscribe, pasa un determinado tiempo X desde su suscripción o el usuario ejecuta alguna acción determinada (evento).

      Con eso respondo a tu pregunta concreta pero no te puedo dar una disertación sobre cómo ganar suscriptores y por dónde empezar. Te recomiendo dar una vuelta y echar un vistazo en la página de «los mejores contenidos del blog» a ver si encuentras material que te pueda servir de ayuda.

      Un saludo.

  8. Hola Omar

    Me gustó mucho el tutorial.

    Instalé el plugin pero aún no me animo a configurarlo y ponerlo en mis entradas.

    Creo que con esto ha llegado el momento 🙂

    saludos

  9. Andaba dándole vueltas a la idea de mejorar mi formulario de suscripción, ahora que leí tu artículo veo que valió la espera. Considero que una parte de la motivación para que los lectores se animen a suscribirse es que el diseño del formulario luzca bien.

    Y gracias por el tiempo para la sorpresa de la próxima semana.

    Saludos.

  10. Edmundo Pérez

    Hola Omar.

    Interesante todo, yo deje de usar el plugin precisamente porque no encontré un artículo como éste para configurarlo más que lo básico que éste contiene, opté por popup ninja y popup domination.

    Una duda, éstos trucos son geniales para adaptarlos a nuestros blogs, pero tengo una duda (no es técnica, que conste), ¿qué otros plugins similares has usado y porqué recomiendas éste respecto a otros? Para descartarlos 🙂

    Un saludo y gracias, el artículo va directo a evernote.

    1. Omar de la Fuente

      Hola Edmundo,

      pues antes de este probé Optin Skin y otro de WPMU que no recuerdo el nombre exacto.

      Con los otros probé lo del famoso popu-up, pero me sigue pareciendo una técnica… que no me convence vaya, y los acabé quitando.

      Con la gratuita de Magic Action Box no tengo el popup (ni lo quiero) pero quedan unos formularios chulos y fáciles de colocar donde los necesito, simplemente por eso 😉

      Un saludo y gracis a ti por comentar.

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.

Ir arriba
foto_Omar_Zoom

¿Tienes que irte ya?

Ok… pero no te vayas con las manos vacías.

Tengo un regalo para ti.

MI CURSO GRATUITO PARA EMPRENDEDORES ONLINE

megafono.png
#UNTRAININGDIFERENTE
Días
Horas
Minutos
Segundos

¿Ya tienes que irte?

Ok, pero échale un vistazo a esto, aún estás a tiempo.

VIDEO #1 [01/09/2020]

La gran oportunidad que nos ofrece hoy en día Internet
(sabiendo cómo aprovecharlo)

VIDEO #2 [03/09/2020]

Por qué parece tan complicado tener una web y un proyecto
(y porqué no debería serlo)

VIDEO #3 [07/09/2020]

El camino se hace mucho más sencillo si estás acompañado
(montamos el puzzle de tu web)

Cómo tener una web efectiva que convierta a tus lectores en suscriptores y clientes

megafono.png
#UNTRAININGDIFERENTE
Días
Horas
Minutos
Segundos