I'm making a webpage where there are some really big forms. Splitting them is not an option (it's been done as much as it could). One of the longest forms has 20 "sections" each, with 1-6 items, some of which are checklists with over 15 options. I would like to know how to best make my form usable, since the number one complaint I get is how difficult it is to navigate the form, but no suggestion on how to improve it (I completely agree that it should be easier to navigate, but I'm at a loss when it comes to actually improving)
At the moment, each section is selected form a vertical "pills" menu (bootstrap); when you click a pill it displays the section of the form. Before it was simply a long wall of text. The current approach has many flaws: It requires too much clicking, you have to manually click each section to check if there are missing items, it's generally "hard to navigate"...
Right now, when a user wants to input or edit data they go to the form page and have to click at least one time for each "section" of the form. So first they'd have a checklist, fill it, then click to change section, fill the three radios there, click to change sections and so on. Before there was less clicking, since all of the form was avaliable in one screen, but it was too textual and "stuffed", and it was hard to look for a specific section to edit.
The main problem is that the same form is also used to edit the data, and having a progress bar would make navigation when editing a nightmare. I've been unable to find examples where very long forms are used, besides some horribly designed and nearly unusable "public service" websites. Links to websites that pull off something similar while remaining easy to navigate would be very welcome.