REA Automation Form node

Use the REA Automation Form node to create user-facing forms with multiple steps. You can add other nodes with custom logic between to process user input. You must start the workflow with the REA Automation Form Trigger.

Setting up the node

Set default selections with query parameters

You can set the initial values for fields by using query parameters with the initial URL provided by the REA Automation Form Trigger. Every page in the form receives the same query parameters sent to the REA Automation Form Trigger URL.

Only for production

Query parameters are only available when using the form in production mode. REA Automation won't populate field values from query parameters in testing mode.

Displaying custom HTML

You can display custom HTML on your form by adding a Custom HTML field to your form. This provides an HTML box where you can insert arbitrary HTML code to display as part of the form page.

You can use the HTML field to enrich your form page by including things like links, images, videos, and more. REA Automation will render the content with the rest of the form fields in the normal document flow.

Because custom HTML content is read-only, these fields aren't included in the form output data by default. To include the raw HTML content in the node output, provide a name for the data using the Element Name field.

The HTML field doesn't support <script>, <style>, or <input> elements.

Including hidden fields

It's possible to include fields in a form without displaying them to users. This is useful when you want to pass extra data to the form that doesn't require interactive user input.

To add fields that won't show up on the form, use the Hidden Field form element. There, you can define the Field Name and optionally provide a default value by filling out the Field Value.

When serving the form, you can pass values for hidden fields using query parameters.

Defining the form using JSON

Use Define Form > Using JSON to define the fields of your form with a JSON array of objects. Each object defines a single field by using a combination of these keys:

• fieldLabel: The label that appears above the input field.
• fieldType: Choose from date, dropdown, email, file, number, password, text, or textarea.
  • Use date to include a date picker in the form.
  • When using dropdown, set the choices with fieldOptions (reference the example below). By default, the dropdown is single-choice. To make it multiple-choice, set multiselect to true.
  • When using file, set multipleFiles to true to allow users to select more than one file. To define the file types to allow, set acceptFileTypes to a string containing a comma-separated list of file extensions (reference the example below).
• placeholder: Specify placeholder data for the field. You can use this for every fieldType except dropdown, date, and file.
• requiredField: Require users to complete this field on the form.

An example JSON that shows the general format required and the keys available:

// Use the "requiredField" key on any field to mark it as mandatory
// Use the "placeholder" key to specify placeholder data for all fields
//     except 'dropdown', 'date' and 'file'

[
	{
		"fieldLabel": "Date Field",
		"fieldType": "date",
		"formatDate": "mm/dd/yyyy", // how to format received date in REA Automation
		"requiredField": true
	},
	{
		"fieldLabel": "Dropdown Options",
		"fieldType": "dropdown",
		"fieldOptions": {
			"values": [
				{
					"option": "option 1"
				},
				{
					"option": "option 2"
				}
			]
		},
		"requiredField": true
	},
	{
		"fieldLabel": "Multiselect",
		"fieldType": "dropdown",
		"fieldOptions": {
			"values": [
				{
					"option": "option 1"
				},
				{
					"option": "option 2"
				}
			]
		},
		"multiselect": true // setting to true allows multi-select
	},
	{
		"fieldLabel": "Email",
		"fieldType": "email",
		"placeholder": "me@mail.con"
	},
	{
		"fieldLabel": "File",
		"fieldType": "file",
		"multipleFiles": true, // setting to true allows multiple files selection
		"acceptFileTypes": ".jpg, .png" // allowed file types
	},
	{
		"fieldLabel": "Number",
		"fieldType": "number"
	},
	{
		"fieldLabel": "Password",
		"fieldType": "password"
	},
	{
		// "fieldType": "text" can be omitted since it's the default type
		"fieldLabel": "Text"
	},
	{
		"fieldLabel": "Textarea",
		"fieldType": "textarea"
	}
]

Form Ending

Use the Form Ending Page Type to end a form and either show a completion page, redirect the user to a URL, or display custom HTML or text. Only one Form Ending page displays per execution, even when REA Automation executes multiple branches that contain Form Ending nodes.

Choose between these options when using On REA Automation Form Submission:

• Show Completion Screen: Shows users a final screen to confirm that they submitted the form.
  • Fill in Completion Title to set the h1 title on the form.
  • REA Automation displays the Completion Message as a subtitle below the main h1 title on the form. Use \n or <br> to add a line break.
  • Select Add option and fill in Completion Page Title to set the page's title in the browser tab.

When using Redirect to URL, fill in the URL field with the page you want to redirect to when users complete the form.

Use Show Text to display a final page defined by arbitrary plain text and HTML. Fill in the Text field with the HTML or plain text content you wish to show.

Forms with branches

The REA Automation Form node executes and displays its associated form page whenever it receives data from a previous node. When building forms with REA Automation, to avoid confusion, it's important to understand how forms behave when branching occurs.

Workflows with mutually exclusive branches

Form workflows containing mutually exclusive branches work as expected. REA Automation will execute a single branch according to the submitted data and conditions you outline. As it executes, REA Automation will display each page in the branch, ending with an REA Automation Form node with the Form Ending page type.

Workflows that may execute multiple branches

Form workflows that send data to multiple branches at the same time require more care. When multiple branches receive data during an execution (for example, from a switch node), REA Automation executes each branch that receives data sequentially. Upon reaching the end of one branch, the execution will move to the next branch with data.

REA Automation only executes a single Form Ending REA Automation Form node for each execution. When multiple branches of a form workflow receive data, REA Automation ignores all Form Ending nodes except for the one associated with the final branch.

Node options

Select Add Option to view more configuration options:

• Form Title: The title for your form. REA Automation displays the Form Title as the webpage title and main h1 title on the form.
• Form Description: The description for your form. REA Automation displays the Form Description as a subtitle below the main h1 title on the form. This field supports HTML. Use \n or <br> to add a line break. The Form Description also populates the HTML meta description for the page.
• Button Label: The label to use for your form's submit button. REA Automation displays the Button Label as the name of the submit button.

Running the node

Build and test workflows

While building or testing a workflow, use the Test URL in the REA Automation Form Trigger. Using a test URL ensures that you can view the incoming data in the editor UI, which is useful for debugging.

There are two ways to test:

• Select Test Step. REA Automation opens the form. When you submit the form, REA Automation runs the node and any previous nodes, but not the rest of the workflow.
• Select Test Workflow. REA Automation opens the form. When you submit the form, REA Automation runs the workflow.

Production workflows

When your workflow is ready, switch to using the REA Automation Form Trigger's Production URL by opening the trigger node and selecting the Production URL in the From URLS selector. You can then activate your workflow, and REA Automation runs it automatically when a user submits the form.

When working with a production URL, ensure that you have saved and activated the workflow. Data flowing through the Form trigger isn't visible in the editor UI with the production URL.