Skip to main content

Notifications

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 Microsoft Employee

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

  • Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: How can I add custom js code to an Iframe-hosted marketing form?

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

  • Verified answer
    cloflyMao Profile Picture
    cloflyMao 25,202 on at
    RE: How can I add custom js code to an Iframe-hosted marketing form?

    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 Microsoft Employee on at
    RE: How can I add custom js code to an Iframe-hosted marketing form?

    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

  • cloflyMao Profile Picture
    cloflyMao 25,202 on at
    RE: How can I add custom js code to an Iframe-hosted marketing form?

    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

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

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Announcing Forum Attachment Improvements!

We're excited to announce that attachments for replies in forums and improved…

Vahid Ghafarpour – Community Spotlight

We are excited to recognize Vahid Ghafarpour as our February 2025 Community…

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 291,965 Super User 2025 Season 1

#2
Martin Dráb Profile Picture

Martin Dráb 230,836 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans