Skip to content

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

Contact form 7 es el plugin más utilizado para crear formularios de contacto en WordPress. La edición para añadir nuevos campos en el mismo requiere tener algo de conocimientos de HTML.

A medida que añadimos campos, nuestro formulario se va extendiendo y haciendo visualmente muy largo. Entonces nos interesa partirlo en dos columnas para la versión desktop (ordenador) y que se muestre en una única columna para la versión móvil.

Con el siguiente código que te facilitamos, te servirá de base para crear un formulario en contact form 7 con dos columnas.

HTML a medida

Primero debes editar tu formulario de contacto y pegar el siguiente código HTML. Para ello dirígete a Contacto desde tu menú WordPress, y elige crear un formulario nuevo o editar el actual.

[sourcecode language=”plain”]
<!–Contact Form 7 responsive en dos columnas–>
<div id="form-responsive" class="clearfix">
<div class="form-fila">
<div class="columna-media">[text* first-name placeholder "Nombre"]</div>
<div class="columna-media">[text* last-name placeholder "Apellidos"]</div>
</div>
<div class="form-fila">
<div class="columna-media">[email* your-email placeholder "Correo Electrónico"]</div>
<div class="columna-media">[text* your-phone placeholder "Telefono"]</div>
</div>
<div class="form-fila">
<div class="columna-full">[textarea your-message placeholder "Su mensaje"]</div>
</div>
<div class="form-fila">
<div class="columna-full">[submit "Enviar Consulta"]</div>
</div>
</div>
<!–Fin Contact Form 7 responsive en dos columnas–>
[/sourcecode]

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:

[sourcecode language=”plain”]
/* Formulario CF7 Responsive en 2 columnas */
#form-responsive{
max-width:600px /*– cambiar esto para conseguir el ancho de la forma que deseada –*/;
margin:0 auto;
width:100%;
}
.form-fila{
width: 100%;
}
.columna-media, .columna-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) {
.columna-media{
width: 50%;
}
}
[/sourcecode]

Loading

Foto del avatar

Walter Mendoza

WPERU.COM - Principal proveedor de soluciones en la nube y Web Hosting en Perú.

Volver arriba