ReInSpirit

  • Contacto
  • Blog
  • Servicios
    • Alojamiento Web
    • Desarrollo y diseño web
  • Descuento E T
  • Sobre Nosotros

Como poner el formulario Contact Form 7 en tres o más columnas

8 enero, 2018 por Pedro Mendez 18 comentarios

Tabla de Contenidos

  • Mostrar Contact Form 7 con códigos cortos en columnas
  • Mostrar campos de formulario de contacto 7 en columnas con marcado HTML
    • Conclusión

Las personas que visitan este blog me preguntan esta duda bastantes veces. «¿Cómo puedo mostrar mi formulario de contacto en 2 o 3 columnas?» o «¿Cuáles son las opciones para tener un formulario de contacto con campos uno al lado del otro?» La idea principal es cómo mostrar esos campos de texto como Nombre o Email en la misma línea y no uno debajo de otro. ¿Por qué? Porque se ve mejor, por lo tanto, aumenta la buena experiencia del usuario. Vamos a ver qué opciones tenemos.

Vamos a trabajar con el plugin Contact Form 7 como un ejemplo para este tutorial. He estado utilizando Contact Form 7 desde siempre, y es mi primera opción cuando se trata de usar un plugin de formulario de contacto gratuito, para un sitio web de WordPress de un cliente o un proyecto propio.

De forma predeterminada, el estilo de un formulario de contacto creado con CF7 se ve así:

Este es el estilo por defecto y no te parece el apropiado. Quieres que sea personalizado y adaptado a la apariencia de tu sitio web. La buena noticia es que el generador de formularios CF7 permite el marcado de HTML y lo usaremos para nuestro beneficio.

A continuación, te mostraré 2 formas de mostrar esos campos en varias columnas.

Mostrar Contact Form 7 con códigos cortos en columnas

Por defecto, CF7 solo permite incluir HTML dentro de su editor. Para usar códigos cortos, debemos decirle a WordPress que queremos habilitar los shortcodes para CF7. Hay un plugin para hacer esto llamado Contact Form 7 Shortcode Enabler. Para usar este complemento, dirígete a Plugins > Añadir nuevo, incluye el nombre del plugin en el buscador, instala y activa el complemento.

Column Shortcodes es un plugin que añade códigos cortos a su funcionalidad de WordPress para mostrar contenido en múltiples columnas. Puedes usarlo no solo para dividir campos de formulario de contacto en columnas individuales, sino también para cualquier otro contenido en su sitio web.  Así matas dos pájaros de un tiro.

Para usar el complemento, ve hacia Plugins > Añadir nuevo, busca Column Shortcodes, instala y activa el complemento.

Una vez instalado, encontrarás un nuevo botón en tu editor de WordPress desde el cual puedes generar un código corto de columna.

Ten en cuenta que para crear una línea de 2 columnas, necesitas generar un shortcode para la primera mitad y otro shortcode para la última mitad.

Ahora que tienes los códigos cortos, vuelve al editor de Contact Form 7 ( Escritorio > Contacto > Formularios de contacto: tu formulario de contacto) y utilízalo con los campos.

El marcado del formulario de contacto se convierte en:

<div class="content-column one_half"><div style="padding:"0;"><label> Tu Nombre (requerido)
     </label></div></div>
 
<div class="content-column one_half last_column"><label> Tu Email (requerido)
    [email* your-email] </label></div><div class="clear_column"></div>
 
<label> Tu Mensaje
    [textarea your-message] </label>

[submit "Enviar"]

Y este es el resultado:

Para que los campos se muestren en 3 columnas, tienes que poner el siguiente código:

<div class="content-column one_third"><div style="padding:"0;"><label> Tu Nombre (requerido)
     </label></div></div>
 
<div class="content-column one_third"><div style="padding:"0;"><label> Tu Email (requerido)
    [email* your-email] </label></div></div>
 
<div class="content-column one_third last_column"><label> Asunto
     </label></div><div class="clear_column"></div>
 
<label> Tu Mensaje
    [textarea your-message] </label>
 
[submit "Enviar"]

y el resultado es el siguiente:

Entonces, el procedimiento de este método es:

  • Instala el plugin Column Shortcodes para habilitar los códigos cortos y dividir el contenido en múltiples columnas
  • Instala el complemento Contact Form 7 Shortcode Enabler para permitir el uso de códigos cortos en el editor de CF7
  • Ajusta los campos de Contact Form 7 con códigos cortos como hemos mencionado antes
Puedes ver en este post como poner el formulario de CF7 en dos columnas con otro método

Mostrar campos de formulario de contacto 7 en columnas con marcado HTML

