Form Elements

Use form elements to add text, fields, and options to your form to guide your customers and collect relevant data.

Form elements are grouped into three categories:

  • Static - elements intended to provide information to the form user, e.g. a text block.

  • Input - elements intended for the customer to complete, e.g. a checkbox.

  • Advanced - input elements with specific functionality, e.g. a CAPTCHA element.

From the Forms menu, open a form and:

  • Add an element - use the + Create Element button to open the add element window.

  • Order your elements - using the arrow icons, drag-and-drop to change the element order in the table.

    The order of elements in the list is the order in which they appear on your form.

    Tip: the Table field column displays the associated field name for that element. A Not recorded entry means the element is not associated with any data table field name.

  • View element settings - select a form element from the list to view:

    • The Element Overview tab - view element information, change the element type, or remove the element from your form using the Delete Element button.

    • The Settings tab - view and update the settings entered when you first created the element.

    • The Actions tab - view or create actions for the element, e.g. add to list, when the form is submitted.

Adding elements to a form

  1. Open or create a form.

  2. On the form overview tab, press the + Create Element button.

  3. In the element select window, choose the element to add.

  4. Press the Okay button.

  5. Enter your element settings. These will depend on the element type.

    Example: if you add a Heading element, you will need to:

    1. Provide a name for the element.

    2. Give the element a label (how it is identified in the table; not displayed on the form).

    3. Enter the heading text.

    4. Enter the HTML class for the element.

  6. Press the Save button.

Tip: if you have an element with prefilled data that you want to prevent being overwritten:

Add javascript for each field that you want protected.

Put the following code in the JS text area in the form settings (using the element name and ID found in the Element Overview) .

Copy 
document.getElementById('amf-input-[element_name]_[id]').disabled = true;

Once applied, form fields will be greyed out and uneditable.

Element types

Static form elements

Input form elements

Advanced form elements