Forms created in Quickbase are automatically available on mobile devices without any additional building needed. The forms canvas adapts to different screen sizes on desktop, tablets, and mobile phones. Learn more about assigning forms for mobile.
This article explains how forms display on mobile devices and adapt to different to different screen sizes and orientations.
How the form canvas translates to mobile devices
In Quickbase, forms are organized with pages, sections, and columns.
Pages can have multiple sections
Sections are collapsible and can have up to six columns
Columns have form elements
Quickbase automatically adjusts the height of a column to fit the form elements it has. You can customize the width of columns. On a desktop device, all six columns display side-by-side in a single row. Learn more about the form canvas.
Tablets
Forms provide tablet users with a similar experience to desktop when the tablet is held in the landscape position. The form is optimized to display the whole form with all six columns in a single row at 1080px wide.
If in the portrait position or less than 1080px wide, the form automatically adjusts the layout to be optimized for tablet viewing. Instead of displaying all columns in a single row, the form adjusts to have two columns per row and maintains an appropriate column width.
Mobile phones
Because mobile devices have limited screen width, each column in a section stacks up, one on top of the other. When there's enough space, the form displays two field elements side-by-side in a single row.
Form layout on mobile
View record mode
In View record mode the form header displays the following actions (depending on the configured end-user permissions):
Edit record
Additional actions menu:
Duplicate
Email
Add record
Delete
Users also have access to the mobile app’s bottom bar.
Add/Edit mode
In Add/Edit record mode the form header displays only the Cancel button, the bottom bar is hidden, and the form fills the full screen.
Save bar
The save bar appears at the bottom of the form and is always easily accessible to users. Depending on the builder configurations (as with desktop forms), the Save button will appear either as:
A single Save button (if only the standard Save option is configured); or
A split button where users can access all configured save options (Save & view, Save & keep working, Save & next/new, Save) or cancel.
The default Save button will always navigate the user back from where they opened the form (for example, from a dashboard or a report).
Tabs
If the form is set up to display pages as tabs, end users see the tabs bar at the top of the form at all times. Users can swipe through tabs, or tap the drop-down menu to view a list of the different tabs.
Steps
If the form is set up to display pages as steps, end users see the steps bar at the top of the form at all times. Users can navigate between steps by using the buttons for the next or previous step, or open the drop-down menu in the steps navigation bar to view the steps in a list.
