]Cuando utilizamos el plugin Contact Form 7, puede que al principio nos desespere un poco. Su interfaz es muy aburrida, salen todos los campos en una sola columna y todo ello nos rompe la estética de nuestra web. En este artículo hablaré sobre cómo poner dos columnas en Contact Form 7 y que además sean responsive.

Espera, antes de nada… no necesitas tener muchos conocimientos en programación para hacerlo. Tu sigue los pasos que detallaré y ya verás que todo saldrá bien (y si no, escríbeme tus dudas en un comentario).

Hay muchas maneras de hacer dos columnas en Contact Form 7, pero de todas ellas, la única que me ha funcionado es la que explicaré en este post. Esto puede depender del theme o framework que uses. En Weberas utilizamos Divi y por ello, nos ha funcionado esta. No obstante, la hemos probado en otros themes y es la que nunca ha dado problema alguno (de hecho, es la más sencilla).

Primero, editemos el formulario

El primer paso es dirigirnos a «Formularios de contacto» dentro de «Contacto«. Esto lo encontrarás en tu barra izquierda de WordPress. Una vez dentro, pinchamos en nuestro formulario para editarlo.

Por defecto, en Contact Form 7 sale un formulario de contacto con esta forma:

Esta forma es lo que hace que Contact Form 7 tenga solamente una columna. Tendremos que editarlo y poner este formato:

<div class="one-half"><label> Nombre [text* your-name] </label></div>

<div class="one-half last"><label> Email [email* your-email] </label></div>

<div class="one-half"><label> Asunto [text your-subject] </label></div>

<div class="one-half last"><label> Teléfono [tel* tel-503] </label></div>

<label> Mensaje [textarea your-message] </label>


[submit "Enviar"]

Si te fijas, hemos añadido una clase llamada «one-half» y «one-half last» que es lo que hará las dos columnas. Ahora tocará la magia del CSS para transformar nuestro formulario de contacto.

CSS para la magia

Para añadir CSS en la plantilla que editemos, tenemos varias formas. Actualmente, en las últimas actualizaciones de WordPress, ya deja añadir nuestro propio CSS desde el personalizador. Ahora bien, lo recomendable es utilizar un tema hijo ya que así nos aseguraremos que no perderemos nada con las actualizaciones venideras. En los próximos artículos explicaré cómo crear un tema hijo de tu plantilla actual. De mientras, puedes seguir este tutorial.

Volvamos al lío. Para hacer dos columnas en Contact Form 7, tendrás que pegar este código CSS:

/* --- formulario de contacto --- */
.one-half,
.one-third {
    position: relative;
    margin-right: 4%;
    float: left;
        margin-bottom: 20px;
 
}
 
.one-half { width: 48%; }
.one-third { width: 30.66%; }
 
.last {
    margin-right: 0 !important;
    clear: right;
}
 
@media only screen and (max-width: 767px) {
    .one-half, .one-third {
        width: 100%;
        margin-right: 0;
    }
}

Y ya estará. Tu formulario de contacto ya tendrá las dos columnas totalmente responsive. En Weberas, queda así:

En el próximo artículo explico cómo darle estilo a Contact Form 7, exactamente explicaré cómo darle el estilo que tenemos en Weberas. Que si te fijas, no sólo incluye lo de las dos columnas, sino que los títulos de cada campo están dentro de los mismos (esto se llama Placeholder) y además hemos añadido el tan necesario «He leído y acepto…», el cual de por ley es obligatorio tenerlo.