Resumen de IA
Crear un formulario de contacto adaptable con varias columnas parece que debería ser sencillo, pero cuando empiezas a trabajar en ello, las cosas pueden complicarse rápidamente.
Quizás te preguntes: "¿Realmente puedo hacer que este formulario se vea bien en todos los dispositivos sin romper el diseño?" Esta es una preocupación válida, especialmente si has tenido problemas con formularios que no encajan del todo o se sienten torpes en el móvil.
La buena noticia es que puedes usar WPForms para configurar un formulario de contacto adaptable con varias columnas. ¡Sigue los pasos de esta guía para empezar!
¡Crea tu formulario de varias columnas ahora! 🙂
Cómo crear un formulario de varias columnas en WPForms
Crear un formulario de varias columnas en WPForms es increíblemente fácil. Antes de empezar, asegúrate de tener una licencia de WPForms Pro porque obtendrás el campo de diseño junto con toneladas de funciones útiles con este plan.
Una vez que hayas comprado la licencia y instalado WPForms en tu sitio, solo sigue los pasos a continuación para crear diseños de columnas en tu formulario.
Paso 1. Crea un nuevo formulario
Empecemos creando un nuevo formulario con un diseño de columnas. Para ello, abre tu panel de WordPress y ve a WPForms » Añadir nuevo.
Esto abrirá la interfaz del constructor de formularios de WPForms. Puedes introducir un nombre que te gustaría darle a tu formulario y seleccionar una plantilla.
Para este ejemplo, vamos a crear un formulario desde cero. Esto nos permitirá primero elegir un diseño de formulario de varias columnas y luego asignar diferentes campos a cada columna según nos parezca.
Sin embargo, WPForms tiene varias plantillas predefinidas que utilizan varias columnas, como la plantilla de formulario de contacto de varias columnas.
Para crear un formulario desde cero, pasa el cursor sobre Formulario en blanco (este debería ser el primer elemento de la lista de plantillas) y pulsa Crear formulario en blanco.
WPForms cargará ahora un formulario en blanco que puedes empezar a construir utilizando sencillos controles de arrastrar y soltar.
Ahora, vamos a añadir algunos campos a este formulario y a organizarlos en un diseño de varias columnas.
Paso 2. Añade campos al diseño de columnas
Para dividir un área de tu formulario en varias columnas, solo necesitas añadir el campo de Diseño.
Simplemente busca en la sección Campos llamativos del panel izquierdo y arrastra y suelta el campo Diseño en el formulario de tu derecha.
Ahora, vamos a añadir los campos Nombre, Correo electrónico y Teléfono en la columna izquierda y un campo de Dirección en la columna derecha.
La forma más fácil de hacerlo es haciendo clic en una columna para activarla y luego haciendo clic en los campos que queremos añadir a esa columna.
Nota: También puedes arrastrar y soltar campos en las columnas a las que quieras asignarlos.
Empecemos asignando primero los campos a la columna izquierda. Haremos clic en la columna izquierda para establecerla como activa (como indica la flecha hacia arriba).
Ahora, haremos clic en los campos Nombre, Correo electrónico y Teléfono para que se añadan directamente a la columna activa uno por uno.
A continuación, repetiremos el mismo proceso para la columna de la derecha y le añadiremos el campo Dirección.
¡Genial! Este formulario de 2 columnas tiene ahora buen aspecto.
¿Pero qué pasaría si quisieras diferentes anchos para las dos columnas? ¿O quizás incluso más de 2 columnas?
WPForms hace que todo eso sea posible, como mostramos en el siguiente paso.
También te puede interesar: Formularios de una sola columna: Ejemplos e inspiración
Paso 3. Personaliza el diseño del formulario
Por defecto, el campo Diseño crea 2 columnas de igual tamaño en tu formulario. Pero puedes elegir entre 8 diseños diferentes y añadir hasta 4 columnas en un solo formulario.
Para seleccionar una plantilla de diseño, simplemente haz clic en el campo Diseño después de que se haya añadido a tu formulario.
Después de eso, simplemente selecciona un diseño que funcione mejor para ti. Por ejemplo, si quisieras una columna estrecha a la izquierda pero una más ancha a la derecha, puedes optar por la tercera opción de diseño.
Si quisieras tener 4 columnas en tu formulario, simplemente elige la opción de diseño correspondiente en el panel izquierdo y arrastra y suelta los campos en sus respectivas columnas.
Recomendamos experimentar con diferentes diseños y previsualizar tu formulario en el frontend para comprobar que todo se ve bien. Nuestra guía para diseñar la disposición de los formularios te dará un buen comienzo.
A veces, el diseño de formulario elegido puede no encajar bien con el diseño de tu página y provocar problemas de alineación. Pero si haces bien tus pruebas de formulario y compruebas todo antes de publicar, esto no debería ser un problema.
WPForms crea automáticamente formularios responsivos de varias columnas. Esto significa que el formulario se colapsará en menos columnas para ajustarse a la pantalla más pequeña cuando se vea desde dispositivos móviles.
Paso 4. Configura la notificación y confirmación de tu formulario
La configuración de las notificaciones asegura que siempre estés al tanto de las nuevas entradas del formulario. Ve a Ajustes y luego a Notificaciones en el constructor de formularios.
Desde aquí, edita la configuración de notificación predeterminada, como la línea de asunto, o cambia los correos electrónicos de los destinatarios según sea necesario.
Ahora puedes seleccionar Confirmaciones en el menú Ajustes para configurar las respuestas para los envíos de formularios exitosos.
Elige el Tipo de confirmación que mejor se adapte a tu sitio: un mensaje, mostrar una página o redirigir.
Recuerda guardar tus cambios para mantener tu formulario y su configuración actualizados. ¡Ya estás listo para publicar el formulario en tu sitio de WordPress!
Paso 5. Publica tu formulario de varias columnas
Ahora, es el momento de pasar al último paso de publicarlo. Para iniciar el proceso de incrustación, haz clic en el botón Incrustar junto a Guardar.
Después de presionar el botón Incrustar, verás una ventana modal preguntando si deseas incrustar tu formulario en una página existente o crear una nueva. Elegiremos la opción Crear Nueva Página , pero los pasos son muy similares en cualquier caso.
Dale un nombre a tu página y presiona ¡Vamos!.
Encontrarás el formulario incrustado dentro de esta nueva página. Realiza cualquier edición usando el editor de WordPress aquí, y cuando estés satisfecho, presiona Publicar.
Así es como se verá un formulario de varias columnas publicado cuando se vea desde el frontend:
¡Y eso es todo! Ahora puedes crear fácilmente formularios de varias columnas en WPForms sin necesidad de código. No olvides que también puedes dar estilo a tus formularios en el editor de bloques con facilidad.
Preguntas frecuentes sobre cómo crear un formulario de varias columnas en WordPress
¿Cuál es el beneficio de un diseño de formulario de varias columnas?
Los formularios de varias columnas pueden ser muy beneficiosos desde el punto de vista de la experiencia del usuario. Un escenario común en el que los formularios de varias columnas resultan útiles es cuando tienes un formulario lo suficientemente largo como para tener una barra de desplazamiento vertical.
En este escenario, puedes reducir la longitud del formulario y hacerlo más compacto ordenando tus campos en dos o más columnas.
Del mismo modo, al incrustar un formulario largo en una barra lateral, puede que encaje mejor y reduzca el desplazamiento vertical si utilizas un diseño de columnas.
No existe un enfoque único para un diseño de formularios eficaz, por eso es tan importante tener diferentes opciones de diseño disponibles para diferentes escenarios.
¿Cómo creo un formulario de varias columnas?
Para crear un formulario de varias columnas en WordPress, puedes usar WPForms y su constructor de arrastrar y soltar. Una vez que tu formulario esté configurado, puedes dividir fácilmente los campos en varias columnas utilizando el campo de diseño.
WPForms garantiza automáticamente que el formulario sea responsive, por lo que se ajustará en pantallas más pequeñas para una experiencia de usuario fluida.
¿Cómo divido los datos en varias columnas?
Con WPForms, dividir los datos en varias columnas es sencillo.
Al crear tu formulario, simplemente selecciona los campos del formulario que deseas mostrar uno al lado del otro y utiliza la funcionalidad de arrastrar y soltar para añadirlos a un campo de diseño.
WPForms se encargará del resto, asegurándose de que tus columnas se muestren correctamente en todos los dispositivos.
A continuación, utiliza el Net Promoter Score para encuestas
Si intentas medir los niveles de satisfacción del cliente, el mejor instrumento de encuesta que puedes usar para eso es el Net Promoter Score (NPS). WPForms facilita mucho la creación de formularios de encuestas con la Escala Net Promoter, como explicamos en esta guía.
Si tienes algunos problemas con usuarios que no introducen sus direcciones de correo electrónico correctamente, aquí te explicamos cómo añadir un campo de confirmación de correo electrónico para evitarlo. Además, puede que te interese nuestra guía sobre las mejores preguntas de encuesta sobre 'cómo nos conociste'.
Y, si no estás seguro de qué herramienta de prevención de spam deberías usar en tus formularios, consulta nuestra comparación sobre Akismet vs reCAPTCHA.
Crea tu formulario de WordPress ahora
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.
¿Cómo hacer una sola columna en pantalla móvil?
Hola Bilal, los campos de diseño son responsive para móviles y mostrarán el campo como una sola columna en móvil. Cuando tengas un momento, ¿podrías revisarlo y decirnos cómo va?
Si tienes una licencia de WPForms, tienes acceso a nuestro soporte por correo electrónico, así que por favor envía un ticket de soporte. De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite en WordPress.org.
Gracias.
Siempre diseño formularios primero para el teléfono, pero el modo responsive automático todavía estropea el formulario en la vista del teléfono, ¿cómo puedo solucionar este problema?
Hola Sam: Cuando tengas un momento, por favor, escríbenos con más detalles sobre el problema que estás experimentando en soporte para que podamos ayudarte.
Si tienes una licencia de WPForms, tienes acceso a nuestro soporte por correo electrónico, así que por favor envía una solicitud de soporte.
De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite en WordPress.org.
Gracias 🙂
Necesito 10 columnas
¡Hola Patrick!
Mis disculpas, pero actualmente no es posible crear 10 columnas usando el campo de diseño. Sin embargo, puedes lograr diseños de varias columnas usando clases CSS. De hecho, tenemos una guía detallada sobre cómo crear diseños de formularios con varias columnas que explica todas las opciones y clases CSS disponibles.
Para obtener asesoramiento personalizado sobre cómo lograr tus necesidades específicas de diseño, te recomiendo que te pongas en contacto con nuestros Asesores de Confianza del equipo de soporte si tienes una licencia de WPForms. Por favor, envía una solicitud de soporte y te responderán lo antes posible.