I'm working with wordpress.org and have a form created by GeoDirectory plugin. This form has over 20 input fields and looks very big on the page. The plugin doesn't support multi-page functionality so I'm trying to figure this out on front-end.

What I'm trying to figure out is what is the best way to convert the form(all elements visible) to a multi-page form (pagination). It has been suggested to me to use something like Bootstrap Accordion element but I'm skeptical about manipulating the initial form.

What I have though of doing is to create another form which won't have any form submit and take those values and place them in the initial (hidden) form. But I'm also unsure if this is going to work. Let me know for other solutions and tips. My main concern is performance and data loss.

Thanks.

UPDATE:

What I have done so far is to collect the form in a JavaScript array. Then I created a 2d array to hold a section and for each section there is a secondary array that holds form input fields. The 2D array looks like this:

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

I managed to create the visual representation of a multipage form which looks like this:

I'm about to create the functionality for the next / previous buttons and I wanted to ask first if the above solution is applicable. Please let me know if you have any comments that would improve the above solution.