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

Al dejar un comentario se solicitan datos como tu correo y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad y la del servicio externo Disqus que las gestiona y almacena.

3 comentarios

  1. WOW!!!! <3 Genial, nuevamente muchas gracias…
    Consulta tus libros los envías a Chile?

    Publica una respuesta
  2. Mil gracias por tan valiosa informacion me ha sido de mucha ayuda!!

    Publica una respuesta
  3. Excelte ahora si quieera tres columnas= Nombre – email – Boton. como lo haria?

    Publica una respuesta

Envía un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Pin It on Pinterest