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

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

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-->

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.

Luego, si quieres, ya le puedes personalizar a tu gusto y colores, o incluso adaptar Contact Form 7 a Divi, eso ya es cosa tuya.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(30 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

17 comentarios en “Cómo poner campos de Contact Form 7 a dos columnas”

  1. Muchas gracias! Me ha sido de gran ayuda!!!
    Solo una cosa… cuando sale el mensaje de errror ocupa todo el formulario. Como puedo modificar que salga solo en la parte de abajo? Muchas gracias

  2. Hola! Al copiar el CSS personalizado me cambia el footer de la página donde inserto el formulario haciendolo más estrecho (lo tenía fullwidth). Sólo lo hace en esa página, el resto sigue igual. ¿Sabe que puede ser? Saludos

  3. Jazmin Barraza

    Hola Fernando y muchas gracias por tu consejo!!!
    Una consulta, lo que pasa es que yo estoy instalando un formulario y ya tengo un tema preestablecido en WordPress y si me voy al editor de WordPress me dirige a la hoja de estilos del tema. ¿Inserto el código CSS ahí o en otro lugar?

  4. saludo muy bueno me funciono a la perfecion, quiero saber que debo hacer si quiero poner 3 o 4 columnas mas como lo haria?

  5. Hola

    Gracias por este post. De Hecho, GRACIAS por esta web. Es Genial que crearan este proyecto. Ayuda a muchos.

    Yoe RIba

  6. Hola Fernando,
    Acabo de aplicar esto y me funcionó increíble! muchas gracias

    Mi gran problema ahora es que acabo de darme cuenta que que el formulario no envia mensaje de smartphone, si desde desk
    ¿me podrás ayudar?

  7. hola, me ayudo mucho tu post, pero tengo una complejidad, no puedo poner al medio el boton, ¿me podrias ayudad?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido