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

Publicado por Fernando Tellado el 11 Abr, 2017

Índice de contenidos

1 HTML a medida
2 Crea las clases CSS

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…

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 id="responsive-form" class="clearfix">

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

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

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

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

</div><!--end responsive-form-->

<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%;
	}
}

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.