web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Forums / Customer experience | Sales, Customer Insights,... / How can I add custom j...
Customer experience | Sales, Customer Insights,...
Answered

How can I add custom js code to an Iframe-hosted marketing form?

(0) ShareShare
ReportReport
Posted on by Community Member

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

I have the same question (0)
  • cloflyMao Profile Picture
    cloflyMao 25,210 on at

    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.

    pastedimage1604024386879v1.png

    Regards,

    Clofly

  • Community Member Profile Picture
    Community Member on at

    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:

    pastedimage1604043983138v1.png

    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

  • Verified answer
    cloflyMao Profile Picture
    cloflyMao 25,210 on at

    Hi Carlos,

    You could just keep one form-loader.js and one MsCrmMkt object on your page.

    4744.x1.JPG

    pastedimage1604048221185v1.png

    Console.log(1) will only execute again when submitting the second form.

    x2.JPG

    It will still create two different contacts.

    pastedimage1604048702877v3.png

    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.

    pastedimage1604048649291v2.png

    Regards,

    Clofly

  • Community Member Profile Picture
    Community Member on at

    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");
	}
	
});

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

Neeraj Kumar – Community Spotlight

We are honored to recognize Neeraj Kumar as our Community Spotlight honoree for…

Congratulations to the November Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Customer experience | Sales, Customer Insights, CRM

#1
Tom_Gioielli Profile Picture

Tom_Gioielli 81 Super User 2025 Season 2

#2
Gerardo Rentería García Profile Picture

Gerardo Rentería Ga... 49 Most Valuable Professional

#3
#ManoVerse Profile Picture

#ManoVerse 40

Last 30 days Overall leaderboard

Featured topics

Hide selecting Contact for potential customer when creating quote

Product updates

Dynamics 365 release plans