Content area & form layout

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.

Content Settings

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.

Action Bar Styling

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)

Footer

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.

Inline Steps

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.

Layout editor

Flows are rendered inside a layout that may include persistent elements like a logo, navigation buttons, and a progress bar.

Grid template

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.

Button Styling

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.