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

Obviamente, a帽adid filas y sus columnas seg煤n necesit茅is.

Deja un comentario

Resumen de nuestra Pol铆tica de Privacidad

  • Responsable:聽SmythSys IT Consulting SLNE.
  • Finalidad:聽Gestionar y moderar los comentarios.
  • Legitimaci贸n:聽Necesitas dar tu consentimiento para publicar un comentario.
  • Destinatarios:聽Tus datos se alojan en los servidores de OVH.
  • Derechos:聽Tienes derecho a acceder, rectificar, limitar y suprimir los datos en la direcci贸n del responsable (en nuestra pol铆tica de privacidad).

Time limit is exhausted. Please reload CAPTCHA.