Guía: Mostrar un formulario de Mautic en dos columnas

Renato Carabelli
octubre 16, 2025
Automatización de Marketing
0 Comentarios

1) Qué haremos (resumen)

En cada Campo del formulario → pestaña Attributes → Field container attributes, agregar class="half" a los campos que irán lado a lado y class="full" a los que deben ocupar todo el ancho (textarea, mensaje, botón de enviar).
Agregar un bloque corto de CSS que convierte el formulario en una grilla de 2 columnas y respeta esas clases.
Colocar el CSS en la página de destino de Mautic (ya sea de forma inline o en el tema), o en la página externa (para incrustaciones mediante JavaScript). En el caso de incrustaciones mediante iframe, el CSS debe incluirse en el tema de Mautic.

2) Añadir clases a los campos

Para cada campo del formulario:

Abre el campo → Attributes → Field container attributes.
Escribe:
- class="half" → campos que compartirán la fila (Nombre, Apellido, Email, Teléfono…).
- class="full" → campos de ancho completo (Empresa, Mensaje, Consentimiento, Submit).

Mautic envuelve cada campo en un .mauticform-row.

Al poner class="half" o class="full", quedará por ejemplo:

<div class="mauticform-row half"> … </div>
qué es lo que el CSS usará para armar las columnas.

Ejemplo de disposición:

Nombre → class="half"
Apellido → class="half"
Email → class="half"
Teléfono → class="half"
Empresa → class="full"
Mensaje (textarea) → class="full"
Enviar (Submit) → class="full"

3) Encontrar el <alias> del formulario

Inspecciona el contenedor externo del formulario, se verá así:

<div id="mauticform_wrapper_exampleform" class="mauticform_wrapper"> … </div>

Aquí, el alias es exampleform. Cada formulario de Mautic tiene un identificador único (alias), que aparece en el HTML como parte del id del contenedor principal.

Cómo encontrarlo fácilmente:

Abre la página donde se muestra tu formulario (en una Landing Page o embebido).
Haz clic derecho sobre el formulario y elige “Inspeccionar” o “Inspeccionar elemento” (en Chrome, Edge o Firefox).
En el panel de código que se abre, busca una línea similar a esta:
<div id="mauticform_wrapper_exampleform" class="mauticform_wrapper">
El texto que aparece después de mauticform_wrapper_ es el alias de tu formulario.
En este ejemplo, el alias es: exampleform.
Anótalo, porque lo necesitarás para personalizar el CSS en el siguiente paso.

Este alias será necesario en el siguiente paso para personalizar el CSS del formulario, ya que lo usaremos para acotar el alcance de los estilos y evitar que afecten a otros formularios.

4) Pegar el CSS (3 ubicaciones posibles)

Opción A — Landing Page (sin acceso a archivos)

Agrega un bloque Código / HTML al inicio de la landing y pega:

<style>
/* Reemplaza <alias> por el alias real del formulario (ver paso 3) */
#mauticform_wrapper_<alias> .mauticform-innerform { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 20px; }
/* Half = dos columnas; Full = ocupa ambas */
#mauticform_wrapper_<alias> .mauticform-row.half { grid-column:auto; }
#mauticform_wrapper_<alias> .mauticform-row.full,
#mauticform_wrapper_<alias> .mauticform-row.mauticform-row--buttons { grid-column:1 / -1; }
/* Móvil: apilar en una sola columna */
#mauticform_wrapper_<alias> .mauticform-page-wrapper { grid-template-columns:1fr; } }
</style>

Opción B — Sitio externo (embed por JS)

Pega el mismo
<style>…</style>
en el CSS de tu sitio (o en el header global). El JS embed inserta el formulario en tu DOM, por lo que tu CSS lo afectará.

Opción C — Iframe embed

El CSS de tu sitio no alcanza el contenido del iframe. Coloca el CSS en el theme de la Landing Page de Mautic (por ejemplo, /themes/<tu theme>/css/theme.css). Luego borra caché y publica.

5) Checklist de solución de problemas

Todo sigue en una columna:
- Si es embebido, confirma que usas JS embed (no iframe).
- Si es iframe, mueve el CSS al theme de Mautic.
- Aumenta la especificidad del selector (mantén #mauticform_wrapper_<alias>).
- Verifica si tu theme usa frameworks (Bootstrap, etc.). Nuestras clases son .mauticform-row, por lo que rara vez chocan con .row.
El CSS “no agarra” en una Landing Page:
- Asegúrate de que el bloque <style> realmente se renderiza (ponlo encima del formulario).
- Si editaste archivos del theme, borra la caché de Mautic (Configuración → Mantenimiento).
El botón Enviar no queda a ancho completo:
- Añade class="full" al botón y/o deja la regla de seguridad para .mauticform-row–buttons.
Espaciado entre etiqueta e input:

Ajusta con:
#mauticform_wrapper_ .mauticform-label { margin-bottom: 6px; display:block; }

Accesibilidad:
- En móvil, apila a una columna (ya lo hace el CSS). Mantén visibles las etiquetas.

6) Resultado final

Así debería verse tu formulario después de aplicar las clases y el CSS:

Los campos con class="half" se alinean en dos columnas, mientras que los class="full" ocupan todo el ancho.

7) Notas de versión / themes

Funciona en Mautic v4+ (incluye v5/v6) porque se apoya en la estructura estable .mauticform-*.
Si tu theme minifica/agrupa CSS/JS, borra caché tras los cambios.

¡Listo!

Con esto tendrás formularios de Mautic en dos columnas, responsivos y sin hacks, tanto en Landing Pages como embebidos.

Guía: Mostrar un formulario de Mautic en dos columnas

1) Qué haremos (resumen)