Cómo diseñar un formulario de acordeón en WordPress

¿Estás buscando una forma sencilla de añadir un diseño de formulario de acordeón a tu sitio web de WordPress?

Los formularios de acordeón ofrecen una forma intuitiva y accesible de presentar datos complejos manteniendo un aspecto limpio y organizado.

En este artículo, te mostraré la forma más fácil de diseñar un formulario de acordeón para mejorar la funcionalidad y la experiencia de usuario de tu sitio web.

¡Crea tu formulario de acordeón de WordPress ahora! 🙂

Cómo diseñar un formulario de acordeón en WordPress

Para crear un formulario de diseño de acordeón en WordPress, puedes confiar en la sencillez y funcionalidad de WPForms. Sigue los pasos a continuación para empezar:

1. Instalar y activar WPForms

Lo primero que haremos será instalar y activar WPForms, que es un plugin avanzado y fácil de usar para crear todo tipo de formularios.

Viene con más de 2100 plantillas de formularios de WordPress y un montón de funciones para mejorar la funcionalidad de tu sitio.

Para empezar, dirígete a WPForms y regístrate para obtener una cuenta. Ten en cuenta que para este tutorial utilizaremos una licencia Pro, pero puedes usar cualquier nivel de licencia que desees.

¿Necesitas ayuda para instalar WPForms en tu sitio web? Consulta este tutorial sobre cómo instalar plugins de WordPress. Una vez que tengas el plugin instalado, ¡no olvides activarlo!

Después de completar ese paso, instalaremos WPCode y añadiremos el fragmento de código que hace que el estilo del acordeón cobre vida.

2. Añadir el fragmento de código del acordeón

Para que la magia del formulario de acordeón funcione, necesitamos instalar el plugin WPCode, que funciona con WPForms. Asegúrate de completar ambas partes de este paso: instalar WPCode y añadir el fragmento de código del acordeón.

Cuando instales el plugin WPCode en WordPress, obtendrás acceso a una biblioteca especial de fragmentos de código solo para usuarios de WPForms. ¡No olvides activar el plugin después de haberlo instalado!

Después de instalar WPCode desde el repositorio de plugins de WordPress, vuelve a WPForms. Ahora activaremos un fragmento de código en WPForms.

Desde tu panel de WordPress, navega a WPForms » Herramientas en la barra lateral de navegación izquierda. En esa página, selecciona la pestaña de Fragmentos de código.

Ten en cuenta que si no tienes WPCode instalado, no verás la opción Fragmentos de código. Desplázate o utiliza la función de búsqueda para localizar el fragmento Ayudante de plantilla de acordeón.

Haz clic en el botón Instalar fragmento .

Después de hacer clic para instalarlo, se abrirá una página que muestra el fragmento de código. Lo único que necesitas hacer en esta página es activar el fragmento y hacer clic en Actualizar.

¡Ahora estás listo para crear tu formulario!

3. Crear un nuevo formulario de WordPress

Desde tu panel de administración de WordPress, navega a WPForms y haz clic en Añadir nuevo en la lista de opciones.

A continuación, ponle un nombre a tu formulario. Puedes seleccionar una plantilla existente según tus requisitos específicos, pero para nuestros propósitos en este tutorial, vamos a empezar con un formulario en blanco. Esto te dará una mejor idea de cómo crear el formato de acordeón.

Ahora serás dirigido a la pantalla de Campos, donde los campos disponibles aparecen en el panel izquierdo. Los que tengas disponibles dependerán de tu nivel de licencia.

En el panel derecho, verás una vista previa editable de tu formulario. Si seleccionaste un formulario en blanco, no te preocupes si no hay nada para empezar. Arrastrarás y soltarás tus elementos del formulario allí, ¡y no estará en blanco por mucho tiempo!

Crea tu formulario usando divisores de sección

Al empezar a crear tu formulario, piensa en cómo quieres agrupar la información. Es decir, ¿qué información quieres que se incluya en el desplegable cuando se abra el acordeón del formulario?

Para cada una de esas secciones, necesitas añadir un campo divisor de sección. Nombra el campo como quieras llamar a esa sección de información. Nuestro ejemplo es un formulario de solicitud, así que vamos a empezar con la información de contacto en la parte superior.

