Interacting with Form Builder Elements

Adding New Elements

To add an element to the form, hover over the horizontal bar in the area where you want to add the element and click the plus sign (+).

Note: The horizontal bars above and between existing pages add additional pages. The horizontal bars within pages add elements.

Selecting Elements

Hovering over the icon for an element changes the icon to a checkbox, which you can use to select one or more elements. The number of elements selected is displayed at the top of the left pane of the page. Options to move, clone, and delete the selected elements are also displayed in this pane.

Note: Selecting an element that contains multiple elements, such as a page or a section, will select any dependents of the parent element. Only the parent element is counted in the row at the top of the left pane.

Searching for Elements

To search your form for a specific element, click Search Elements, then enter the name of the element you're searching for in the search box. A list of elements that match your search will be displayed.

Cloning Elements Within Forms

To clone an existing element on the form, hover your cursor over the element you want to clone, then click Clone. The cloned element will be inserted directly below the element it was cloned from.

Cloning Elements from Other Forms

You can also add elements to a new form by cloning an entire page or a single element from an existing form. Follow these steps to clone an existing element:

  1. Click the horizontal bar in the area where you want to add the cloned element.
  2. Click Clone From Another Form.
  3. From the Kapp list, select the form's parent Kapp.
  4. In the Form box, search for and select the form you want to copy from. The search box will return forms with a name, slug, or category that matches the search criteria.
  5. Search for and select the page or element you want to clone in the Page to Clone or Element to Clone box.
  6. Click Clone Page or Clone Element. The cloned item will be inserted in the position where the plus sign was clicked.

Clone From Another Form option

Expanding and Collapsing Elements

Page and section elements can be collapsed to save space and then expanded again when needed.

To collapse an element, hover over the element you want to collapse, then click either Collapse or Collapse All . Expand it again by clicking either Expand or Expand All .

Moving Elements

Follow these steps to reposition an existing element:

  1. Hover over the element you want to move, then click Move.
  2. Click Move Here in the location where you want to move the element.

Note: Moving an element that contains dependent elements (such as a page or a section) will also move the dependent elements.

Removing Elements

Follow these steps to remove an element from a form:

  1. Hover your cursor over the element you want to delete, then click Delete.
  2. A confirmation dialog is displayed. Click Delete.

Note: Deleting an element that contains dependent elements (such as a page or a section) will also delete the dependent elements.

Keyboard Shortcuts

The keyboard shortcuts below are available in Form Builder. You can click the question mark to view this list from the Form Builder directly.

  • Save Form: Ctrl + S
  • Save as New: Ctrl + Shift + S
  • Undo: Ctrl + Z
  • Redo: Ctrl + Y
  • Search Elements: Ctrl + K
  • Focus Element: Ctrl + L
  • Focus Form: Ctrl + O

Additionally, the following shortcuts are available when an element is in focus:

  • Move Focus Up: Up arrow
  • Move Focus Down: Down arrow
  • Move Focus Out: Left arrow
  • Move Focus In: Right arrow
  • Collapse Element: Shift + Left Arrow
  • Expand Element: Shift + Right Arrow