El diseño estándar de Contact Form 7 es una columna vertical de campos. Nombre, correo electrónico, asunto, mensaje, apilados uno debajo del otro, estirados a todo el ancho. Se ve tosco y ocupa espacio en pantalla, sobre todo cuando tiene más de tres campos.

Pero este es el detalle: el editor de CF7 entiende HTML. Esto significa que usted puede envolver los campos en contenedores div, definir su ancho y alinearlos en una fila. Sin plugins, sin trucos, solo CSS puro.

A continuación, dos métodos funcionales para organizar los campos de Contact Form 7 en 2, 3 o 4 columnas. El primero es universal (HTML + CSS), el segundo usa el sistema de shortcodes de su tema. Ambos han sido probados en sitios activos y no rompen el diseño en dispositivos móviles.

💡 Resumen rápido:

• Vea cómo luce un formulario CF7 por defecto y por qué el diseño vertical es problemático
• Copie el CSS flexbox listo para usar y péguelo en su tema hijo (método 1, sin plugins)
• Si su tema ya admite shortcodes de columnas, actívelos en CF7 y envuelva sus campos (método 2)
• Pruebe el resultado en escritorio y móvil (se incluye media query)

Cómo luce un formulario de Contact Form 7 por defecto

Después de crear un formulario mediante «Contacto» → «Añadir nuevo», obtiene un marcado estándar: campos de texto, correo electrónico, mensaje y un botón de envío, estrictamente apilados uno debajo del otro. En el editor se ve así:

En el frontend, con TwentySeventeen o cualquier otro tema sin estilos de formulario personalizados, la salida será vertical:

Los campos «Nombre» y «Correo electrónico» ocupan todo el ancho disponible, aunque con la mitad bastaría para cada uno. El resultado: el formulario se ve voluminoso, los usuarios hacen más scroll del necesario y las conversiones caen.

El editor de CF7 está diseñado para aceptar marcado HTML dentro de la plantilla del formulario. Eso es exactamente lo que usaremos.

Método 1: HTML + CSS flexbox (recomendado)

El enfoque: envuelva los campos del formulario en elementos <div> con clases CSS de columna, luego defina esas clases una sola vez en su tema hijo o mediante un plugin de CSS personalizado.

No necesita plugins de columnas adicionales, solo CF7 y unas pocas líneas de CSS.

Cuadrícula CSS para 2 y 3 columnas

A continuación encontrará CSS listo para usar con flexbox. A diferencia de las soluciones basadas en float, flex alinea automáticamente las columnas por altura y no requiere trucos de clearfix:

1
/* Column row */
2
.cf7-row {
3
    display: flex;
4
    flex-wrap: wrap;
5
    gap: 4%;
6
    margin-bottom: 16px;
7
}
8
 
9
/* 2 columns */
10
.cf7-col-2 {
11
    flex: 0 0 48%;
12
}
13
 
14
/* 3 columns */
15
.cf7-col-3 {
16
    flex: 0 0 30.66%;
17
}
18
 
19
/* Mobile: columns stack vertically */
20
@media only screen and (max-width: 767px) {
21
    .cf7-col-2,
22
    .cf7-col-3 {
23
        flex: 0 0 100%;
24
    }
25
}

Coloque el CSS en su tema hijo (archivo style.css) o mediante el plugin Simple Custom CSS, que añade un campo de estilos en el panel de administración sin necesidad de editar archivos.

Marcado dentro de CF7

Abra el editor de formularios (Contacto → su formulario) y envuelva los campos en contenedores div con las clases CSS anteriores. Para 2 columnas:

1
<div class="cf7-row">
2
  <div class="cf7-col-2">
3
    <label>Your name (required)
4
      [text* your-name]
5
    </label>
6
  </div>
7
  <div class="cf7-col-2">
8
    <label>Your Email (required)
9
      [email* your-email]
10
    </label>
11
  </div>
12
</div>
13
 
14
<label>Your message
15
  [textarea your-message]
16
</label>
17
 
18
[submit "Send"]

En el sitio, el resultado se verá así:

Tres columnas, la misma lógica

Para tres campos en una fila, cambie las clases a cf7-col-3 y añada un tercer bloque:

1
<div class="cf7-row">
2
  <div class="cf7-col-3">
3
    <label>Your name (required)
4
      [text* your-name]
5
    </label>
6
  </div>
7
  <div class="cf7-col-3">
8
    <label>Your Email (required)
9
      [email* your-email]
10
    </label>
11
  </div>
12
  <div class="cf7-col-3">
13
    <label>Subject
14
      [text your-subject]
15
    </label>
16
  </div>
17
</div>
18
 
19
<label>Your message
20
  [textarea your-message]
21
</label>
22
 
23
[submit "Send"]

Salida en el frontend:

Los campos «Nombre», «Correo electrónico» y «Asunto» ahora se alinean en una sola fila, mientras que el mensaje ocupa todo el ancho debajo de ellos. En pantallas de menos de 767 px, todas las columnas se apilan en una sola, lo que mantiene el formulario legible en teléfonos.

La ventaja de flexbox: si las alturas de los campos difieren (por ejemplo, una etiqueta larga en una columna), la fila no se rompe. Flex alinea las columnas automáticamente. Las maquetaciones basadas en float no pueden lograr esto sin recurrir a trucos como clearfix y margin-right.

Método 2: columnas mediante shortcodes del tema

