Cómo poner campos de Contact Form 7 a dos columnas

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…

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:

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:

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.

Valora este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (7 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran.Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

ESTA WEB UTILIZA COOKIES PARA OFRECER LA MEJOR EXPERIENCIA POSIBLE. SI SIGUES NAVEGANDO DAS TU CONSENTIMIENTO PARA LA ACEPTACIÓN DE COOKIES Y NUESTRA POLÍTICA DE PRIVACIDAD más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar