Add/manage form components (WCMS 2)

Owned by Sarah Cooper
Last updated: Nov 01, 2023
4 min read

How to add/manage form components

 

  1. Click the Webform tab to access the Form components sub-tab.

  2. Under Label, enter the new component name, e.g., “First name”. This
    text is used as a descriptive label when the form component is
    displayed. For example, the following screenshot has the Label 'First
    name'.

  3. Under Type, set component type, Textfield. To view other component types, see List of web form component types.

  4. Click the Add button to 'create' the component.

Editing form components

The next screen will allow you to edit the component.

Label

Automatically populated based on the previously entered component name.

Field Key

Automatically populated based on the previously entered component name. It is the machine readable key for this form element.

Default value

You can enter a value that will show in this field by default.

Browse available tokens

Special tokens can be entered in the Default value field that will be replaced with dynamic values, e.g., the token [current-user:cas:name] will display the CAS username of a user if they are logged in.

Note: Tokens after WCMS 1.8 have a different syntax than in previous versions of the WCMS. If a field or email is displaying %___ in place of a token, the token must be changed using the new syntax.

Description

You can enter a short description of the information the component is looking for. Text and tokens entered here will be displayed as ‘help text’ above the component field.

Browse available tokens: Special tokens can be entered in the Default value field that will be replaced with dynamic values, i.e., the token [current-user:cas:name] will display the name of a user if they are logged in. Note: tokens after WCMS 1.8 have a different syntax than in previous versions of the WCMS. If a field or email is displaying %___ in place of a token, the token must be changed using the new syntax.

Validation

Required

Allows you to make a component mandatory or required (check box to set).

Unique

Can be set to ensure values entered in a component field are unique, i.e. same value is not allowed to be used twice, two users cannot submit the same value (check box to set).

Maxlength

Allows you to restrict the number of characters that can be entered in the field. If left blank, the user could enter up to 128 characters.

Display

Width

Allows you to set the width of the textfield. If left blank, the width of the textfield will be set to the default browser setting (approximately 50 characters).

Placeholder

Allows you to display placeholder text (greyed) in a field until a value is entered.

Prefix text placed to the left of the textfield

Allows you to enter a label that should appear to the left of the component field, e.g., $, #, –.

Postfix text placed to the right of the textfield

Allows you to enter a label that should appear to the right of the component field, e.g., lb, kg, %.

Label display

Allows you to determine the placement of the component’s label relative to the data field. You have three options: Above, Inline, or None.

Disabled

Check this box to make the component field non-editable. Useful for setting an unchangeable default value.

Private

Will hide form field from user but previous data submitted will show in results. Useful if you no longer wish to collect specific information, but do not want to delete component (and all previously submitted data).

Wrapper CSS classes

Allows you to apply a class to the wrapper around both the field and its label. Users can only apply custom CSS to components if they have access to CSS.

CSS classes

Allows you to apply a class to the field. Users can only apply custom CSS to components if they have access to CSS.

Select this button to save your component settings.

  1. Select Save component button.

Additional operations

Edit

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

Clone

  • Allows you to clone (copy) an existing component.

  • Steps:

    1. Click Clone link on the component you would like to copy.

    2. Set a unique Field Key for the cloned component.

    3. Set component settings.

Delete

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

  • Note: You can rearrange the order of the form components by dragging and dropping the component by the cross arrows.