Algunos temas de WordPress, especialmente los comerciales como GeneratePress, Kadence y Astra, incluyen un sistema de shortcodes para columnas. Suele aparecer como un botón en el editor que genera shortcodes del tipo [one_half]...[/one_half] o [column grid="6"]...[/column].

Si su tema lo admite, puede crear columnas en CF7 sin CSS. No obstante, necesita permitir que CF7 procese los shortcodes dentro del formulario, ya que por defecto los ignora.

Paso 1: habilitar los shortcodes en el editor de CF7

Instale el plugin Contact Form 7 Shortcode Enabler. Es mínimo, pesa unos pocos kilobytes y hace exactamente una cosa: pasar los shortcodes a través de CF7.

Alternativa sin plugin: añada un filtro al archivo functions.php de su tema hijo:

1
add_filter('wpcf7_form_elements', 'cf7_do_shortcode');
2
 
3
function cf7_do_shortcode($form) {
4
    return do_shortcode($form);
5
}

Paso 2: envolver los campos con shortcodes de columna

El principio es el mismo que con las clases div, pero en lugar de clases CSS utiliza los shortcodes del tema. El botón para generarlos suele encontrarse en el editor visual de WordPress:

Genere los shortcodes para el número de columnas deseado e inserte el contenido:

Salida en la página:

Ahora transfiera los shortcodes al editor de CF7. Para 2 campos en una fila:

1
[one_half]
2
<label>Your name (required)
3
  [text* your-name]
4
</label>
5
[/one_half]
6
 
7
[one_half_last]
8
<label>Your Email (required)
9
  [email* your-email]
10
</label>
11
[/one_half_last]
12
 
13
<label>Your message
14
  [textarea your-message]
15
</label>
16
 
17
[submit "Send"]

El resultado en el frontend son las mismas dos columnas que en el método 1. Este enfoque es conveniente cuando su tema ya tiene shortcodes para cuadrículas: no necesita CSS y la adaptabilidad funciona de inmediato.

La desventaja: queda atado a su tema. Si cambia de tema, las columnas del shortcode desaparecen y su formulario se rompe. El método 1 con CSS se transfiere entre cualquier tema.

Video: configuración paso a paso de un formulario en varias columnas

Un recorrido detallado en video en inglés donde el autor demuestra ambos enfoques, incluyendo la configuración de flexbox y la adaptación móvil:

⁉️🤔 Preguntas frecuentes

¿El marcado flexbox funciona en navegadores antiguos?

Flexbox ha sido compatible con todos los navegadores modernos durante más de diez años: Chrome, Firefox, Safari y Edge tienen compatibilidad completa sin prefijos a partir de versiones lanzadas en 2015-2016. La única excepción es Internet Explorer 11, donde flexbox funciona con errores menores y requiere el prefijo -ms-, pero la cuota de tráfico global de IE11 ha caído por debajo de la significación estadística. Para sitios en producción, es seguro usar flexbox sin prefijos.

¿Puedo tener diferente número de columnas en distintas filas del formulario?

Sí. El contenedor flexbox .cf7-row aísla cada fila: puede contener 2, 3 o 4 columnas, mientras que la siguiente fila tiene una combinación diferente. Por ejemplo, la primera fila tiene nombre + correo electrónico (2 columnas), la segunda tiene empresa + teléfono + ciudad (3 columnas) y la tercera tiene un mensaje que abarca todo el ancho. Solo asegúrese de cerrar un .cf7-row antes de abrir el siguiente.

¿Qué pasa si las etiquetas de los campos tienen diferentes longitudes y las columnas se desplazan?

En una fila flexbox, las columnas se estiran hasta la altura de la más alta por defecto. Esto se habilita explícitamente con align-items: stretch (activo por defecto en el código anterior). Si las etiquetas aún parecen visualmente desalineadas, establezca una altura fija para la etiqueta con label { min-height: 48px; display: block; } dentro del formulario.

¿Necesito habilitar shortcodes para el método 1 con CSS?

No. El método 1 usa HTML puro (contenedores div con clases), y CF7 transmite el marcado HTML sin complementos adicionales. El plugin Shortcode Enabler solo es necesario para el método 2, donde se usan columnas de shortcode del tema dentro del formulario.

¿Qué pasa si mi tema usa Gutenberg en lugar de shortcodes?

Las columnas de Gutenberg funcionan a nivel de página/entrada, pero no dentro del editor de CF7. El formulario de CF7 en sí se inserta mediante el shortcode [contact-form-7 id="..." title="..."] en una página, y Gutenberg no controla la disposición de los campos en su interior. Para columnas dentro del formulario, use el método 1 (CSS flexbox), que es compatible con cualquier editor.

¿Vale la pena el esfuerzo de configurar columnas?

Un formulario de una sola columna funciona. Un formulario de dos columnas funciona y recoge más envíos porque se ve más ordenado y requiere menos desplazamiento. La diferencia de conversión puede parecer trivial a primera vista, pero con el tiempo suma decenas de clientes potenciales.

El método flexbox resuelve completamente el problema: 15 líneas de CSS, 5 minutos de configuración, cero plugins. No está atado a ningún tema, no se rompe cuando el CMS se actualiza y no crea dependencias. Si su tema ya admite dividir el contenido en columnas, el enfoque de shortcode también funciona, solo recuerde el plugin habilitador de shortcodes y que las columnas desaparecerán si cambia de tema.

Ambos métodos han sido probados en CF7 versión 6.1 y superior, con WordPress 6.5+. Funcionan en producción sin sorpresas.