How To Create Forms Your Users Will Fall in Love With (Using Tabs)
Written By: Molly Head
July 27, 2017
5 min read
Are your end users having a hard time scrolling through long forms? As part of our July 2017 Product Release, now you can make complex forms easy to navigate with Quickbase’s enhancement that enables you to add tabs to forms!
Why Use Tabbed Forms?
Forms with tabs will aid in the effort of seamlessly guiding your end users through their workflows within Quickbase applications. Adding tabs to forms enhances usability, eliminates scrolling, and can prevent critical data from being missed by your users.
This feature is especially beneficial when you have long, complex forms that contain a large number of sections and fields. Organizing information into separate tabs presents fields and sections in a way that is easy for users to view and act on and provides clarity and context about the requested information. As a builder, creating forms with tabs will give you increased confidence that you can easily keep track of complex work in Quickbase.
We listened to customer feedback to design this feature, which enhances the end user experience with minimal build effort. As a Customer Success Manager, I am always looking for ways to help my clients optimize their use of Quickbase and so I could not be more excited about this valuable new feature!
We’ll walk through a simple example scenario for the purposes of this “How To” post, but certainly understand that the instances in which you will find this new feature useful are almost limitless. I will use the application called ‘Simple Contact Manager’, which is available for download in the Quickbase Exchange.
The ‘Simple Contact Manager’ app is one of our most popular ready-to-use applications. It provides the structure for you to keep an entire sales, customer service or outreach team organized. The primary purpose of this application is to track contact information and communication in a consolidated application. Download this application and follow along with me!
Application Relationship Diagram
To familiarize yourself with how this app is designed, check out the application Relationship Diagram. On the application home page, click Settings → App Management → Show Relationship Diagram.
It is important to note that for our example, we will be focusing primarily on the information in the Customers table. Often, long complex forms are created because field information is shared across multiple tables. Adding tabs to forms will allow you to consolidate a large volume of information without having to scroll through many sections.
Scenario – Adding Tabs to Forms to Improve User Experience
In this scenario, imagine that you are the application manager for the ‘Simple Contact Manager’ app and want to improve the form design to make it easier for your team to view and enter contact and communication information about their customers. Your goal is to increase user productivity by adding tabs to the form in the Customers table that correspond to the existing form sections. Tabs can be added to new or existing forms.
How to Add Tabs to Forms
Watch the video demo:
Step 1. In the Customers table, select the edit (pencil) icon next to one of the records in the table. In my example, I selected the ‘Acme Staple Company’ entry.
All of the form content appears on a single page, which may require you to scroll down the page to see all of the fields. Think about which sections you would like to include in individual tabs.
A single tab can contain multiple sections. In this example, let’s put the Customer and Address information on one tab. We’ll also create separate tabs for Contact Info, Activities and Documents.
Step 2. On the Customers form, select ‘Customize this Form’ in the upper right corner of the page.
Step 3. In the form elements area, navigate to the [Customer] section heading and then click the ‘Insert’ button at the bottom of the Form Elements list.
Step 4. Click the ‘Make a Selection’ dropdown on the field you inserted. Select, ‘Tab’ from the dropdown.
Step 5. Add a label for the Tab that describes the fields contained in that tab.
Tip: If the tab matches an existing Section Heading, you may choose to remove the Section Heading altogether to eliminate redundancy on the form.
Step 6. Repeat steps 3-5 to create tabs for Contact Info, Activities and Documents. All the form elements that appear underneath a tab are in that tab. For example, per the screenshot included below, the Customer tab includes the Address section as well as the primary Customer detail fields.
Step 7. Click the Save button.
There you have it. Within a few minutes, you have improved the form’s appearance and enhanced the end user workflow! Once tabs are created within a form, specific tabs can be hidden based on user role customization or Dynamic Form Rules.
To learn more about how to add tabs to forms from a Quickbase expert I recommend that you attend our webinar in the coming weeks. You can also reference our Quickbase Help Guide to learn more about this feature!