Cómo poner un formulario de Contact Form 7 en dos columnas.

Algo que nos han pedido ya varios clientes, y que llevamos queriendo desde hace tiempo subir al blog, pero que nunca hemos encontrado tiempo para hacerlo. Ayer nos lo pidió otro cliente, y aprovechamos para subirlo.

Nota: si sabéis CSS podrías modificarlo para ponerlo en más columnas.

Cómo poner un formulario de Contact Form 7 en dos columnas.

Contact Form 7 no está pensado para dividirlo en columnas, así que tenemos que hacer unas modificaciones de CSS y luego editar el formulario con unas etiquetas de html +css. Os lo explicamos.

Primero os dejamos el código CSS (estilo). Este lo tenéis que poner o en el styles.css de vuestra plantilla hijo o en la opción de CSS personalizado de vuestra plantilla.

Si miráis el código, este crea el contenedor al 100%, luego una clase de fila al 100%, una de media fila al 50% y luego unas modificaciones para móviles.

/*
Formulario CF7 2 columnas y responsive
*/
#responsive-form{
	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%;
	}
}
/*  Fin CF7 dos columnas */

Una vez que tengáis esto en vuestro CSS, podéis usarlo en vuestro formulario. Id editar el formulario en cuestión y ahí tenéis que poner cada shortcode de campo entre las etiquetas que correspondan a una media fila o a una fila.

Este es el código y lo comentamos en azul para que lo entendáis. No tenéis que poner los comentarios.

Los campos que corresponderían a un formulario normal están en verde. Lo demás es lo que añadimos de HTML (estructura) con CSS (formato).

<div id="responsive-form" class="clearfix"><!--Esta es la caja del contenedor del formulario-->

    <div class="form-row">  <!--Esto indica que es una fila entera-->
       <div class="column-half">Nombre [text* first-name]</div> <!--Esta es la primera columna de la primera fila-->
       <div class="column-half">Apellidos [text* last-name]</div> <!--Esta es la segunda columna de la primera fila-->
    </div><!--Cerramos la primera fila-->

     <div class="form-row"><!--Empezamos la segunda fila-->
         <div class="column-half">Email [email* your-email]</div><!--Esta es la primera columna de la segunda fila-->
         <div class="column-half">Teléfono [text* your-phone]</div><!--Esta es la segunda columna de la segunda fila-->
         </div> <!--Cerramos la segunda fila-->

      <div class="form-row"> <!--Empezamos la tercera fila-->
         <div class="column-full">Tu mensaje  [textarea your-message]</div><!--Código para una columna-->
      </div><!--Cerramos la tercera fila-->

       <div class="form-row"><!--Empezamos la cuarta-->
          <div class="column-full">[submit "Enviar"]</div><!--Una sola columna-->
        </div><!--Fin de la cuarta fila-->

</div><!--Fin del contenedor-->