How To Create Forms Your Users Will Fall in Love With (Using Tabs)

How to Create Forms Your Users Will Fall in Love With (Using Tabs)

How to Create Forms Your Users Will Fall in Love With (Using Tabs)

 

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 Quick Base’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 Quick Base 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 Quick Base.  

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 Quick Base 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 Quick Base 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.

 

Application Relationship Diagram - Tabbed Forms in Simple Contact Manager

 

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.

 

Customers Table - Tabbed Forms

 

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.

 

Separating Tabs in Quick Base - Customer Table

 

Step 2.  On the Customers form, select ‘Customize this Form’ in the upper right corner of the page.

 

Edit Field - Tabbed Forms

 

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.

 

Form Elements Tabbed Forms

 

Step 4. Click the ‘Make a Selection’ dropdown on the field you inserted.  Select, ‘Tab’ from the dropdown.

 

Edit Dropdown Tabbed Forms

 

Step 5.  Add a label for the Tab that describes the fields contained in that tab.

 

Tab Properties Label in Quick Base Tabbed Forms

 

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.

 

Customer Table Customer Address Sections

 

Step 7.  Click the Save button.

 

Save Tabbed Forms

 

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 Quick Base expert I recommend that you attend our webinar in the coming weeks. You can also reference our Quick Base Help Guide to learn more about this feature!

 

 

Related Posts

Posted in How To's, Product Applications, Product Info | Tagged , , , , ,

Comments