Estoy trabajando con wordpress.org y tengo un formulario creado por el complemento GeoDirectory. Este formulario tiene más de 20 campos de entrada y se ve muy grande en la página. El complemento no admite la funcionalidad de varias páginas, por lo que estoy tratando de resolver esto en el front-end.

Lo que estoy tratando de averiguar es cuál es la mejor manera de convertir el formulario (todos los elementos visibles) en un formulario de varias páginas (paginación). Me han sugerido que use algo como el elemento Bootstrap Accordion, pero soy escéptico sobre la manipulación de la forma inicial.

Lo que he pensado hacer es crear otro formulario que no tendrá ningún envío de formulario y tomar esos valores y colocarlos en el formulario inicial (oculto). Pero tampoco estoy seguro de si esto va a funcionar. Avísame para otras soluciones y consejos. Mi principal preocupación es el rendimiento y la pérdida de datos.

Gracias.

ACTUALIZAR:

Lo que he hecho hasta ahora es recopilar el formulario en una matriz de JavaScript. Luego creé una matriz 2d para contener una sección y para cada sección hay una matriz secundaria que contiene campos de entrada de formulario. La matriz 2D se ve así:

 let section1 = [input1,input2,input3]; .... let array = [section1, section2, section3];

Logré crear la representación visual de un formulario de varias páginas que se ve así:

Estoy a punto de crear la funcionalidad para los botones siguiente/anterior y quería preguntar primero si la solución anterior es aplicable. Avíseme si tiene algún comentario que pueda mejorar la solución anterior.