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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | /* 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? ¡No sabes lo que te estás perdiendo en YouTube!
