I've taken over a site build that has modals hard coded into the template. All is good apart from these modals which are causing slow page speed results - I think because each modal is loading in an iFrame from a platform that seems to have slow loading forms and extra scripts etc.

I'm looking for a way to tweak the code that is there currently so that it loads in the modal content dynamically rather than it just being on every page and hidden by CSS. I'm not really a coder, but I'm pretty sure that this is a very clumsy way of doing it and can be streamlined significantly!

I've extracted the relevant code and put it here:

https://codepen.io/Patz/pen/oNwPJve

<div id="cta-contactus" class="modal">
    
    <div class="modal-content">
        <span class="close">&times;</span>
        <!--[if lte IE 8]>
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
        <![endif]-->
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
    </div>
</div>

Perhaps these forms could be embedded in external iFrames so that they are not on the page by default, but I think this could also not be the best way of achieving this! Any tips much appreciated :)