Arriba, te muestro cómo usar plugins para extender la funcionalidad predeterminada de WordPress. El siguiente método consiste en utilizar el marcado HTML básico (como los divs) y un poco de CSS para dividir el contenido en columnas. Vamos a ver como se hace.

Voy a crear una serie de clases para las columnas: one-half, one-third, last. El código CSS para esto es:

.one-half,
.one-third {
    position: relative;
    margin-right: 4%;
    float: left;
        margin-bottom: 20px;
 
}
 
.one-half { width: 48%; }
.one-third { width: 30.66%; }
 
.last {
    margin-right: 0 !important;
    clear: right;
}
 
@media only screen and (max-width: 767px) {
    .one-half, .one-third {
        width: 100%;
        margin-right: 0;
    }
}

Debes insertar este código en el tema hijo (obtén más información sobre los temas hijo aquí) o puedes usar un plugin para incluir código sin perderlos en las actualizaciones, como el complemento Simple Custom CSS. Si prefieres algunos editores de código mas sofisticados puedes ver este post.

La clase .last elimina el valor de margen de las columnas para una alineación perfecta con el contenedor. Además, una consulta de medios especifica por si la pantalla es más pequeña que 768 px (el ancho de una pantalla de una tablet), muestra las columnas una debajo de otra. En otras palabras, el código crea columnas responsive para Contact Form 7.

Edita el formulario CF7 y envuélvalo con divs como puedes ver a continuación para dos columnas

<div class="one-half"> 
<label> Tu Nombre (requerido) 
     </label></div>

<div class="one-half last"> 
<label> Tu Email (requerido)
    [email* your-email] </label></div>

<label> Tu Mensaje
    [textarea your-message] </label>
 
[submit "Enviar"]

El resultado en el sitio web se convierte en:

Y ahora el código para tres columnas

<div class="one-third">
<label> Tu Nombre (requerido) 
     </label>
</div>
<div class="one-third">
<label> Tu Email (requerido)
    [email* your-email] </label>
</div>

<div class="one-third last">
<label> Asunto (requerido)
     </label>
</div>

<label> Tu Mensaje
    [textarea your-message] </label>
 
[submit "Enviar"]

Y el resultado:

Conclusión

Si tienes pensado mostrar los campos de formulario de contacto o cualquier otro tipo de contenido en columnas, existen soluciones. Tu tarea es elegir qué método te queda bien y cómo vas a implementarlo. Además, ten en cuenta que tu tema actual podría contener todas las herramientas que necesitas.

Si tienes cualquier duda o una sugerencia puedes compartilas en los comentarios a continuación…

..Entradas Relacionadas

  • Los Mejores Plugins de MailChimp para WordPress Gratuitos
  • Como crear un Tema de WordPress desde una plantilla HTML
  • 2 Plugins para Subir Archivos con Arrastrar y Soltar con CF7
  • Los Mejores Plugins para Cargar Archivos en WordPress
  • Plugin Premium para conectar la Base Datos con Contact Form 7

Publicado en: Wordpress Etiquetado como: Contact form 7, css, formulario, html, shortcodes

Sobre el autor

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

