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,... / Dynamically load marke...
Customer experience | Sales, Customer Insights,...
Suggested Answer

Dynamically load marketing form depending on date selected

(0) ShareShare
ReportReport
Posted on by Abhi546 35

I have created a date selection field and depending on the date selected, a specific marketing form should be loaded. 

This functionality will be embedded in an external webpage. 

I receive the error that the form-loader script has already been defined, so the new form cannot be loaded, despite removing the script from the html before the new form is dynamically added.

Has anyone had such a use case before? Any tips? 

Thank you in advance!

I have the same question (0)
  • Nya Profile Picture
    Nya 29,060 on at

    Hi,

    Do you mean to show different forms in the page based on the date selected?

    Would you please share some code snippet?

  • Carolin Profile Picture
    Carolin 127 on at

    Hi Nya, thanks for your help.

    The use case is the following:

    we have several webinar dates available and for the selected date, the regarding event registration form should be loaded. so the customer see's first the form loaded with the first day and if he selects in the date picker another date the other form is loaded.

    But if we select the other date, the following error message is shown:

    form-loader.js?v=1.79.1022.0:4 Uncaught Error: MsCrmFormLoader is already defined, make sure Dynamics 365 Marketing loader.js script is not included twice in the page

    at VM24 form-loader.js:4:7410

    at VM24 form-loader.js:4:7545

    (anonymous) @ form-loader.js?v=1.79.1022.0:4

    (anonymous) @ form-loader.js?v=1.79.1022.0:4

    Code used is the following:

    <div data-container="true" class="columnContainer" data-container-width="100" style="display: block; min-height: 70px; min-width: 200px; width: calc(100% - 0px); padding: 10px; float: left; border: none; word-wrap: break-word; word-break: break-word; word-wrap: break-word; word-break: break-word;">

                       <div data-editorblocktype="Field-dropdown" style="">

                           <div class="marketing-field">

                               <div class="lp-form-field" data-required-field="false"><label class="lp-ellipsis" for="3defa406-e707-eb11-a813-000d3ab29b65" title="">Ich möchte das Webinare an

    folgendem Tag besuchen:</label>

                                   <select class="lp-form-fieldInput" id="3defa406-e707-eb11-a813-000d3ab29b65" name="3defa406-e707-eb11-a813-000d3ab29b65" style="width: 100%; box-sizing: border-box;" title="">

    <option value=""></option>

    <option value="169810000">01.03.2022</option>

    <option value="169810001">02.03.2022</option>

    <option value="169810002">03.03.2022</option>

    </select>

                               </div>

                           </div>

                       </div>

                   </div>

                   <div style="clear:both;">

                   </div>

                   <div id="form">

                       <!-- <div id="date1">

    <script src="mktdplp102cdn.azureedge.net/.../form-loader.js

    </script>

    <div class="d365-mkt-config" style="display:none"

    data-website-id="IJ7W-ymbgE9eaKKeHKyAFgqDzo_CN7EdBXIa8PaczNE"

    data-hostname="23fb23305ab04944b3218d4c26f3faa1.svc.dynamics.com">

    </div>

    <div data-form-block-id="aa27a0de-807f-ec11-8d21-000d3ab7825a"></div>

    </div>

    <div id="date2">

    <script src="mktdplp102cdn.azureedge.net/.../form-loader.js

    </script>

    <div class="d365-mkt-config" style="display:none"

    data-website-id="cCigj7wO4g-g2_aazUvf8IeDQHGCiCvJRHSYLaxgqJs"

    data-hostname="23fb23305ab04944b3218d4c26f3faa1.svc.dynamics.com">

    </div>

    <div data-form-block-id="908f9a8a-807f-ec11-8d21-000d3ab7825a"></div>

    </div>

    <div id="date3">

    <script

    src="mktdplp102cdn.azureedge.net/.../form-loader.js

    <div class="d365-mkt-config" style="display:none"

    data-website-id="Y9Yt-H0ZHqV28yj-B_94YAdE99UCNGl8o9Uy8xprMck"

    data-hostname="23fb23305ab04944b3218d4c26f3faa1.svc.dynamics.com">

    </div>

    <div data-form-block-id="2d333007-817f-ec11-8d21-000d3ab7825a"></div>

    </div> -->

                   </div>

               </div>

           </div>

       </div>

       <script>

           let dates = document.querySelectorAll("select option");

    // function render(opt) {

    // let formDiv = document.getElementById("form");

    // // let scpt = document.createElement('script');

    // // scpt.setAttribute('src', 'mktdplp102cdn.azureedge.net/.../form-loader.js

    // // scpt.setAttribute('id', 'formLoader');

    // //scpt.async = false;

    // let webId;

    // let formBlockId;

    // if (formDiv.childNodes.length > 2) {

    // console.log(formDiv);

    // formDiv.innerHTML = "";

    // console.log(formDiv);

    // }

    // // if (formDiv.childNodes.length <= 1) {

    // // scpt.async=false;

    // // formDiv.appendChild(scpt)

    // // }

    // switch (opt) {

    // case ("169810000"):

    // webId = 'cCigj7wO4g-g2_aazUvf8IeDQHGCiCvJRHSYLaxgqJs';

    // formBlockId = '908f9a8a-807f-ec11-8d21-000d3ab7825a';

    // break;

    // case ("169810001"):

    // webId = 'IJ7W-ymbgE9eaKKeHKyAFgqDzo_CN7EdBXIa8PaczNE';

    // formBlockId = 'aa27a0de-807f-ec11-8d21-000d3ab7825a';

    // break;

    // case ("169810002"):

    // webId = 'Y9Yt-H0ZHqV28yj-B_94YAdE99UCNGl8o9Uy8xprMck';

    // formBlockId = '2d333007-817f-ec11-8d21-000d3ab7825a';

    // break;

    // }

    // console.log(webId, formBlockId);

    // //attach to form

    // if (formDiv.childNodes.length <= 1) {

    // formDiv.appendChild(scriptLoad())

    // }

    // formDiv.insertAdjacentHTML('beforeend',

    // `

    // <div class="d365-mkt-config" style="display:none" data-website-id=${webId}

    // data-hostname="23fb23305ab04944b3218d4c26f3faa1.svc.dynamics.com">

    // </div>

    // <div data-form-block-id=${formBlockId}></div>

    // `);

    // }

    function scriptLoad() {

    let scpt = document.createElement('script');

    scpt.setAttribute('src', 'mktdplp102cdn.azureedge.net/.../form-loader.js

    scpt.setAttribute('id', 'formLoader');

    scpt.async = false;

    return scpt;

    }

    function render(opt){

    document.getElementById("form").innerHTML="";

    console.log(document.querySelectorAll("script"))

    switch (opt) {

    case ("169810000"):

    document.getElementById("form").appendChild(scriptLoad());

    document.getElementById("form").insertAdjacentHTML('beforeend', `<div class="d365-mkt-config" style="display:none"

    data-website-id="IJ7W-ymbgE9eaKKeHKyAFgqDzo_CN7EdBXIa8PaczNE"

    data-hostname="23fb23305ab04944b3218d4c26f3faa1.svc.dynamics.com">

    </div>

    <div data-form-block-id="aa27a0de-807f-ec11-8d21-000d3ab7825a"></div>`)

    break;

    case ("169810001"):

    document.getElementById("form").appendChild(scriptLoad());

    document.getElementById("form").insertAdjacentHTML('beforeend', `<div class="d365-mkt-config" style="display:none"

    data-website-id="IJ7W-ymbgE9eaKKeHKyAFgqDzo_CN7EdBXIa8PaczNE"

    data-hostname="23fb23305ab04944b3218d4c26f3faa1.svc.dynamics.com">

    </div>

    <div data-form-block-id="aa27a0de-807f-ec11-8d21-000d3ab7825a"></div>`)

    break;

    case ("169810002"):

    document.getElementById("form").appendChild(scriptLoad());

    document.getElementById("form").insertAdjacentHTML('beforeend', `<div class="d365-mkt-config" style="display:none"

    data-website-id="IJ7W-ymbgE9eaKKeHKyAFgqDzo_CN7EdBXIa8PaczNE"

    data-hostname="23fb23305ab04944b3218d4c26f3faa1.svc.dynamics.com">

    </div>

    <div data-form-block-id="aa27a0de-807f-ec11-8d21-000d3ab7825a"></div>`)

    break;

    }

    }

    document.getElementById("3defa406-e707-eb11-a813-000d3ab29b65").addEventListener('change', function () {

    render(this.value)

    }, false)

       </script>

  • Suggested answer
    Petr Jantac Profile Picture
    Petr Jantac Moderator on at

    Multiple forms should not be loaded on the same page. This is not supported as the form is included statically by design. There is a workaround to embed the form using iFrame. iFrame creates another page inside your existing page, so you can bypass this limitation.

    Regards

    Petr, Microsoft

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 72 Super User 2025 Season 2

#2
Daniyal Khaleel Profile Picture

Daniyal Khaleel 32 Most Valuable Professional

#3
Gerardo Rentería García Profile Picture

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

Last 30 days Overall leaderboard

Featured topics

Hide selecting Contact for potential customer when creating quote

Product updates

Dynamics 365 release plans