Skip to main content
Kinetic Community

Builder Basics

Overview

Common Builder features

Details

The builder is where all forms are details are added/updated.

Header Options

A few of the features of the builder are common across all the different elements and fields.

In the top right of the console is the last date/time saved, an Actions button, and a Save button.

Actions has the following options:

  • Preview - opens the form in a new browser tab or window
  • Reset - undo the last action
  • Export Form - exports the json of the Form
  • View Submissions - Opens the Submissions tab of the Form Overview console in a new tab or window

If the Save action is successful a green banner appears at the top of the browser. If there is an error during the save an error message appears on a red banner. No changes are saved if there is an error during the save process.

On the Left side of the header across from the Save button is the name of the Form, and a Less Than (<) symbol. Clicking on the < symbol returns to the Form Overview console.

Help in the upper right opens a separate tab with documentation on Javascript, API actions, and Bundles. Note that the API documentation within the tool has a "try-it" option. This option allows you to actually interact with the API to see how it works, but note that you are actually interacting with the system live. If you delete or update records, that action will actually occur.

Main Panels

The remainder of the Builder is divided into three panels, Content and Fields, Form elements and settings, and details of the Form elements.

Content and Fields

Contents and Fields provide the building blocks for Forms - Content (Pages, Buttons, Sections, Text, and Buttons) and Fields (Questions).

These options do not change. Click and drag an element to add to a Form.

Form Elements and Settings

Form elements and settings shows all of the pieces that have been added to a Form.

Content and Fields are added by selecting and dragging from the left panel into the center panel. In some cases (a page or section highlighted) an arrow will appear on the Content or Field elements. Click the arrow to add that element into the highlighted element. Typically a dashed rectangle highlights the position that the element will end up in when it is moved.

Once elements are added, they can be moved by clicking and dragging from one position to another. Again, the dashed rectangle shows what position the element will end up in.

Quickly copy elements by selecting an element and clicking the green icon.

Delete elements by clicking on the red x.

Element Details

When an element is selected in the Form settings panel, its details are available to view and modify on the Details panel. See the following articles for more on each elements details.