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.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
WOW!!!! <3 Genial, nuevamente muchas gracias…
Consulta tus libros los envías a Chile?
Mil gracias por tan valiosa informacion me ha sido de mucha ayuda!!
Excelte ahora si quieera tres columnas= Nombre – email – Boton. como lo haria?
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
Hola la primera fila me sale desalieada un campo más alto que el otro
Fenómeno,
Gracias Fernando por compartir.
Salu2!
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
Algo habrás hecho mal porque lo tengo puesto en cientos de sitios sin problemas
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?
Hazlo en Personalizar > CSS Adicional como indico, y añade las clases en el formulario actual, o haz una copia para probar si quieres antes
saludo muy bueno me funciono a la perfecion, quiero saber que debo hacer si quiero poner 3 o 4 columnas mas como lo haria?
Replicando el modelo
Puedes probar agregando para 3 columnas .one-tird{ width:33.33%;}y para 4 .one-four{ width:25%;}
Hola
Gracias por este post. De Hecho, GRACIAS por esta web. Es Genial que crearan este proyecto. Ayuda a muchos.
Yoe RIba
Gracias a ti por apreciarlo, y decirlo 🙂
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?
hola, me ayudo mucho tu post, pero tengo una complejidad, no puedo poner al medio el boton, ¿me podrias ayudad?
Buenas tardes. Muchas gracias por tu post, muy útil. Te hago una consulta por un problema que me surgió:
Necesito hacer muchas filas con casillas a dos columnas, pero luego de la tercera fila, me queda una columna vacía y me desplaza un campo. ¿Cómo puedo solucionarlo? Gracias
Tendría que ver el código que has utilizado para poder ayudarte
Muchas gracias! me funcionó perfecto ¿para hacerlo en 3 columnas qué tengo que tener en cuenta?
Me funciono a la perfección, gracias Fernando. También funciona con elementor, lo estaba por ser muy comodo para usar, solo me faltaba poner columnas para contacform7
Perfecto, gracias por compartir tu experiencia 🙂
Hola, me funciono pero por alguna razón no me permite escribir en los cuadros de dialogo. Cual puede ser el problema?
Suena a problema de JavaScript u optimización excesiva (en este caso). Mira a ver si tienes combinado el CSS, o a desactivar plugins
Supongo que poniendo otro Label [campoquesea* nombrecampoquesea]