Style

Style settings give you full control over the form's appearance across 5 sub-tabs: Global, Form, Buttons, Pages, and Custom CSS.

Global

Responsive Columns

The screen width at which multi-column layouts automatically stack into a single column. Options:

• Phone portrait (479px): Portrait phone
• Phone landscape (767px) (default): Landscape phone
• Tablet landscape (1024px): Landscape tablet

Note

This is the global default for the Row responsive breakpoint. Row elements can choose Inherit to use this setting.

Form Width

Enter a CSS value for the form width. Options: 1200px, 800px, 500px, 100%, 80%, auto. You can also manually enter other CSS values.

Vertical Element Spacing

The vertical spacing between form elements. Options: 5px, 15px, 30px, 45px. You can also manually enter other values.

Button Position

The horizontal alignment of the submit button and the multi-page form navigation buttons. Options:

• Alignment at both ends (default): Justified (Submit on the right, Prev/Next on the left)
• Center: Centered
• Left: Left-aligned
• Right: Right-aligned

Preview Background Color

The background color of the preview panel on the right side of the editor, so you can simulate how the form will actually appear on the page while designing.

Form

Style

The overall style of the input fields. Options:

• Default (default): Standard style, input fields have borders
• Outlined: Outlined style
• Underline: Underline style

Size

The size of the input fields. Options:

• Default (default): Standard size
• Slim: Compact size

Label Color

The color of the label text. Supports opacity adjustment.

Label Strong

The font weight of the label text. Options:

• 500
• 600 (default)
• 700

Field Color

The color of the text inside the input field. Supports separate settings for three states:

• Default: Default state
• Hover: Mouse hover state
• Focus: Focused state

Three-State Color

Setting different colors for the three states provides better interaction feedback. For example, use a brand color for the Focus state to highlight the field currently being filled in.

Field Border Color

The color of the input field border. Also supports three states: Default, Hover, Focus.

Field Background Color

The background color of the input field. Also supports three states: Default, Hover, Focus.

Description Color

The color of the field description text.

Label Position

The display position of the label. Options:

• Vertical (default): Label displayed above the input field
• Horizontal: Label displayed on the left side of the input field
• Hidden: Label not displayed

Note

Unlike the Label position of an individual element, the global setting has no Inherit option (because this is the setting that elements inherit). Individual elements can choose Inherit to use this setting.

Icon Position

The display position of the field icon. Options:

• Start (default): Icon on the left side of the input field
• End: Icon on the right side of the input field

Required Indicator Text

The marker symbol for required fields (such as *).

Reset Color

Click the Reset Color button to reset all colors on the Form tab to their default values.

Buttons

The button settings include three sub-tabs: Submit (submit button), Next (next page button), and Back (previous page button). Each button can be configured independently.

Button Style

The button style. Options:

• Default (default): Solid button
• Plain: Plain button (outlined style)

Button Color

The background color of the button.

Button Hover Color

The background color of the button when the mouse hovers over it.

Three Independent Buttons

The Submit, Next, and Back buttons can each be set with different styles and colors. For example, use the brand color to highlight Submit, and use lighter colors for Next/Back.

Pages

Controls the style of the page indicator for multi-page forms.

Style

The style of the page indicator. Options:

• Default (default): Show the page indicator
• None: Do not show the page indicator

Title Color

The color of the title text in the page indicator.

Title Size

The size of the title text in the page indicator. Options: 16px, 18px, 20px. You can also manually enter values.

Description Color

The color of the description text in the page indicator.

Description Size

The size of the description text in the page indicator. Options: 14px, 15px, 16px. You can also manually enter values.

Line Color

The color of the divider lines in the page indicator.

Accent Color

The accent color for the current/completed page in the page indicator.

Custom CSS

Custom CSS Code

Write CSS directly to add custom styles to the form. Placeholder hint: #id{}, using #id as the selector.

Usage Recommendation

Custom CSS lets you make fine adjustments that aren't possible in the style settings. Use the form's #id as the selector to limit the styles to the current form.

Example: Customize the submit button style

#id .form-element .btn-default{
    line-height: 50px;
    height: 50px;
    padding: 0 38px;
    border-radius: 4px;
    font-family: var(--family2);
}

In this example, all .btn-default buttons inside the form get a fixed height of 50px, padding of 0 38px, a border radius of 4px, and the font defined by the --family2 CSS variable.

Next Steps

• Notifications — Configure email notifications
• Form Settings Overview — View all setting categories