Hi there,
How can I add custom js code to an iframe-hosted marketing form?
Note: script-hosted marketing form is not an option, by design.
Thanks,
Carlos
That's what I was looking for, thank you so much Clofly!
I've had to combine the code and filter by event.formId to apply the right logic to each form since the same event will be called once per form:
MsCrmMkt.MsCrmFormLoader.on('afterFormSubmit', function(event) { console.log("afterformSubmit"); if (event === null || event.formPageId === null) return; // First form if(DynamicsFormCTUtils !== null && event.formPageId === firstFormId) { console.log("afterformSubmit - First form logic"); } // Second form else if (DynamicsFormNLUtils !== null && event.formPageId === secondFormId) { console.log("afterformSubmit - Second form logic"); } });
Hi Carlos,
You could just keep one form-loader.js and one MsCrmMkt object on your page.
Console.log(1) will only execute again when submitting the second form.
It will still create two different contacts.
Even though ID of fields are same,(Such as The first first name field and the second first name field.)
however, we can use document.getElementsByClassName("lp-form-fieldInput")[0]; and document.getElementsByClassName("lp-form-fieldInput")[6]; to distinguish them.
Regards,
Clofly
Hi Clofly,
I wasn't asking exactly how to embed a form in an iframe but rather how to deal with native iframe-hosted forms, I mean, selecting "I want to host as an Iframe" in the form page like this:
In this case the form is hosted in a "*.dynamics.com" host, so same-origin security policy won't be met. Is there a "supported" way to add custom javascript in this scenario?
I've found a workaround creating a script-hosted form in an isolated html page and inserting this page as an iframe and it seems to be working properly.
The original problem was that we need to use two marketing forms in the same page and script-hosted forms create conflicts due to MsCrmMkt object cannot be loaded twice as stated in the console log (besides there are conflicts on event handling). I guess the workaround will be enough for us, but I'd like to know if there is a supported way to handle custom js in iframe
Hi Carlos,
Due to same-origin security policy of browser, the iframe page hosting the marketing form must be in the same path as its parent page, only then can we access the document and functions in the iframe.
For example, if index page is located in /var/www/CMS, then the iframe page is needed to be located in any sub folder of /var/www/CMS.(Like /var/www/CMS/pages)
When the prerequisite is met, we can use iframe.contentWindow to get document of iframe, and iframe.contentWindow.xxx to access xxx function in iframe.
Please notice that functions in iframe can be only accessed after iframe page is loaded, otherwise the function will be undefined.
// Get iframe element
var iframe = document.getElementsByTagName("iframe")[0];
// Wait for iframe document being loaded
iframe.addEventListener('load', function () {
// Access function in iframe
var MsCrmMkt = iframe.contentWindow.MsCrmMkt;
// Get document of iframe
var iframeDocument = iframe.contentWindow.document;
MsCrmMkt.MsCrmFormLoader.on('afterFormLoad', function (event) {
var firstnameField = iframeDocument.getElementById("3f746946-34b4-442c-a677-e232cdd2bc40");
firstnameField.value = "Clofly";
})
})
The code above will populate first name field of iframe-hosted marketing form.
Regards,
Clofly
André Arnaud de Cal...
291,965
Super User 2025 Season 1
Martin Dráb
230,836
Most Valuable Professional
nmaenpaa
101,156