Use form data to personalize components

You can use data entered by a user on a form to personalize their experience within the interface. For example, you can greet users by their name on the following page after they've submitted a form. 

To use form details on a component, you need: 

  • a field reference ID: a unique ID for a specific field in a form.
  • a Navigate to page action: this allows the form to send a visitor to a different page and make the form submission available on that page.

 

Set up the form and find the field reference ID

1. Find the reference ID

The field reference ID is a unique identifier for each field in your form. 

  1. On a form component, click the field you want to use. A sidebar will open. 
  2. Scroll down to the bottom of the field options, and click REFERENCE.
    • You can use the existing reference ID for the field or type a unique reference ID for each field.
  3. Keep the reference to use later. Repeat these steps for each field you want to use.
  4. Click the Back arrow on the sidebar to return to the form setup.

2. Add a Navigate to page action

  1. In the Actions tab, click + Add action.
  2. In the new window, click the Action dropdown menu. 
  3. Select   Navigate to page.
  4. Click the Page dropdown menu and select a page.
  5. Select the Send data to this page checkbox.
  6. Click Create action.

Once you have completed these steps, you can personalize either a text component or a form component.

 

Text component Form component

Use a text component

To customize your text component, you must use a code snippet. This will allow data from the form to be used in the component.

  1. Click your text component. A sidebar will open.
  2. Copy the code snippet that appears below into any text editor on your computer:
    • {{params.fieldreference|default:"default wording"}}
  3. Replace fieldreference with the field reference ID you want to use.
  4. Replace default wording (keep the double quotes) with a default text. This will be used if the form field is blank.
  5. Paste the completed code snippet into the text component Content field. 
Example

You can show a user's name on the page after they filled out a form. In this example, the field reference ID is "name", and the default wording (what will be used if the form field is blank) is "visitor". So, the code snippet would look like this:

{{params.name|default:"visitor"}}

alternatetext

If your interface has managed users, learn how you can personalize components with managed user information.

 

Was this article helpful?
1 out of 2 found this helpful