Define landing page-specific content

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

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.

Use the form component

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

    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

    Switch to the Form style 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. Once you added all the desired checkboxes, click Call to action to expand the corresponding section. It enables you to define the behavior of the button in the Form component.

  8. 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.

  9. 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.

  10. 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.

  11. 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

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

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

  3. Expand the Buttons section to modify the appearance of the button in the component form. For example, you can 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 Preview button. Learn more on testing landing pages here.

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

  5. 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

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 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

    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.

On this page