DocumentationJourney OptimizerJourney Optimizer Guide

Define landing page-specific content lp-content

Last update: Thu Apr 13 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • User

To design your landing page content, you can use the same components as for an email. Learn more

To design specific content that will enable users to select and submit their choices, use the form component and define its landing page-specific styles.

NOTE
You can also create a click-through landing page without a Form component. In that case, the landing page will be displayed to users, but they will not be required to submit any form. This can be useful if you only want to showcase a landing page without requiring any action from your recipients such as opt-in or opt out, or want to provide information that doesn’t require user input.

Using the landing page content designer, you can also leverage contextual data coming from the primary page in a subpage. Learn more

Use the form component use-form-component

To define specific content that will enable users to select and submit their choices from your landing page, use the Form component. To do so, follow the steps below.

  1. Drag and drop the landing page-specific Form component from the left palette into the main workspace.

    note note
    NOTE
    The Form component can only be used once on the same page.

  2. Select it. The Form content tab displays in the right palette to let you edit the different fields of the form.

    note note
    NOTE
    Switch to the Styles tab at any time to edit the styles of your form component content. Learn more

  3. From the Checkbox 1 section, you can edit the label corresponding to this checkbox.

  4. Define if this checkbox is to opt users in or out: do they agree to receive communications or do they ask not to be contacted anymore?

    Select amongst the three options below:

    • Opt in if checked: users need to check the box to consent (opt-in).
    • Opt out if checked: users need to check the box to remove their consent (opt-out).
    • Opt in if checked, opt out if unchecked: this option enables you to insert a single checkbox for opt-in/opt-out. Users need to check the box to consent (opt-in), and uncheck it to remove their consent (opt-out).

  5. Choose what will be updated between the three following options:

    • Subscription list: You must select the subscription list that will be updated if the profile selects this checkbox. Learn more on subscription lists.

    • Channel (email): The opt-in or opt-out applies to the whole channel. For example, if a profile that opts out has two email addresses, both addresses will be excluded from all your communications.

    • Email identity: The opt-in or opt-out only applies to the email address that was used to access the landing page. For example, if a profile has two email addresses, only the one that was used to opt in will receive communications from your brand.

  6. Click Add field > Checkbox to add another checkbox. Repeat the steps above to define its properties.

  7. You can also add a Text field.

    • Enter the Label that will be displayed on top of the field in the form.

    • Enter a Placeholder text. It will be displayed inside the field before the user fills in the field.

    • Check the Make form field mandatory option if needed. In that case, the landing page can only be submitted if the user has filled in this field. If a mandatory field is not filled in, an error message will display when the user submits the page.

  8. Once you added all the desired checkboxes and/or text fields, click Call to action to expand the corresponding section. It enables you to define the behavior of the button in the Form component.

  9. Define what will happen upon clicking the button:

    • Redirect URL: Enter the URL of the page the users will be redirected to.
    • Confirmation text: Type the confirmation text that will be displayed.
    • Link to a subpage: Configure a subpage and select it from the drop-down list that displays.

  10. Define what will happen upon clicking the button in case an error occurs:

    • Redirect URL: Enter the URL of the page the users will be redirected to.

    • Error text: Type the error text that will be displayed. You can preview the error text when defining the form styles.

    • Link to a subpage: Configure a subpage and select it from the drop-down list that displays.

  11. If you want to make additional updates upon submitting the form, select Opt in or Opt out, and define if you want to update a subscription list, the channel or just the email address used.

  12. Save your content and click the arrow next to the page name to go back to the landing page properties.

Define landing page form styles lp-form-styles

  1. To modify the styles of your form component content, switch at any time to the Style tab.

  2. The Fields section is expanded by default and enables you to edit the appearance of the text field, such as the label and placeholder font, the position of the label, the field background color, or the field border.

  3. Expand the Checkboxes section to define the appearance of the checkboxes and corresponding text. For example, you can adjust the font family or size, or the checkbox border color.

  4. Expand the Buttons section to modify the appearance of the button in the component form. For example, you can change the font, add a border, edit the label color on hover, or adjust the alignment of the button.

    You can preview some of your settings such as button label color on hover by using the Simulate content button. Learn more on testing landing pages here.

  5. Expand the Form layout section to edit the layout settings such as the background color, padding, or margin.

  6. Expand the Form error section to adjust the display of the error message that displays in case a problem occurs. Check the corresponding option to preview the error text on the form.

Use primary page context use-primary-page-context

You can use contextual data coming from another page within the same landing page.

For example, if you link a checkbox to a subscription list on the primary landing page, you can use that subscription list on the “thank you” subpage.

Let’s say you link two checkboxes on your primary page to two different subscription lists. If a user subscribes to one of these, you want to display a specific message upon submitting the form, depending on which checkbox they selected.

To do so, follow the steps below:

  1. On the primary page, link each checkbox of the Form component to the relevant subscription list. Learn more.

  2. On the subpage, place the pointer of your mouse where you want to insert your text and select Add personalization from the contextual toolbar.

  3. In the Edit personalization window, select Contextual attributes > Landing Pages > Primary Page Context > Subscription.

  4. All the subscription lists that you selected on the primary page are listed. Select the relevant items using the + icon.

  5. Add the relevant conditions using the Expression editor helper functions. Learn more

    note caution
    CAUTION
    If there is a special character such as a hyphen in the expression, you must escape the text including the hyphen.

  6. Save your changes.

Now when users select one of the checkboxes,

the message corresponding to the selected checkbox is displayed upon submitting the form.

NOTE
If a user selects the two checkboxes, both texts will display.
recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76