You can embed Dotdigital forms on your storefront to help capture more data about your subscribers while also using the tracking and automation features that exist in Adobe Commerce (previously Magento 2).
Before you start
Things you need to know:
You must have already created your form in Dotdigital.
Learn how in 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 Adobe Commerce stores.
Learn how to do this in Form: Add a confirmation page or URL and Form: Use sections to create multipage formsYou must be using:
Adobe Commerce with our Enterprise module (up to v1.10.x) OR
Adobe Commerce with our Enterprise module (v2.0.0+) and our Page Builder module OR
Magento Open Source v2.4.0 and our Page Builder module
For merchants using Magento Open Source 2.3.x, 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. See the separate instructions below.
You can't use your pages and forms on Dynamics Blocks in Adobe Commerce Page Builder.
Embed a form to your storefront
To embed your Dotdigital form onto your Adobe Commerce storefront:
1. Add the Dotdigital form control to a new block or to a page
In your Adobe Commerce account, go to Content > Blocks and select Add New Block.
Select Edit with Page Builder.
Drag a Row or Column block onto the canvas.
Expand the Add Content drop-down menu, and drag the Dotdigital form block onto the Row or Column block.
2. Edit your form settings
Hover over the Edit to select a survey or form row.
Select the Select form icon to edit its settings.
Expand the Select Dotdigital Account drop-down menu, and choose your Dotdigital account.
Expand the Select Form drop-down menu, choose the form you want to use.
Select a style and edit the form settings. Your form can either be embedded or appear as a pop-over.
Learn more in Select a form type.
Select Save.
Select a form type
You can choose to show your form as embedded or as a pop-over on your Adobe Commerce 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 Adobe Commerce. 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 Adobe Commerce. If the Easy Email (Newsletter) capture setting is on, then the email address that’s submitted through the form is used to track an abandoned cart and de-anonymises web sessions, for example, Web Behavior Tracking.
Learn more in Abandoned cart: Easy email capture.
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 appear before it stops displaying 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 Adobe Commerce. If the Easy Email (Newsletter) capture setting is on, then the email address that’s submitted through the form is used to track an abandoned cart and de-anonymises web sessions, for example, Web Behaviour Tracking.
Learn more in Abandoned cart: Easy email capture and Assigning data fields to your form block.
Magento Open Source v2.3.x
It’s possible to manually embed a form in older versions of Magento Open Source.
This method makes sure that the subscriber is created in Magento and the tracking continues to work.
To embed the form to your Magento storefront:
In Dotdigital, create and publish your form.
Learn how in Pages and forms.
In the app menu, go to STORES > Settings > Configuration > GENERAL > Content Management.
Select Disable Completely from the Enable WYSIWYG Editor drop-down menu.
In the app menu, go to CONTENT > Elements > Pages and locate the page you want to embed your form to.
Under the Action column, select Select > Edit.
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://MAGENTOHOSTNAME/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=" + encodeURIComponent(formData.contactEmail));
}
}, "XXXX-XXX");
</script>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/.
<MAGENTO-HOSTNAME>
Your website host name, for example, mydomain.com.
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 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.