Dynamics Community Forum Thread Details

Marketing Forms load delay patch: Spinner

Hi All !!

I'd like to share with you a patch provided by Microsoft support team, regarding the delay between a marketing form time load (a form made with for marketing) and a landing page time load (internal or external).

Marketing solutions have to be very fast. People can't wait for a second and if no content is shown in that second, you can lose a lead.

What is this patch? a spinner:

How to add spinner:

1) Go to page editor, switch to html, in the <style> block add

#loaderSpinner {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

2) Before the block with form (it contains this keyword: data-editorblocktype="FormBlock")

Sample:
<div class="wrapperContainer" data-container="true"><div data-editorblocktype="FormBlock" class="" data-form-block-id="2f516d70-f0a7-e811-a967-000d3a34a1bd"></div>

Add this:
<div id="loaderSpinner" class="wrapperContainer"></div>

So the modified html looks like
<div id="loaderSpinner" class="wrapperContainer"></div>
<div class="wrapperContainer" data-container="true"><div data-editorblocktype="FormBlock" class="" data-form-block-id="2f516d70-f0a7-e811-a967-000d3a34a1bd"></div>


3) After the start of body tag <body> add:


    <script>
    (function() {
      MsCrmMkt.MsCrmFormLoader.afterformrender = function() {
        document.getElementById("loaderSpinner").style.display = "none";
      };
    })();
    </script>   

So the final html looks like

<body>
    <script>
 
    (function() {
      MsCrmMkt.MsCrmFormLoader.afterformrender = function() {
        document.getElementById("loaderSpinner").style.display = "none";
      };
    })();
    </script>