Vladi Gubler
Vladi Gubler
July 25, 2022

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!

Loading...

Add your comment

Comments are not meant for support. If you experiencing an issue, please open a support request.
Build powerful business applications in SharePoint using only your browser.
100% No-Code Solution
It’s never been easier to create, innovate, and share. All you need is your web browser!
Cost-Effective
Address business process pain points immediately. Save time and money.
Fantastic Support Team
In addition to our responsive support team, a wide variety of resources, documentations, tutorials, blogs and webinars is available to you
Flexible Forms
Convenient responsive forms, featuring tabs, permissions, dynamic rules, repeating sections, electronic signatures and input validation
Intuitive Automation
Replace complex workflows with simple, but versatile actions to create and update data inside SharePoint and in a variety of integrated applications
Clear Reporting
Present data as actionable insights with detailed shareable reports, dashboards, calendars and charts
100’s of Templates
Build and replicate business solutions with ease, selecting from our vast free library and creating your own custom templates
Dive deeper
Watch a short introductory video showcasing the different unique capabilities of UltimateForms.
Microsoft partner logo
© 2005-2024 Infowise Solutions Ltd. All rights reserved.
Privacy | Cookie Policy | Accessibility | Cloud SLA
Pick a solution template to install
Solution Templates
Webinar Templates