You’re offline. This is a read only version of the page.
798
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>
I hope it has been helpful for you.
Bye!!
Share
Report
All responses (
