Como poner el formulario Contact Form 7 en tres o más columnas

Las personas que visitan este blog me preguntan esta duda bastantes veces. «¿Cómo puedo mostrar mi formulario de contacto en 2 o 3 columnas?» o «¿Cuáles son las opciones para tener un formulario de contacto con campos uno al lado del otro?» La idea principal es cómo mostrar esos campos de texto como Nombre o Email en la misma línea y no uno debajo de otro. ¿Por qué? Porque se ve mejor, por lo tanto, aumenta la buena experiencia del usuario. Vamos a ver qué opciones tenemos.

Vamos a trabajar con el plugin Contact Form 7 como un ejemplo para este tutorial. He estado utilizando Contact Form 7 desde siempre, y es mi primera opción cuando se trata de usar un plugin de formulario de contacto gratuito, para un sitio web de WordPress de un cliente o un proyecto propio.

De forma predeterminada, el estilo de un formulario de contacto creado con CF7 se ve así:

Este es el estilo por defecto y no te parece el apropiado. Quieres que sea personalizado y adaptado a la apariencia de tu sitio web. La buena noticia es que el generador de formularios CF7 permite el marcado de HTML y lo usaremos para nuestro beneficio.

A continuación, te mostraré 2 formas de mostrar esos campos en varias columnas.

Mostrar Contact Form 7 con códigos cortos en columnas

Por defecto, CF7 solo permite incluir HTML dentro de su editor. Para usar códigos cortos, debemos decirle a WordPress que queremos habilitar los shortcodes para CF7. Hay un plugin para hacer esto llamado Contact Form 7 Shortcode Enabler. Para usar este complemento, dirígete a Plugins > Añadir nuevo, incluye el nombre del plugin en el buscador, instala y activa el complemento.

Column Shortcodes es un plugin que añade códigos cortos a su funcionalidad de WordPress para mostrar contenido en múltiples columnas. Puedes usarlo no solo para dividir campos de formulario de contacto en columnas individuales, sino también para cualquier otro contenido en su sitio web.  Así matas dos pájaros de un tiro.

Para usar el complemento, ve hacia Plugins > Añadir nuevo, busca Column Shortcodes, instala y activa el complemento.

Una vez instalado, encontrarás un nuevo botón en tu editor de WordPress desde el cual puedes generar un código corto de columna.

Ten en cuenta que para crear una línea de 2 columnas, necesitas generar un shortcode para la primera mitad y otro shortcode para la última mitad.

Ahora que tienes los códigos cortos, vuelve al editor de Contact Form 7 ( Escritorio > Contacto > Formularios de contacto: tu formulario de contacto) y utilízalo con los campos.

El marcado del formulario de contacto se convierte en:

<div class="content-column one_half"><div style="padding:"0;"><label> Tu Nombre (requerido)
     </label></div></div>
 
<div class="content-column one_half last_column"><label> Tu Email (requerido)
    [email* your-email] </label></div><div class="clear_column"></div>
 
<label> Tu Mensaje
    [textarea your-message] </label>

[submit "Enviar"]

Y este es el resultado:

Para que los campos se muestren en 3 columnas, tienes que poner el siguiente código:

<div class="content-column one_third"><div style="padding:"0;"><label> Tu Nombre (requerido)
     </label></div></div>
 
<div class="content-column one_third"><div style="padding:"0;"><label> Tu Email (requerido)
    [email* your-email] </label></div></div>
 
<div class="content-column one_third last_column"><label> Asunto
     </label></div><div class="clear_column"></div>
 
<label> Tu Mensaje
    [textarea your-message] </label>
 
[submit "Enviar"]

y el resultado es el siguiente:

Entonces, el procedimiento de este método es:

• Instala el plugin Column Shortcodes para habilitar los códigos cortos y dividir el contenido en múltiples columnas
• Instala el complemento Contact Form 7 Shortcode Enabler para permitir el uso de códigos cortos en el editor de CF7
• Ajusta los campos de Contact Form 7 con códigos cortos como hemos mencionado antes

Mostrar campos de formulario de contacto 7 en columnas con marcado HTML

Arriba, te muestro cómo usar plugins para extender la funcionalidad predeterminada de WordPress. El siguiente método consiste en utilizar el marcado HTML básico (como los divs) y un poco de CSS para dividir el contenido en columnas. Vamos a ver como se hace.

Voy a crear una serie de clases para las columnas: one-half, one-third, last. El código CSS para esto es:

.one-half,
.one-third {
    position: relative;
    margin-right: 4%;
    float: left;
        margin-bottom: 20px;
 
}
 
.one-half { width: 48%; }
.one-third { width: 30.66%; }
 
.last {
    margin-right: 0 !important;
    clear: right;
}
 
@media only screen and (max-width: 767px) {
    .one-half, .one-third {
        width: 100%;
        margin-right: 0;
    }
}

Debes insertar este código en el tema hijo (obtén más información sobre los temas hijo aquí) o puedes usar un plugin para incluir código sin perderlos en las actualizaciones, como el complemento Simple Custom CSS. Si prefieres algunos editores de código mas sofisticados puedes ver este post.

La clase .last elimina el valor de margen de las columnas para una alineación perfecta con el contenedor. Además, una consulta de medios especifica por si la pantalla es más pequeña que 768 px (el ancho de una pantalla de una tablet), muestra las columnas una debajo de otra. En otras palabras, el código crea columnas responsive para Contact Form 7.

Edita el formulario CF7 y envuélvalo con divs como puedes ver a continuación para dos columnas

<div class="one-half"> 
<label> Tu Nombre (requerido) 
     </label></div>

<div class="one-half last"> 
<label> Tu Email (requerido)
    [email* your-email] </label></div>

<label> Tu Mensaje
    [textarea your-message] </label>
 
[submit "Enviar"]

El resultado en el sitio web se convierte en:

Y ahora el código para tres columnas

<div class="one-third">
<label> Tu Nombre (requerido) 
     </label>
</div>
<div class="one-third">
<label> Tu Email (requerido)
    [email* your-email] </label>
</div>

<div class="one-third last">
<label> Asunto (requerido)
     </label>
</div>

<label> Tu Mensaje
    [textarea your-message] </label>
 
[submit "Enviar"]

Y el resultado:

Conclusión

Si tienes pensado mostrar los campos de formulario de contacto o cualquier otro tipo de contenido en columnas, existen soluciones. Tu tarea es elegir qué método te queda bien y cómo vas a implementarlo. Además, ten en cuenta que tu tema actual podría contener todas las herramientas que necesitas.

Si tienes cualquier duda o una sugerencia puedes compartilas en los comentarios a continuación…