Wordpress

Formularios en columnas con Contact Form 7

¿Cómo distribuir los campos del formulario de Contact Form 7 en varias columnas? Pues es muy sencillo, pero si podemos copiar y pegar, mejor, pongo un ejemplo rápido y sencillo aquí, cada uno que lo adapte a sus necesidades. Por un lado, agregamos el código html dentro del formulario de contacto, tal y como puedes apreciar en la imagen:

captura contact form

Código HTML

<div class=”formulario1″>
    <div id=”izquierda”>
       Nombre<br/> [text* your-name] <br/>
        Email<br/> [email* your-email] <br/>
        Empresa<br/> [text* text-empresa]
    </div>
    <div id=”derecha”>
        Teléfono<br/> [text* your-phone] <br/>
        Precio final<br/> [number number-precio min:0 max:500000] <br/>
        Modelo o referencia (opcional)<br/> [text text-ref]
    </div>
<br/>
Observaciones [textarea* your-message] <br/>
Sube un archivo<br/> [file* subir-archivo] <br/>
[acceptance acceptance-lopd] He leído y acepto los <a href=”#”>términos y condiciones</a>.<br/>
[submit “Enviar”]"
</div>

Código CSS

#izquierda {
   width: 48%;
   float: left;
} 

#derecha {
   width: 48%;
   float: left; 
}

.formulario1:after {
   content: "\0020";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
   overflow: hidden;
}

.formulario1 {
   display: block;
}

Si necesitáis que cuelgue algún otro estilo, podéis comentar y trataré de agregarlo a la entrada tan rápido como me sea posible.

Join the discussion 2 Comentarios

  • Hola amigo gracias por tu ayuda , de ante mano gracias!: pero sigue apareciendo todo en una sola columna!: te comento puse el HTML dentro del formulario de contacto y el código al final completo de la hoja de estilos!: pero.. sigue una sola columna!!: que crees que cometí porque no le veo perdida!:

    • Hola, lo primero, perdona por haber tardado tanto en responder… he tenido un poco abandonado el blog por acumulación de trabajo, pero he modificado la entrada para que siempre se comporte en 2 columnas sin tener en cuenta el tamaño del contenedor.

      En tu caso supongo que como el código de antes tenía width con medidas absolutas en vez de relativas, la segunda columna al “no coger” dentro de su contenedor habrá pasado a la siguiente fila.

      Ahora debería funcionarte, sino es así vuelve a comentar (prometo esta vez responder más pronto).

      Un saludo.

Anímate a comentar

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.