Form components

In order to add or manage the components of a form, a Web form needs to be created. See How to create a web form for detailed instructions. Form components create the structure and fields of web forms where users will be able to provide information.

There are three different types of Form Components, which include:      

• Elements – Creates different types of pre-programmed fields that users can enter information into or displays information for users to read.    

• Page – A container for elements to be grouped and added to a page. Pages can be used to organize groups of elements collecting similar information.    

• Layout – Will enable a flexbox layout that formats elements horizontally beside each other.  

How to add elements to a form      

1. From the administration toolbar, select Workbench, then select My Dashboard.    

2. Navigate to the Forms list.    

3. Locate the Web form you would like to add an element to.    

4. Under the Operations column of that Web form, select Build.

   Open

   

           

5. Select + Add element.

6. Choose an element and select Add element.

   Open

   

7. Configure the element in the General tab that will appear.        

   • Enter Title (required).        

   • Select Save.    

8. Select Save elements, at the bottom of the page.  

Note: Every element has different options unique to the function that it holds and to the type of information that it is collecting or displaying.

How to add a page      

1. From the administration toolbar, select Workbench, then select My Dashboard.    

2. Navigate to the Forms list.    

3. Select Build under the Operations column of the desired form.    

4. Select + Add page.    

5. Enter the Title into the page, which will appear on the side.    

6. Select Save on the same page.    

7. Nest existing elements under the created page by dragging and dropping the element by the cross-arrows, or create new elements on the page by selecting + Add element to have those elements display on that page.

    Note: Adding a single page will not have any effect as web forms are already shown on a single page.    

8. Repeat steps 4-7 to add another page.    

9. Select Save elements. If done correctly, the indentation for your elements under your pages should appear like this:

10. Check to see if the pages are displaying in the desired way by selecting the View tab and selecting Next page to view the pages you have created.  

How to add a layout      

1. From the administration toolbar, select Workbench, then select My Dashboard.    

2. Navigate to the Forms list.    

3. Select Build under the Operations column for the desired form.    

4. Select + Add layout.    

5. Enter a key in the Key field of the page, which will appear on the side. A Key is a unique element key that can only contain lowercase letters, numbers, and underscores.    

6. Choose the preferred alignment from the drop-down menu under Flexbox settings.    

7. Select Save on the same page.    

8. Nest existing elements under the created layout by dragging and dropping the element by the cross-arrows, or create new elements by selecting + Add element beside it to have those elements displayed in the layout. If done correctly, the indentation for your elements under your pages should appear like this:

9. Select Save elements. Below are examples of how the different alignments will display as well as how layouts should appear:    

Alignment: Top    

Alignment: Bottom   

Alignment: Center  

How to edit components     

1. From the administration toolbar, select Workbench, then select My Dashboard.    

2. Navigate to the Forms list.    

3. Select Build under the Operations column for the desired form.    

4. Locate the component you would like to edit and select Edit.    

5. After changes are complete, select Save.    

6. Select Save elements.  

How to rearrange components      

1. From the administration toolbar, select Workbench, then select My Dashboard.    

2. Navigate to the Forms list.    

3. Select Build under the Operations column of the desired form.    

4. Rearrange the order of the form components by dragging and dropping the component by the cross-arrows.

5. Select Save elements.  

Note: Rearranging the elements will change the order of the elements on the form for the users.

Additional operations      

• Edit - Allows you to make any edits to the component settings.    

• Duplicate - Allows you to duplicate a form element.    

• Delete - Allows you to permanently delete a component from your form. This action cannot be undone.  

Helpful definitions      

• Required - Makes the field mandatory for the user.    

• Key - A unique element key that can only contain lowercase letters, numbers, and underscores.