Una vez que tengas el divisor de sección en su lugar, puedes arrastrar y soltar todos los elementos deseados del formulario debajo de él de la manera que prefieras.

Añadir saltos de página

Una vez que todos tus campos estén en su lugar, añade un campo de Salto de página al final de cada una de tus secciones del formulario.

Nota: cuando añadas el salto de página inicial, haz clic en él para abrir las opciones del campo. En el lado izquierdo, verás un menú desplegable donde puedes hacer cambios en el indicador de progreso. Selecciona Ninguno. Solo necesitas hacer esto una vez por formulario.

Si te saltas este paso, el acordeón seguirá funcionando, pero habrá una barra de progreso inactiva en la parte superior del formulario cuando esté en vivo. Después de añadir el salto de página, repite el proceso para tantas secciones como tenga tu formulario.

Si lo previsualizas ahora mismo, parecerá un formulario de varias páginas y no un acordeón. No te preocupes; ¡vamos a añadir el ingrediente mágico: una clase CSS!

4. Añadir la clase CSS a tu formulario

En este punto, deberías tener tu formulario completo. Cada sección de tu formulario debe comenzar con un divisor de sección y terminar con un salto de página. Esas secciones son las que se convertirán en los menús desplegables del acordeón.

Ya activaste el fragmento de código antes de empezar el formulario. Solo queda una cosa muy fácil por hacer. Tienes que añadir la clase CSS que unirá todo.

Primero, guarda tu formulario. Con el creador de formularios aún abierto, navega a la opción Configuración en el menú de la izquierda. Por defecto, se abrirá la página General. Desplázate hasta el final y haz clic en Avanzado.

A continuación, introducewpf-accordion-formen el campo Clase CSS del formulario. Después de introducir ese código, haz clic en el botón Guardar. Ya que estamos en la configuración, vamos a actualizar las notificaciones y confirmaciones de nuestro formulario.

5. Configurar notificaciones y confirmaciones

Es crucial configurar los mensajes y notificaciones que aparecerán después de que un usuario complete y envíe el formulario. Esto es fácil de hacer. Navega a la pestaña Configuración y selecciona Notificaciones.

Los administradores recibirán alertas automáticamente. Sin embargo, el título, el cuerpo y la lista de destinatarios del correo electrónico se pueden modificar si es necesario.

A continuación, en la pestaña Ajustes, selecciona Confirmaciones para modificar el mensaje que recibirán tus clientes al completar el formulario.

También puede utilizar la configuración de Tipo de confirmación en WPForms para mostrar un mensaje, enlazar a otra página o redirigir al usuario.

Publica tu formulario de acordeón

Después de haber terminado de actualizar las confirmaciones y notificaciones de tu formulario, ¡estás listo para publicar! Hay diferentes maneras de incrustar un formulario en WordPress.

Vamos a usar el botón de incrustar para nuestro tutorial, pero si deseas probar otra forma, consulta nuestra publicación sobre las 3 maneras de incrustar un formulario en tu sitio de WordPress.

Con tu formulario abierto en el creador de formularios, simplemente haz clic en el botón Incrustar en la parte superior derecha. Una ventana modal te preguntará si deseas incrustar el formulario en una página existente o crear una nueva página.

Si deseas seleccionar una página existente, podrás elegir cuál. Si creas una página nueva, se te pedirá que le des un nombre.

Una vez que hayas hecho tu elección, tu formulario se abrirá en WordPress, en un borrador de la página que seleccionaste o creaste. Si todavía parece un formulario de varias páginas aquí, no te preocupes. Haz clic para previsualizar la página y deberías ver tu formulario de acordeón.

Ahora estás listo para publicar tu página y sacar tu formulario de acordeón al mundo. Después de haber publicado el formulario de acordeón, todo lo que queda por hacer es asegurarte de que funciona como se planeó probando el formulario incrustado.

Preguntas frecuentes sobre cómo diseñar un formulario de acordeón en WordPress

La creación de formularios de acordeón es un tema popular de usabilidad entre nuestros lectores. Aquí tienes algunas respuestas rápidas a algunas de las preguntas más frecuentes:

¿Qué es un formulario de acordeón?

Un formulario de acordeón es un formulario de varias secciones donde cada sección se puede expandir o contraer haciendo clic en los encabezados de las secciones.

