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

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

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

Cree su formulario acordeón de WordPress ahora

En este artículo, le mostraremos la forma más sencilla de diseñar un formulario acordeón para potenciar la funcionalidad y la experiencia de usuario de su sitio web.

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

Para crear un formulario con diseño de acordeón en WordPress, puede confiar en la simplicidad y funcionalidad de WPForms. Siga los siguientes pasos para empezar:

1. Instale y active WPForms

Lo primero que vamos a hacer es instalar y activar WPForms.

WPForms es un plugin avanzado y fácil de usar para crear todo tipo de formularios. Viene con más de 2.000 plantillas de formularios de WordPress y un montón de características para aumentar la funcionalidad de su sitio.

Para empezar, diríjase a WPForms y regístrese para obtener una cuenta. Tenga en cuenta que para este tutorial, vamos a utilizar una licencia Pro, pero se puede utilizar cualquier nivel de licencia que desee.

¿Necesita ayuda para instalar WPForms en su sitio web? Echa un vistazo a este tutorial sobre cómo instalar plugins de WordPress.

Una vez instalado el plugin, no olvides activarlo.

Una vez que haya terminado con ese paso, vamos a instalar WPCode y añadir el fragmento de código que hace que el estilo acordeón se unen.

2. Instale WPCode y añada el fragmento de código del acordeón

Para que la magia del formulario acordeón funcione, necesitamos instalar el plugin WPCode, que funciona con WPForms. Por favor, asegúrese de completar las dos partes de este paso: la instalación de WPCode y añadir el fragmento de código acordeón.

Cuando instale el plugin WPCode en WordPress, tendrá acceso a una biblioteca especial de fragmentos de código sólo para usuarios de WPForms. No olvide activar el plugin después de instalarlo.

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

Desde su panel de WordPress, navegue a WPForms " Herramientas en la barra lateral izquierda de navegación. En esa página, seleccione la pestaña de fragmentos de código.

Tenga en cuenta que si no tiene instalado WPCode, no verá la opción Fragmentos de código.

Desplácese o utilice la función de búsqueda para localizar el fragmento deayuda de la plantilla de acordeón.

Haga 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 tienes que hacer en esta página es activar el fragmento y hacer clic en Actualizar.

Ya está listo para crear su formulario.

3. Crear un nuevo formulario

Desde el panel de administración de WordPress, vaya a WPForms y haga clic en Añadir nuevo en la lista de opciones.

A continuación, asigne un nombre a su formulario. Puede seleccionar una plantilla existente basada en sus requisitos específicos, pero para nuestros propósitos en este tutorial, vamos a empezar con un formulario en blanco. Esto le dará una mejor idea de cómo crear el formato acordeón.

Ahora se le dirigirá a la pantalla Campos, donde los campos disponibles aparecen en el panel izquierdo. Los campos a los que tenga acceso dependerán de su nivel de licencia.

En el panel derecho, verás una vista previa editable de tu formulario. Si has seleccionado un formulario en blanco, no te preocupes porque no haya nada para empezar. Arrastrarás y soltarás allí los elementos de tu formulario y ¡no estará en blanco por mucho tiempo!

Construya su formulario utilizando divisores de sección

Cuando empiece a crear su formulario, piense en cómo quiere agrupar la información. Es decir, ¿qué información quiere que se incluya en el desplegable cuando se abra el acordeón del formulario?

Para cada una de esas secciones, debe añadir un campo divisor de sección. Nombra el campo como quieras que se llame esa sección de información.

Nuestro ejemplo es un formulario de solicitud, así que empezaremos 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 de formulario que desees debajo de él en la forma que desees.

Añadir saltos de página

Una vez que los campos estén todos en su lugar, añada un campo Salto de Página en la parte inferior de cada una de las secciones del formulario.

Nota: cuando añada el salto de página inicial, haga clic en él para abrir las opciones de campo. En el lado izquierdo, verá un menú desplegable en el que puede realizar cambios en el indicador de progreso. Seleccione Ninguno. Sólo necesita hacer esto una vez por formulario.

Si omite este paso, el acordeón seguirá funcionando, pero habrá una barra de progreso inactiva en la parte superior del formulario cuando esté activo.

Después de añadir el salto de página, repita el proceso para tantas secciones como vaya a tener su formulario.

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

4. Añadir la clase CSS

Llegados a este punto, deberías tener todo el formulario creado. Cada sección de su 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 desplegables del acordeón.

Ya has activado el fragmento de código antes de iniciar el formulario. Sólo queda una cosa súper fácil por hacer. Tienes que añadir la clase CSS que lo unirá todo.

En primer lugar, guarde su formulario. Con el generador de formularios aún abierto, vaya a la opción Configuración en el menú de la izquierda. Aparecerá por defecto la página General. Desplázate hacia abajo y haz clic en Avanzado.

A continuación, introduzca wpf-accordion-form en el campo Clase CSS del formulario.

Una vez introducido el código, haz clic en el botón Guardar . Mientras estamos en la configuración, vamos a actualizar nuestras notificaciones y confirmaciones de formularios.

5. Configurar notificaciones y confirmaciones

Es crucial configurar los mensajes y notificaciones que aparecerán después de que un usuario rellene y envíe el formulario.

Esto es fácil de hacer. Vaya a la pestaña Configuración y seleccione Notificaciones.

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

A continuación, en la pestaña Configuración, seleccione Confirmaciones para modificar el mensaje que recibirán sus 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.

Publique su formulario acordeón

Una vez que haya terminado de actualizar las confirmaciones y notificaciones de los formularios, ya puede publicar.

Hay diferentes maneras de incrustar un formulario en WordPress. Vamos a utilizar el botón de incrustación para nuestro tutorial, pero si quieres probar otra forma, echa un vistazo a nuestro post sobre las 3 formas de incrustar un formulario en tu sitio de WordPress.

Con el formulario abierto en el constructor de formularios, simplemente haga clic en el botón Incrustar en la parte superior derecha.

Una ventana modal le preguntará si desea incrustar el formulario en una página existente o crear una página nueva.

Si quieres 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 hayas seleccionado o creado. Si todavía parece un formulario multipágina, no te preocupes. Haz clic para previsualizar la página y deberías ver tu formulario acordeón.

Ahora estás listo para publicar tu página y dar a conocer tu formulario acordeón al mundo.

Una vez publicado el formulario acordeón, sólo queda asegurarse de que funciona según lo previsto probando el formulario incrustado.

¡Enhorabuena por completar su formulario acordeón!

Preguntas frecuentes sobre el formulario acordeón

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

¿Cuáles son los pros y los contras de los formularios en acordeón frente a los formularios multipágina?

Un formulario en acordeón permite incluir más contenido en un espacio reducido, pero puede resultar abrumador si no está bien diseñado.

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

Utilice etiquetas concisas y claras. Utilice títulos y evite denominaciones como "Sección 1".

¿Cómo se diseñan los formularios acordeón para escritorio y móvil?

Para diseñar formularios en acordeón que sean responsivos y funcionen sin problemas tanto en ordenadores de sobremesa como en móviles, ¡considera registrarte en WPForms!

A continuación, aprenda a solicitar una dirección de correo electrónico para descargar archivos

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

Cree su formulario acordeón de WordPress ahora

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin más sencillo para crear formularios en WordPress. WPForms Pro incluye un montón de plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ha ayudado, síguenos en Facebook y Twitter para más tutoriales y guías gratuitas sobre WordPress.