FORM DESIGNER

In the Form Preview toolbar, click Design Form to open the Form Designer side panel. Use the form designer to customise the look and feel of your form.

form-designer-sidebar

Designing the form

In the Form Preview toolbar, click Design Form to open the Form Designer side panel. Use the form designer to customise the look and feel of your form.

Saving the form Changes are visible live on the form (if it has connected widgets), which lets you experiment until you get things right. When you’re finished, click Apply to save your changes.

Viewing changes The next time you publish your form, it will reflect the changes and adopt the new look-and-feel for public users. If you’re not happy with your changes, you can revert the design back to the last saved state, or reset to default—it’s up to you.

Custom CSS On the Form Designer, click the CSS tab, and add your CSS styles to the text box. Custom CSS will override any other styling set in the designer. To save your styles, click apply. Any changes will be visible the next time you publish a form.

Controls of the Form Designer

The following controls are used for designing your form.

Name Description
Form Width Adjust the form’s width in pixels.
Label Layout Four options: Customise (to control each layout from the properties dialogue), Vertical, Horizontal, or Hide.
Font The font used for all text on the form.
Font Size The font size. The form designer will automatically adjust the headers and other differing text size.
Line Spacing The spacing between lines.
Label Width For Horizontal or Customise layouts: it adjusts the width of the label and the input field on the same line.
Navigation Bar The navigation bar is displayed when a form contains multiple pages. Multiple pages are created using Page Divider.
ReCaptcha Select either light or dark themes for the reCaptcha.
Label Colour The font colour for help text.
Input Colour The border and placeholder colour.
Button Colour The border and button colour .
Highlight Colour The colour of the the input box border colour (when focussed/selected), active items in the navigation bar, and the link text in the description widget.
Background Colour The background colour of the page.
Signature Colour The background colour of the signature.
Navbar Colour The background colour of the navigation bar.
Error Colour Error message text colour, and the border colour of the input box.