Si eres desarrollador web o tienes un sitio en WordPress, probablemente te has encontrado con la necesidad de personalizar formularios para que se vean más profesionales y organizados. En este artículo, te mostraré cómo organizar los campos de un formulario en dos columnas utilizando CSS, y cómo hacer que estos campos se ajusten a una sola columna cuando se visualizan en dispositivos móviles.

Usaremos el plugin Contact Form 7, uno de los más populares para crear formularios en WordPress. A continuación, te guiaré paso a paso en la personalización de un formulario, aplicando etiquetas HTML y CSS para obtener un diseño limpio y responsive.

Paso 1: Estructura HTML del Formulario

Primero, necesitamos definir la estructura HTML del formulario. Aquí te presento un ejemplo básico en el que organizamos los campos de “Nombre” y “Apellidos” en dos columnas, y los campos de “Teléfono” y “Email” en una sola columna.

Paso 2: Aplicar el CSS para Organizar las Columnas

Ahora que tenemos la estructura HTML, necesitamos aplicar CSS para organizarlas en dos columnas. Este código CSS te permitirá lograrlo:

Explicación del Código CSS:

• .columns: Define un contenedor flex que permite organizar los campos en una fila, con la capacidad de envolverlos si no caben en una sola línea.
• .column: Define cada columna dentro del contenedor, ocupando una proporción igual del espacio disponible.
• .margen: Agrega un margen entre las columnas para evitar que los campos se junten.
• .column-full: Hace que ciertos campos, como “Teléfono” y “Email”, ocupen el ancho completo del formulario.
• @media only screen and (max-width: 768px): Ajusta el diseño para dispositivos móviles, cambiando las columnas a una sola fila.

Paso 3: Añadir el Código CSS al Tema de WordPress

Puedes añadir este código CSS directamente en el archivo style.css de tu tema hijo (child theme) o en la sección de CSS personalizado si tu tema lo permite. Aquí te explico cómo hacerlo:

1. En el Archivo style.css del Tema Hijo:
   • Ve a Apariencia > Editor de archivos de tema.
   • Asegúrate de estar editando el archivo style.css del tema hijo.
   • Pega el código CSS al final del archivo y guarda los cambios.
2. En la Sección de CSS Personalizado del Tema:
   • Ve a Apariencia > Personalizar > CSS Adicional.
   • Pega el código CSS en el editor y guarda los cambios.