Content area & form layout
Last updated
Was this helpful?
Last updated
Was this helpful?
The Content section defines the layout and appearance of the main flow area—where steps are presented to the responder. This area includes multiple styling options to control the visual layout and structure of the flow.
At the top of the Content page, you’ll find list of global styling controls for the flow. Some of the more important settings are:
Favicon → Upload a favicon for your deployed page.
Loading indicator image → Display a custom image while the page is loading.
Show navigation sidebar → Table-of-contents-style panel on the left side of the flow
Padding → Adjust inner spacing for the content container.
Background color → Set the background color of the content area.
Content column and text alignment → Justify content horizontally.
Max width → Set a maximum width for the content container.
Vertical alignment → Control vertical placement of the content block.
The Action Bar is the area where navigation buttons (Next, Back, etc.) and other elements like the progress bar may reside. Styling options include:
Background color
Bar shadow (visual effect similar to box-shadow)
The Footer section supports customization for:
Background color
Padding
Vertical positioning (above or below the bottom action bar)
You can also enable:
Show cookie management link → Loads Osano (if configured in your privacy policy) to let users manage cookie preferences. If Osano is not used, Formsort will use local storage.
The Show all steps inline setting renders all steps in a single, scrollable column. This layout makes the entire flow appear as a continuous vertical page. You can also control the opacity of inactive steps to help responders see where they are.
This feature is still in Beta.
Flows are rendered inside a layout that may include persistent elements like a logo, navigation buttons, and a progress bar.
The Layout editor uses a grid system for positioning UI elements. You can define the number of rows and columns for each Action Bar (top, inline, bottom), then drag and drop components such as:
Buttons (Next, Previous, Exit, Select)
Progress bar
Logo
This gives you fine control over positioning and layout.
Click any button to open its styling menu. Options include:
X/Y position → Adjust button placement.
Alignment → Set horizontal and vertical alignment.
Height/Width → Define how many rows or columns the button spans.
To access additional styling properties, click the Style → link at the bottom of the button menu to open the advanced button styling page.
