Design elements

Images

Image fields can add a banner, logo, or other images within your form.

To add an image to your form:

  1. Locate the Add An Image field in the Design elements section of the available fields panel on the left-hand side of the screen.

  2. Drag it to the appropriate place on your form.

You can optionally set the alignment and width of the image before saving.

Headings

Add a main heading and other headings at the top of your form to break up form sections.

To add a Heading field to your form:

  1. Locate the Add A Heading field in the Design elements section of the available fields panel on the left-hand side of the screen.

  2. Drag it to the appropriate place on your form.

While editing your field, click Show Advanced Options to apply specific styling options to this heading.

Field group

A field group is a way to group multiple fields into one section.

To add a field group to your form:

  1. Locate the Field Group module in the Design elements section of the available fields panel on the left-hand side of the screen.

  2. Drag it to the appropriate place on your form.

  3. Supply a name for the field group.

  4. Drag the required fields into the group. Fields can be dragged either from the available fields panel or from the body of the form itself.

Formatted text

Add some formatted text for use as an introduction or extra text content throughout your form.

To add a Formatted Text module to your form:

  1. Locate the Add Formatted Text module in the Design elements section of the available fields panel on the left-hand side of the screen.

  2. Drag it to the appropriate place on your form.

While composing your text, you have all the typical features available with rich-text editing. This includes:

  • Bold

  • Italic

  • Underline

  • Text color

  • Text size

  • Text alignment

  • Lists

  • Images

    Images can be aligned with the text on the page.

    Ensure the text alignment setting in the Formatted Text menu bar and the alignment in the image settings bar match. For example, both alignment settings must be set to centered to center the image.
    Example
    image alignments
  • Links

  • HTML

  • Tables

    Tables in the Formatted Text module are static tables.

    You can use a Field Table if you want to add a dynamic table.

Divider

Add horizontal line dividers to help visually break up sections of your form. You can set the color, width, and spacing around the horizontal divider line.

To add a divider to your form:

  1. Locate the Horizontal Divider field in the Design elements section of the available fields panel on the left-hand side of the screen.

  2. Drag it to the appropriate place on your form.

Colours and font styles

Brand your form using the colors and fonts of your choosing.

The global form styling settings can be found on the left-hand side of the Form Builder tab.

These are optional settings where you can:

  1. Change the colors throughout your form.

  2. Change the font and text size used throughout your form. We recommend a text size of 14 or 16px for the main text.

  3. Add a form border.

  4. Save all styling settings as a theme that can be applied to other forms you manage.