En lugar de mostrar todos los campos a la vez (lo que puede ser abrumador para formularios largos), los formularios de acordeón revelan una sección a la vez, haciendo que los formularios complejos se sientan más manejables.

Los usuarios básicamente hacen clic a través de las secciones secuencialmente, de forma similar a las pestañas o los formularios de varias páginas, pero todo dentro de una sola página.

¿Cómo creo un formulario de acordeón en WordPress?

Instala WPForms Pro y el plugin WPCode. En WPCode, activa el fragmento Accordion Template Helper.

Luego crea tu formulario en WPForms, organiza los campos en secciones usando campos de Divisor de Sección, añade campos de Salto de Página después de cada sección, y añade la clase CSS wpf-accordion-form en la configuración Avanzada de tu formulario.

El estilo de acordeón se aplicará automáticamente a tu formulario.

¿Cuál es la diferencia entre los formularios de acordeón y los formularios de varias páginas?

Los formularios de acordeón muestran todas las secciones en una página con funcionalidad de expandir/contraer, permitiendo a los usuarios saltar entre secciones fácilmente y ver el progreso general de un vistazo.

Los formularios de varias páginas muestran una sección a la vez en páginas separadas con navegación hacia adelante/atrás. Los formularios de acordeón funcionan mejor cuando los usuarios necesitan consultar secciones anteriores, mientras que los formularios de varias páginas reducen la carga cognitiva para formularios muy largos al mostrar solo los campos relevantes.

¿Cuándo debo usar un diseño de formulario de acordeón?

Usa formularios de acordeón para solicitudes, registros detallados o encuestas con más de 15 campos organizados en 4-7 secciones lógicas.

Son perfectos para solicitudes de empleo (información de contacto, historial laboral, referencias), registros de eventos (detalles del asistente, preferencias de comida, pago) o formularios de admisión completos.

Evita el diseño de acordeón para formularios de contacto simples de 5 campos donde las secciones que se contraen añaden complejidad innecesaria.

¿Cómo añado un acordeón a mi sitio de WordPress?

Para formularios de acordeón específicamente, usa WPForms con el fragmento de código de acordeón como se describe en esta guía.

Para contenido de acordeón (como preguntas frecuentes), usa un plugin de acordeón dedicado o el módulo de acordeón de tu maquetador de páginas. El método de acordeón de WPForms solo funciona para formularios, no para contenido general de la página.

¿Puedo usar formularios de acordeón en WPForms Lite?

La técnica de formularios de acordeón funciona con cualquier nivel de licencia de WPForms, incluido Lite, siempre que tengas instalado el plugin WPCode y activado el fragmento "Accordion Template Helper".

Sin embargo, WPForms Pro te da acceso a funciones más avanzadas como la lógica condicional y la integración de pagos que mejoran significativamente los formularios de acordeón.

¿Cuáles son las mejores prácticas para las etiquetas de los formularios de acordeón?

Usa títulos de sección claros y descriptivos que indiquen exactamente qué información contiene esa sección. Buenos ejemplos: "Tu información de contacto", "Historial laboral", "Antecedentes educativos".

Evita etiquetas vagas como "Sección 1" o "Detalles". Haz que los títulos de las secciones sean escaneables para que los usuarios puedan encontrar y expandir rápidamente la sección que necesitan revisar o editar.

¿Funcionan los formularios de acordeón en dispositivos móviles?

Sí, los formularios de acordeón funcionan en dispositivos móviles y, de hecho, mejoran la experiencia del usuario móvil para formularios largos.

En lugar de desplazarse por más de 30 campos en una pantalla pequeña, los usuarios ven secciones colapsables que pueden expandir una a la vez.

Sin embargo, siempre prueba tu formulario de acordeón en dispositivos móviles reales para asegurarte de que las secciones se expandan sin problemas y no requieran un desplazamiento excesivo dentro de cada sección.

A continuación, aprende cómo requerir una dirección de correo electrónico para descargar archivos

¿No sería genial requerir que los usuarios envíen sus direcciones de correo electrónico antes de descargar un archivo de tu sitio de WordPress? Aprende cómo animar a los usuarios a compartir sus direcciones de correo electrónico para descargar un archivo de tu sitio de WordPress.

¡Crea tu formulario de acordeón 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.