Add validations using JavaScript to Marketing form in Dynamics 365

Extend Marketing forms using JavaScript to perform custom business actions.

Here I am going to discuss how to add JavaScript code on your Marketing form and test this custom code using marketing pages.

You need to follow the below steps to add the code snippet to your existing marketing form:

1. Navigate to the Marketing app and Marketing forms(landing page).
2. Select your marketing form.
3. Select the Form hosting tab and copy the script to the clipboard in your CMS.
4. Add your JavaScript code just after the script tag in the copied code.

For example: On click of checkbox, we need to show or hide some fields, then afterFormLoad event is a trigger after the form content is injected to a page before the validation hooks are attached, so that we can use this event MsCrmMkt.MsCrmFormLoader.on(‘afterFormLoad’, function (event){}); and then onchange event of check box show and hide fields checkBoxIsCustomer.addEventListener(‘change’, (event) => {});

<script language="javascript" type="text/javascript">
MsCrmMkt.MsCrmFormLoader.on('afterFormLoad', function (event) {
//On change of checkbox Is Customer
//If this check box is yes, then show Customer name and country.
const checkBoxIsCustomer = document.getElementById('c08567g0-acd6-ea11-a813-000d3a7966789');
checkBoxIsCustomer.addEventListener('change', (event) => {
if (event.target.checked) {
//show Customer name textbox
document.getElementById('aba95t89-abd7-ea11-a813-00045679a22c').style.display = 'block';
//show country
document.getElementById('ff0er2d8-abd7-ea11-a813-000d3a79a77c').style.display = 'block';
}
else {
//hide customer name
document.getElementById('aba95t89-abd7-ea11-a813-00045679a22c').style.display = 'none';
//hide country
document.getElementById('ff0er2d8-abd7-ea11-a813-000d3a79a77c').style.display = 'none';
}
});
});
</script>

If you don’t want to test JavaScript validations on the live marketing form, we can create a Marketing page(as test page) using same marketing form for which you want to add validations and then add your code on that marketing page and validate your changes.

Click on new marketing page and select the Header fields button at the side of the header:

• Name: Enter a name for the page.
• Type: Choose the type of page as landing page.
• Partial URL: When you publish the page, this value becomes part of its URL. The page will be published on your Dynamics 365 Portal, so the final URL for the page will have the form: https://<Org>.microsoftcrmportals.com/<PartialURL>.

When your page is ready for use, publish it by selecting Go Live and copy the URL in your browser to test.

In the Edit mode, navigate to Designer tab and select HTML section and copy the code where you can add your JavaScript validations, save to go live with your changes and click on marketing page URL and validate your changes.

<div data-form-block-id="db63223a-53dc-ea11-a813-000d3a6a3333"></div>
<script src="https://mktdplp102cdn.azureedge.net/public/latest/js/form-loader.js?v=1.64.1061.0"></script> 
<div id="DSYTRd5fdaffdjyrRDGFSSFabNG8hpW5A"></div>
<script language="javascript" type="text/javascript">(function (id, f, t, ws, ms_tr_il_08, ms_tr_il_w_01) { var tr = function (cb) { var count = 0; var callback = function () { if (count == 0) { count++; );</script>
//write JavaScript validations here