Formulario de contact form 7 en dos columnas
Contact form 7 es el plugin más utilizado para crear formularios de contacto en WordPress. La edición para añadir nuevos campos en el mismo requiere tener algo de conocimientos de HTML.
A medida que añadimos campos, nuestro formulario se va extendiendo y haciendo visualmente muy largo. Entonces nos interesa partirlo en dos columnas para la versión desktop (ordenador) y que se muestre en una única columna para la versión movil.
Con el siguiente código que te facilitamos, te servira de base para crear un formulario en contact form 7 con dos columnas.
Primero debes editar tu formulario de contacto y pegar el siguiente codigo HTML. Para ello dirijete a Contacto desde tu menu WordPress, y elige crear un formulario nuevo o editar el actual.
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 | <div id="responsive-form" class="clearfix"> <div class="form-row"> <div class="column-half">Nombre [text* first-name]</div> <div class="column-half">Apellido [text* last-name]</div> </div> <div class="form-row"> <div class="column-half">Email [email* your-email]</div> <div class="column-half">Telefono [text* your-phone]</div> </div> <div class="form-row"> <div class="column-full">Titulo [text* your-subject]</div> </div> <div class="form-row"> <div class="column-full">Mensaje [textarea your-message]</div> </div> <div class="form-row"> <div class="column-full">[submit "Enviar"]</div> </div> </div><!--end responsive-form--> |
Finalmente edita el archivo style.css de tu theme o tu theme child si es que utilizas. Esto puedes hacerlo vía FTP o añadir este custom CSS sin editar archivos, desde el propio panel WordPress en Apariencia > Editor
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 | #responsive-form{ /* max-width:600px; -- cambiar esto para conseguir el ancho de la forma deseada --*/ 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%; } } |
Se el primero en escribir!