Form Designer

In Form Preview navigation bar, press Design Form button, it opens the form designer sidebar. With form designer, you can easily customise your form’s look and feel.

Form Designer

Your change is reflecting to form preview immediately if your form has corresponding widgets. Only when you explicitly click Apply button, the changes are saved. Also, only when you publish this form (again), the new look-and-feel will be exposed to public users. You can Revert your change to last save state or Reset to default to restore to our default look and feel.

In form designer second tab, you can paste your CSS styles into that text box. Likewise, this CSS only apply to the new form when you publish the form (again). These styles have higher priority and will overwrite those default styles.

Reference: The controls in the form designer.

Name Description
Form Width Adjust the form width, in px unit.
Label Layout 4 options, Customise, Vertical, Horizontal or Hide; Customise means each label may have a different layout which is controlled by its properties dialogue in builder page.
Font Font for all text in your form, e.g, label, heading, descriptions, input text, button text etc.
Font Size Font size label. Our form designer will automatically adjust other text font size, e.g, heading, help text and button text size etc.
Line Spacing Spacing between lines
Label Width Only when your label layout is Horizontal or Customise, it impacts the width of the label and then impacts the width of the input field in the same line.
Navigation bar When your form has Page Divider, means the form has multiple pages(steps), it decides if a navigation bar is displayed on the top of the form.
ReCaptcha It is a Google widget with limited customisation options. You only can choose a light or dark theme for it.
Label Colour Label Colour. Our form designer also adjusts help text colour accordingly.
Input Colour Input text colour. Our form designer also adjusts its border and placeholder text colour accordingly.
Button Colour Button background colour. Our form designer also adjusts its border and button text colour accordingly.
Highlight Colour It is for input box border colour when it is getting focus. It is the colour of the navigation bar active item. It is also the link text colour in the description widget.
Background Colour The page background colour.
Signature Colour The signature background colour. Our form designer also adjusts its border, button and help text colour accordingly.
Navbar Colour Navigation bar background colour. Our form designer also adjusts its border and text colour accordingly.
Error Colour Error message text colour and input box border colour if it has an error.