Personalize text components with user details

You can personalize your visitors' experience by adding custom information to text components. You can use data from a form, or from managed users.

Any field included in a form can be used to customize a text component. For managed users, you can use ID, email, and name.

Use form submission information Display managed user details

Set up the form and find the field reference

To use form details on a text component, you need: 

  • The form field reference ID: a unique ID for a specific field.
  • 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.
  • A code snippet to enter in the text component Content field.

 

Find the field reference ID

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

  1. In your form component, click the field you want to use. The right sidebar will open.
  2. In the Content tab, click the down arrow to expand the Reference section.
  3. In the Reference ID field, copy the value to your clipboard.
    • You can use the preset value or enter your own unique value.
  4. Repeat for each field you want to use.

 

Add a Navigate to page action

  1. In your form component, click any field to expand the right sidebar.
  2. In the Actions tab, click + Add action.
  3. In the new window, click the Action dropdown menu. 
  4. Select Navigate to page.
  5. Click the Page dropdown menu.
  6. Select a page to send the user to.
  7. Select the Send data to this page checkbox.
  8. Click Create action.

 

Create a code snippet

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. Copy the code that appears in the box below into a text editor:
    • {{params.fieldreference|default:"default wording"}}
  2. Replace fieldreference with the field reference you want to use.
  3. Replace default wording (keep the double quotes) with a default text. This will be used if the form field is blank.
  4. Paste the text into the text component. 
alternatetext
Was this article helpful?
1 out of 1 found this helpful