1. Accounts and billing
  2. Contacts
  4. Pages and forms
  5. SMS
  6. Transactional email
  7. Ecommerce
  8. Chat
  9. Analytics
  10. Integrations
  1. Dotdigital Help Centre
  2. Magento 2
  3. Pages and forms

Embed pages and forms on your storefront - Magento 2

Learn how to embed Dotdigital pages and forms on your Magento 2 storefront to get the data you need on your subscribers.

Overview

You can embed Dotdigital forms on your storefront to help capture more data on your subscribers while also using the tracking and automation features that exist in Magento 2.

Before you start

Things you need to know:

  • You must have already created your form in Dotdigital.
    To learn how, check out Create a form
  • For form confirmation messages, you must use section logic. Directing to a URL or a Page is not compatible with forms embedded on Magento 2 stores. 
    To learn how to do this, check out the articles Form: Add a confirmation page or URL and Form: Use sections to create multipage forms
  • You must be using Magento Enterprise to access Magento PageBuilder. If you’re using Magento Community Edition, there’s an alternative way to embed pages and forms onto your Magento 2 storefront.
    To learn more, check out the Using Magento Community edition section in this article.
    For Magento Community Edition users, this only works with forms that are created with Dotdigital's Pages and forms. The form also needs to contain an email address data field.

  • You can't use your pages and forms on Dynamics Blocks in Magento PageBuilder.

  • You must use our Magento Connector version 4.9.0 or later.
  • You must use the Enterprise module, for Magento Enterprise, 1.2.0 or later.

Embed a form to your storefront

To embed your Dotdigital form onto your Magento 2 storefront:

Step 1: Add the Dotdigital form control to a new block or to a page

  1. In Magento 2, go to Content > Blocks > Add New Block.
  2. Select Add Content.
  3. Drag the Dotdigital form block onto the canvas.

dotdigital_forms.png

Step 2: Edit your form settings

  1. Hover over the Edit to select a survey or form row.
  2. Select the Select form icon to edit its settings.
    formsettings.png
  3. In the Select Dotdigital Account drop-down menu, select a Dotdigital account.
  4. In the Select Form drop-down menu, select the form you want to use.
  5. Select a style and edit the form settings. Your form can either be embedded or appear as a pop-over.

    To learn more, check out the section Select a form type.

  6. Select Save.

Select a form type

You can choose to show your form as embedded or as a pop-over on your Magento 2 storefront.

Embedded form
If you choose to embed your form, you can choose if you want to add your respondents to your New Subscribers list in Magento 2. Choose between either Yes or No from the Add respondent to the Newsletter Subscribers list drop-down menu.

To add a respondent to the Newsletter Subscribers list, you must have one contact email address block mapped to the email address data field in your form. This is because the value of the data field is used to create a subscriber in Magento 2. If the Easy Email (Newsletter) capture settings is on, then the email address that’s submitted through the form is used to track an abandoned cart and deanonymises web sessions, for example, Web Behaviour Tracking.

To learn more about Easy Email (Newsletter) capture settings, check out our Abandoned cart: Easy email capture article.

Pop-over form
If you choose to make your form appear as a pop-over, you can edit the following fields:

  • Show after
    The number of seconds it takes before the form is shown to your potential subscribers.
  • Stop displaying
    Choose if your pop-over form should stop displaying when a form is completed or after a number of appearances.
    • Appearances
      If you select After a number of appearances, enter the number of times the pop-over form should stop displaying when it appears the set amount of times to the potential subscriber.
  • Show on mobile devices (not recommended)
    If you want the form to appear on your potential subscribers’ mobile devices,
    select Yes or No from the drop-down menu, .
  • Enable use of ‘Esc’ to dismiss pop-over
    To choose if your potential subscribers can stop showing the pop-over form by selecting the Esc button on their keyboard, select Yes or No from the drop-down menu.
  • Add respondent to the Newsletter Subscribers list
    Select if you want to add your respondents to your New Subscribers list when the form is completed.

Add respondent to the Newsletter Subscribers list requires that you must have one contact email address block mapped to the email address data field in your form because the value of this field is used to create a subscriber in Magento 2. If the Easy Email (Newsletter) capture settings is on, then the email address that’s submitted through the form is used to track an abandoned cart and deanonymises web sessions, for example, Web Behaviour Tracking.

To learn more, check out the articles Abandoned cart: Easy email capture and Assigning data fields to your form block.

Using Magento Community Edition

If you don’t have Magento Enterprise, it’s possible to manually embed a new form with Magento Community Edition. This way makes sure that the subscriber is created in Magento 2 and the tracking continues to work.

To embed the form to your Magento 2 storefront:

  1. In Dotdigital, create and publish your form.
    To learn how, check out the section Pages and forms.
  2. In the app menu, go to STORES > Settings > Configuration > GENERAL > Content Management.
  3. Select Disable Completely from the Enable WYSIWYG Editor drop-down menu.
  4. In the app menu, go to CONTENT > Elements > Pages and locate the page you want to embed your form to.
  5. Under the Action column, select Select > Edit.
  6. Select Content and paste the following code into the box:
    <script src="//r1.dotdigital-pages.com/resources/sharing/embed.js" data-sharing="lp-embed"
    data-page-domain="r1.dotdigital-pages.com" data-page-id="XXXX-XXX/INSERT
    FORM ID HERE"></script>
    <script>
    ecPF.onComplete(function (formData) {
  if (formData.contactEmail != null && formData.contactEmail.length > 0) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
  if (this.readyState === XMLHttpRequest.DONE && this.status === 
    200) {
  window.scrollTo(0,0);
  window.location.reload();
  }
  }
  xhr.open("POST", 'https://MAGENTO-HOSTNAME/newsletter/subscriber/new',
     true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  xhr.send("email=" + formData.contactEmail);
  }
  }, "XXXX-XXX");
  </script>
  7. Replace the following parts in the code:
    • <script src…>
      The embed code of the form to insert. This is found in Dotdigital by going to Pages and forms > Edit > Publish > Get embed code or get pop-over code.
    • <XXXX-XXX>
      The first forms part of your form ID. To find your form ID in Dotdigital:
      • If your page or form isn’t published, go to Pages and forms > Edit > Publish > Create a link. Next to the Preview field, your form ID comes after /p/.
      • If your page or form is published, go to Pages and forms > Edit > Published page, and then select the URL under the 1. Address heading. Next to the Preview field, your form ID comes after /p/.
        page-link.png
      • <MAGENTO-HOSTNAME>
        Your website host name, for example, mydomain.com.
  8. Select Save. 

That’s it. The form now appears on your website. For all new form submissions, the form adds the customer email address to your Magento 2 Newsletter Subscribers table. If the EasyEmail capture option is enabled for newsletters, any existing cart in the session is also updated with the email address and the abandoned cart process begins.

See also

Did you find this article helpful?

Can we help?

Thanks for using Dotdigital. If you need more help or support, then contact our support team.