Cómo poner campos de Contact Form 7 a dos columnas

Publicado por Fernando Tellado el 11 Abr, 2017

El plugin Contact Form 7 es el más utilizado con diferencia, y nos encanta por su sencillez, por la cantidad de plugins que lo mejoran y amplían, por lo bien que funciona, pero siempre ha cositas que le faltan, como por ejemplo poner campos a dos columnas, porque por defecto cada campo ocupa una columna de ancho completo.

Y no, para esto no hay un plugin (que yo sepa) pero tiene fácil solución, y queda genial la verdad, aprovechas mucho más el espacio de campos como nombre o email, por ejemplo.

El arreglo pasa por 2 sencillos pasos…

Índice de contenidos

1 HTML a medida
2 Crea las clases CSS

HTML a medida

Crea un nuevo formulario (o modifica el existente si no lo quieres) y añádele el siguiente código de ejemplo. Lo importante es que mantengas los div y las clases CSS:

<div class="column-half">Nombre [text* first-name]</div>

<div class="column-half">Apellidos [text* last-name]</div>

</div>

<div class="column-half">Email [email* your-email]</div>

<div class="column-half">Teléfono [text* your-phone]</div>

</div>

<div class="column-full">Tu mensaje [textarea your-message]</div>

</div>

<div class="column-full">[submit "Enviar"]</div>

</div>

</div>

Guarda los cambios y configura los ajustes de correo electrónico como harías con cualquier otro formulario. Quedaría algo así…

Si insertas el código del formulario en una página o entrada aún se verá normal, a una columna, así:

Crea las clases CSS

A continuación aplicaremos la magia del CSS. Abre el personalizador de WordPress y en la sección de CSS adicional añade el siguiente código:

Formulario CF7 a 2 columnas responsive

#responsive-form{

max-width:600px /*-- change this to get your desired form width --*/;

margin:0 auto;

width:100%;

}

.form-row{

width: 100%;

}

.column-half, .column-full{

float: left;

position: relative;

padding: 0.65rem;

width:100%;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box

}

.clearfix:after {

content: "";

display: table;

clear: both;

}

/**---------------- Media query ----------------**/

@media only screen and (min-width: 48em) {

.column-half{

width: 50%;

}

Y ¡sorpresa! tu formulario ahora tendrá dos columnas, mucho más atractivo, práctico, y encima es totalmente responsive, adaptándose a todos los dispositivos.