Create great looking multi-step forms for SharePoint

Hi,

As form designers, we are always torn between two opposites: trying to include all the necessary columns in our form and trying to create a form that is as short and simple as possible. Using modern forms in Ultimate Forms you can leverage the power of our Tabs control to subdivide the form into mutliple tabs, each containing a set of columns describing the same topic or area of the form.

To make it even simpler and easier for the customers to navigate the form, we can implement button navigation between tabs, clicking on Next after filling out columns on the current tab. Plus, we have the added benefit of always knowing at what stage of the form filling process we currently are.

With our brand-new Progress theme for our Tabs control, the multi-step form is becoming even more visual and user-friendly.

As you can see, the tab headings are now providing simple visual cues, guiding the user through the form. The buttons at the bottom are set to provide the sole means of navigating between the tabs, to ensure the users are filling the form step-by-step, as we intended.

Let's take a deeper look into how such a form can be configured using Ultimate Forms' Form Designer.

1. I am using a regular SharePoint Contacts list, but of course any list will do.
2. Click on Design on the list view to enter Ultimate Forms, then go into Form Designer.
3. On the design canvas, drag a Tabs control from the gallery on the left.
   
4. Click on the Tabs control to see its settings on the right.
5. First define the names of the tabs you want, then configure navigation options.
   
6. Things to notice here:
   1. Theme is set to Progress. There are several visual themes available for Tabs (and you can always use CSS to configure your own unique look), but Progress, our newest theme, is the most visually suitable for multi-step forms, in terms of its visual language, although the functionality always remains the same, regardless of the theme.
   2. Enable the option to show navigation buttons.
   3. Enable the option to only allow navigation through buttons (in this case, I'm only using this option in New form, but it's up to you).
7. Once done, you can further define the actual tabs. Click on the tab surface. If you end up selecting a column on the tab, you can always click on Tab in the breadcrumbs at the bottom of the canvas to reach the tab itself.
8. Here we can define the layout of the tab, as well as the icon and the callout (dynamic help). I defined a suitable icon for each tab.
   
9. Drag the columns from the gallery on the left into each tab. You switch between tabs by clicking on the tab header within the canvas.
10. I also aligned the buttons to the right by clicking on the button bar and configuring its settings.
    
    You can also modify the button set and add your own buttons.
11. The last thing I did was selecting a different theme for the whole form.
    
12. Publish the form, it is ready to be used!

As you can see, the form will display the process progress in a simple and obvious way, while guiding the user towards the next steps of the process.

This blog illustrates a simple multi-step process. Tabs control offers many other amazing features, such as hiding or showing tabs based on conditions, automatically opening a specific tab on form open based on conditions and many other powerful features we did not cover in this blog, but there are many other blog artilcles available.

Note: SharePoint uses service worker cache to store and serve pages and resources from a local cache. That can prevent the latest version of our script from loading and you won't be able to see the latest features in action. If that's the case, click F12, switch to Console tab, paste the following and click Enter, it will clear that cache:

caches.keys().then(function(names) {for (let name of names) caches.delete(name);});

Enjoy!