Comentarios

  1. Alex dice

    16 mayo, 2018 a las 10:16 AM

    Hola Pedro,

    En mi web , estoy intentando poner en 3 columnas y la primera me ocupa una fila entera y me desplaza el resto a otra fila, también quiero poner el captcha de google y no se lo traga…. Podria hacer el boton enviar, recpatcha y los terminos y condiciones en otra fila de 3 columnas?

    Responder
    • Pedro Mendez dice

      16 mayo, 2018 a las 4:24 PM

      Hola Alex. Puedes probar jugando con los shortcodes para incluir los contenidos en diferentes columnas. Saludos!

      Responder
      • Alex dice

        16 mayo, 2018 a las 11:16 PM

        Muchas gracias Pedro, pero lo he copiado lo que pones que 3 y se me queda en 2… He añadido los plugins de wordpress pero no me coge las 3 columnas.

        Responder
        • Pedro Mendez dice

          17 mayo, 2018 a las 7:00 PM

          Que extraño. Yo hice las pruebas y funciona perfectamente. No se que puede pasar…

          Responder
  2. Laura dice

    28 mayo, 2018 a las 6:26 PM

    Y como haríamos para poner el text-area con menos altura? Sale por defecto de ese tamaño y no encuentro forma de hacerlo más bajito. Gracias!

    Responder
    • Pedro Mendez dice

      29 mayo, 2018 a las 7:43 PM

      Hola Laura. Te lo explico del siguiente modo. Parámetros válidos:

      Limitamos el ancho de los campos: size:50
      Ponemos una longitud mínima de caracteres: minlength:5
      Ponemos una longitud máxima de caracteres: maxlength:90
      Ejemplo con el campo nombre: [text* size:50 nombre minlength:5 maxlength:50]
      Estos parámetros son válidos para todos los campos.
      Si utilizamos un campo de área de texto podremos también establecer las columnas (ancho) y filas (altura):
      Se usa la siguiente sintaxis: 40×10 (Ancho y alto) – 40x (Solo ancho) – x10 (solo altura). Piensa que no estamos hablando de pixeles, sino de columnas y filas.
      Ejemplos: [textarea areatexto 40×10 ] [textarea areatexto 40x ] [textarea areatexto x50 ]
      Nota importante: En el caso de que tu theme ofrezca integración y estilos para Contact Form, tal vez no funcionen los campos size, columnas y altura, porque el theme asume el control mediante CSS personalizado para Contact Form 7.

      Responder
  3. Aimara dice

    21 junio, 2018 a las 4:32 AM

    HOLA SOLO ES NECESARIO DESCARGAR LOS DOS PLUGINS O CON UNO ES SUFIENTE.. PARA TRABAJAR LOS SHORTCODES
    SALUDOS

    Responder
    • Pedro Mendez dice

      21 junio, 2018 a las 5:42 PM

      Hola. Necesitas los dos plugins. Saludos!

      Responder
  4. ariel italdi dice

    7 julio, 2018 a las 9:13 PM

    hola no se si llego el otro mensaje, pero para poner el formulario justo en medio de la pagina?
    y si quisieramos colocarlo frente a una imagen que este en la misma pagina. es posible?
    gracias

    Responder
    • Pedro Mendez dice

      8 julio, 2018 a las 6:48 PM

      Hola Ariel. Si es posible. Lo puedes hacer con CSS o con algún corto de columnas o bloques. Saludos!

      Responder
  5. Sandra dice

    16 julio, 2018 a las 11:15 AM

    Hola,

    cuando añado el código CSS que indicas, me afecta a otros elementos de la página web. ¿Cómo puedo añadir el código para que solamente se modifiquen las columnas del formulario de contacto?

    Mil gracias!

    Responder
    • Pedro Mendez dice

      16 julio, 2018 a las 11:27 PM

      Hola Sandra. Puedes probar con los códigos cortos para que nada afecte al diseño de tu sitio. Saludos

      Responder
  6. rufo dice

    1 agosto, 2018 a las 12:56 AM

    Hola. Buenas tardes, hice todo el procedimiento y me salio muy bien, el problemas es como hacerlo responsive para movil? Saludos.

    Responder
    • Pedro Mendez dice

      1 agosto, 2018 a las 11:00 PM

      Hola Rufo. Cual es tu sitio web? Si tienes un tema responsive tiene que salir sin problemas

      Responder
  7. Giovanni dice

    21 junio, 2019 a las 3:51 AM

    hola, intenté copiando el código y nunca me cambio el formato para dejarlo en 3 o 2 columnas

    Responder
    • Pedro Mendez dice

      21 junio, 2019 a las 6:21 PM

      Hola Giovanni,
      Supongo que será por la plantilla o tema que tienes. Prueba con otro y me dices.
      Saludos

      Responder
  8. GERMAN dice

    7 noviembre, 2019 a las 5:55 PM

    El problema porque desencaja las columnas es que que el thema de pedro tiene un formato predefindo para su contact form 7 y solo le basta colocar su css mencionado para que se vea de esa manera, imposible que se vea igual en otro theme

    Responder
    • Pedro Mendez dice

      8 noviembre, 2019 a las 6:50 PM

      Hola German,
      No es imposible, solo hay que tocar o añadir algo según el tipo de tema que utilices. Ánimo!

      Responder

Deja una respuesta Cancelar la 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.


Descarga gratis la guía

guia 14 plugins

Política de privacidad


Más un correo a la semana con algún truco y consejo. ¿Te apuntas?

También con regalos y ofertas

icono Twittericono Facebookicono YouTube

Archivos

Categorías

  • Blogging (5)
  • Comercio Eléctronico (48)
  • Diseño (40)
  • Email Marketing (3)
  • Genesis (4)
  • Google (14)
  • herramientas (23)
  • hosting (8)
  • Marketing en Internet (13)
  • Prestashop (4)
  • Programación (4)
  • Redes Sociales (9)
  • SEO (24)
  • Sin categoría (22)
  • Trabajo (7)
  • Wordpress (510)

© Copyright 2021 ReInSpirit.com · Todos los derechos reservados ·Aviso legal·Política de Privacidad·Dos Hermanas (Sevilla)