ReInSpirit

Como crear dos columnas responsive en Contact Form 7

por 37 comentarios

Con más de 1 millón de descargas activas, el plugin Contact Form 7 no necesita presentación, siendo uno de los plugins para formularios de contacto más populares en WordPress.

Pero cuando instalamos el plugin, e incluimos el formulario en la página de contacto, vemos que el estilo es muy básico y si lo necesitamos para un diseño personalizado de un sitio web, va a necesitar unos cambios en el código para adaptarlo a nuestras necesidades. En este tutorial voy a mostrar cómo crear un formulario responsive de 2 columnas utilizando el plugin Contact Form 7.

Básicamente lo que tenemos que hacer es incluir dos piezas de código. Uno en el apartado HTML en la configuración del plugin, y otro en el archivo de los estilos de nuestro theme style.css o el archivo de nuestro tema hijo. Algunos temas de WordPress también incluyen dentro de la configuración de este, un apartado para incluir código y cambiar las CSS.

Bueno, sin mas rodeos estas son las piezas de código que tenemos que incluir:

💬 Código HTML Contact Form 7 responsive con dos colunmas


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

🟢 Código CSS Contact Form 7 responsive con dos colunmas

#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%;
	}
}
Nuestra puntuación

..Entradas Relacionadas

Sobre el autor

Pedro Mendez. Webmaster apasionado de WordPress. Autodidacta empedernido buscando siempre nuevas fuentes de conocimientos.

Comentarios

  2. Dani dice

    Que tal Pedro,

    Primero de todo agradecerte mucho esta aportación ya que éste era un problema que yo tenía con el formulario de contacto de mi página web.

    Pero el tema está en que no consigo que un campo (Asunto) me quede igual que los otros, con todo el ancho y el titulo del campo encima.
    También comentar que el formulario se descuadra si lo ves desde una Tablet, tampoco se por qué.

    Lo que realmente más me preocupa es lo del campo Asunto.
    Te dejo link a mi web (acortado con bit.ly) para que puedas verlo y ojalá pudieras decirme que ocurre.
    http://bit.ly/Aticwebbcn

    El formulario está en el Footer.

    Gracias por tu ayuda!
    Saludos

    Responder

      • Dani dice

        Que tal Pedro,
        Gracias por tu respuesta.
        Comentarte que lo del campo «Asunto» lo he solucionado simplemente poniendo un código entre etiquetas en el formulario, y ya está listo, ahora salta a la línea siguiente y se ve bien.

        El tema que queda pendiente (se aprecia también en escritorio) es el ancho de los campos donde introducir los datos:
        El de «Asunto» y el de «Introduce el resultado…» son más cortos que el resto. Por qué puede suceder? El campo de «Mensaje» si está correcto y tienen los 3 campos el mismo formato introducido desde el formulario de Contact Form.

        Que piensas que puede ser?
        Gracias de nuevo por tu ayuda.
        Saludos
        Dani

        Responder

  3. Hugo dice

    Hola Pedro:

    Antes que nada, gracias por tu video explicativo.
    El problema que tengo es que después decolocar ambos códigos que tu señalas en tu video, los campos contiguos me quedan juntos, sin los espacios separando las columnas; es decir, parece una tabla. Además el color está en blanco y no en plomo,como se ve en el video.

    Gracias,

    Responder

    • Pedro Mendez dice

      Hola Hugo. Eso es porque el plugin coge los estilos de la plantilla que tienes instalada. En el ejemplo del video sale de ese color porque son los estilos y colores de la plantilla de pruebas. Si tienes que hacer cambios vas a tener que tocar código.

      Responder

  4. miguel dice

    Hola Pedro. quiero hacer un foro con un aspecto parecido al que tienes en esta página, pero bbpress me da un diseño más básico y que no me sirve… qué tipo de foro usas tú? Gracias!

    Responder

  6. Danny Sandi Molina dice

    Hola amigo, muchas gracias por tu explicación me ha sido muy útil, solo que estoy teniendo un pequeño problema, las casillas donde debe ir la información se muestran traslapadas, como las puedo separar.

    studio32cr.com

    Saludos

    Responder

  8. Raúl Rojas dice

    Gracias por el aporte, pero me gustaría hacer el formulario con tres columnas en algunas filas y llevo días intentándolo pero no doy con ello.

    Responder

  9. Rikardo dice

    hoa buen tutorial…
    a mi tampoco me cambiaba la forma pero me di cuenta de que cambia cuando uno entra como visita, al verlo como administrador no se ve en 2 columnnas ahahahah

    pero bueno la idea es que funcione con las visitas al sitio

    gracias saludos

    Responder

    • Pedro Mendez dice

      Hola Javier. En comentarios anteriores incluí la documentación de CF7 para añadir CSS y poner las cajas según los gustos de cada uno. Saludos!

      Responder

  14. jose pedroza dice

    Hola Pedro, quiero que el formulario sea de 3 columnas, es posible?
    lo quiere de la siguiente manera
    1ra columna este el nombre
    2da columna el Email
    3ra columna el mensaje
    Abajo de ella es boton enviar.

    De antemano agradezco su tiempo… un abrazo

    Responder

  15. Yixzon Quintero dice

    Pedro tengo un problema, no se si me puedas ayudar. veo que este formulario es de contact form. el de mi pagina esta igual, el problema que tengo es que el boton de submit esta haciendo que no tenga mi pagina responsive al 100% en mi telefono. si te metes por el telefono puedes ver que puede moverme un poco a la izquierda y dereha, te dejo mi pagina para que lo cheuqes bro: http://www.viveestudiaytrabajaenaustralia.com . Descubri que era el boton por que empece a borrar elemento por elemento y cuando elimino el boto funciona de forma correcta. no se si es posible ponerle responsive al boton o no que podria esta pasando. me puedes apoyar por favor.

    Responder

    • Pedro Mendez dice

      Hola Yixzon,
      Pues no sabría decirte cual es el problema, pues eso depende de cada plantilla y como esté desarrollada y diseñada.

      Responder

  16. Isai dice

    Hola, amigo, deseo saber si puedo desarrollar por medio de código lo siguiente, colocar 3 columnas en una misma fila.
    Nombre E-mail Suscribir
    de esta manera, muchas gracias.

    Responder

Deja una respuesta

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

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