Here are some points to keep in mind when adding custom JS to your form:
1. Place your JavaScript code inside a <script> tag
<script> // Your JavaScript code here </script>
2. Ensure that only JavaScript code is added to the box
HTML tags (except script tag) or other languages will not work.
➔ Valid code:
<script> (function() { // Google Tag Manager script (function(w,d,s,l,i){ w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'}); var f=d.getElementsByTagName(s)[0], j=d.createElement(s), dl=l!='dataLayer'?'&l='+l:''; j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl; f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXX'); // Create the noscript element var noscript = document.createElement('noscript'); var iframe = document.createElement('iframe'); iframe.src = 'https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX'; iframe.height = '0'; iframe.width = '0'; iframe.style.display = 'none'; iframe.style.visibility = 'hidden'; noscript.appendChild(iframe); // Insert the noscript element into the body document.body.appendChild(noscript); })(); </script>
➔ Invalid code with HTML tags inside the custom JS box:
<!-- Google Tag Manager --> <script> (function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({'gtm.start': new Date().getTime(), event: 'gtm.js'}); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-XXXXXX'); </script> <!-- End Google Tag Manager --> <!-- Google Tag Manager (noscript) --> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"> </iframe> </noscript> <!-- End Google Tag Manager (noscript) -->
3. Check your code syntax in a code editor like VSCode
After ensuring there are no syntax errors, copy and paste it into the form’s custom JS box.
4. If you need to add HTML code to your page, use JavaScript DOM manipulation methods
Refer to point 2 for valid examples of manipulating the DOM with JavaScript.
5. When adding multiple JS codes with multiple script tags inside custom JS, avoid using nested script tags
➔ Valid code:
<script> console.log("inside script 1") </script> <script> console.log("inside script 1") </script>
➔ Invalid code:
<script> console.log("inside script 1") <script> console.log("inside script 1") </script> </script>
6. Here are all Formaloo custom events you can listen to and track by JS:
"formaloo_beforeLoad"
"formaloo_load"
"formaloo_loadFail"
"formaloo_init"
"formaloo_submitRequest"
"formaloo_submitSuccess"
"formaloo_submitFail"