I'd like to insert an email subscription form to my web site. The email marketing company has provided me with this code:

<script src="//web.webformscr.com/apps/fc3/build/loader.js" async sp-form-id="bf1c5b05db76f8d703e531a06f371e6ffd7cb9cbba72fa9fc5d97321a710dc04"></script>

This code being inserted into a HTML element will show an email subscription form in it.

There are two problems with this:

1. The code is not valid according to https://validator.w3.org/

2. It immediately loads the form and slows the overall time till the website is fully loaded.

I am going to write an invitation to subscribe and place a button. When the button is pressed, then subscription form should be rendered.

I am not sure what to do with this. As far as I can understand, I should somehow modify the code and later modify it back with JS. Or just insert with JS.

I tried:

1. Modify the code somehow for it to be later modified back to its original state by JS:

   <span src="//web.webformscr.com/apps/fc3/build/loader.js" async sp-form-id="bf1c5b05db76f8d703e531a06f371e6ffd7cb9cbba72fa9fc5d97321a710dc04"></span>
   
   <sript src="//web.webformscr.com/apps/fc3/build/loader.js" async sp-form-id="bf1c5b05db76f8d703e531a06f371e6ffd7cb9cbba72fa9fc5d97321a710dc04"></sript>
   

   This effort has failed as this code is not valid anyway.

2. Insert the code with JS:

   item.parentElement.querySelector(".n-bell-bubble").innerHTML = '<sript src="//web.webformscr.com/apps/fc3/build/loader.js" async sp-form-id="bf1c5b05db76f8d703e531a06f371e6ffd7cb9cbba72fa9fc5d97321a710dc04"></sript>';
   

This has failed because Chrome doesn't allow this due to protection against XSS-attacks. I tried to have a look at TrustedTypes to break through this proble, but TrustedTypes are not supported by many popular. So, I failed again.