Forms

The Forms Container Component and the Form Options Component is differerent from [Adaptive Forms Link Here]. These two components work together. Forms Option component is never used outside of a Forms Container component.

Editor to Copy/Paste

Uses

It is currently primarily used to create drop-down call-to-actions (CTA). You can add links in a dropdown menu by configuring the Forms Options component within the Forms Container Component, as shown in the examples below.

By using the configuration dialogue and editor, define the action triggered by form submission, the URL that should handle the submission, and whether a workflow should be triggered.

This one navigates them once they select an item in the menu

This one navigates them after clicking the button

AARP in Your State

Discover AARP offices near you and stay informed about local news, events, and programs.

Choose Your State

Training Video

13:36

The configure dialog allows the content author to define what actions are taken when the component is submitted.

Depending on the selected Action Type, the available options within the container will change. The available action types are:

Properties Tab

Post Form Data:

When the form is submitted, the post form data action type will pass the submitted data on to a third party as JSON for processing.

Forms Container Properties Tab Post Form Data

Endpoint - The fully qualified HTTPS service that will process the data
Error Message - Message to display if the submission is not successful

Mail:

When the form is submitted, the mail action type will send an email to designated recipients.

Forms Container Properties Tab Mail Option

Subject - The subject of the email that will be sent on form submission
From - The from email address of the email that will be send on form submission
To - The addresses of the recipients who will receive an email upon form submission
- Tap or click the Add button to add additional addresses
- Tap or click the Delete button to remove an email address
CC - The addresses of recipients who will receive a carbon copy the email sent upon form submission
- Tap or click the Add button to add additional addresses
- Tap or click the Delete button to remove an email address

Thank You Page -

ID - HTML ID This can be used to identify a section of a page. It is used for anchor link tagging

Styles Tab

Forms Container Dialogue Styles Section

Form Variation Dropdown:

None - No style is selected.
Redirect On Button Click Dropdown - Once the button is select the page will redirect.ed to another page.

Redirect On Select Dropdown - Once a user selects the item in the dropdown, they will be redirected to another page.

Social Security QA WIdget -This functionality is only used for the Social Security Widget.

Basic - This functionality is very basic and not currently being used..

Forms Options Component Authoring Capabilities

The Core Component Form Options component allows for the selection from pre-defined options in various formats. Those options include the following:

Checkboxes
Radio Buttons
Drop-down
Multiselect drop-down

Forms Options Container component Image

Properties Tab

Main Section:

Type - Select the Type of Form Field. Author has the option of the following layouts:
- Checkboxes
- Radio Buttons
- Drop-down
- Multiselect drop-down

Title (Required Field) - The title that will be displayed as the label for the options.

Name (required Field) - The name of the field submitted with the form data.

Open in New Tab (Checkbox) - This checkbox indicates if the CTA or item is selected on drop-down open in a new tab.

Source - Where the options are defined
- Local - Defined within the component
  - Tab or click the Add button to add a value, Delete to remove a value.
    - Value - The value saved when that option is selected when the form is submitted.
    - Text - The label for the option displayed on the form.
    - Active - The option is marked as selected when the form loads.
    - Disabled - The option is not selectable but still displayed.

Options - Define the options. For single selection types, the last selected option in the list is selected in the result.

About Section:

Help Message - A hint for the user of what can be entered in the field.
ID - This is the HTML ID field, This option allows to control the unique identifier of the component in the HTML and in the data layer.
- If left blank, a unique ID is automatically generated for you and can be found by inspecting the resulting page.
- If an ID is specified, it is the responsibility of the author to make sure that it is unique.
- Changing the ID can have an impact on CSS, JS and Data Layer tracking.