从第三方javascript生成的表单不会出现在应该的位置

Question

I have a wordpress site that uses 3rd party javascript to inject forms from Hubspot. The site is using Autoptimize plugin. While optimizing the site for google page insights speed test I encounter issues:

My footer should contain the form within a expanding menu but for some reason keeps generating in the body. I should mention that this only happens when adding the 3rd party script tag with async .

I have 2 different solutions written out in the snippet. All other dependencies loaded at the end.

How can I load this form into my footer and be placed where it should be?

Screen shot here.

 <footer> <div class="container-fluid"> <div class="col-lg-2 col-md-4 col-sm-4 col-xs-6 subscribe text-center"> <div class="content tframe fw fh"> <div class="tcell valign-mid"> <div class="collapsible-data"> <a href="#" class="collapsible-opener"> Subscribe <span class="more">for Updates</span> <i class="fa fa-angle-up" aria-hidden="true"></i> </a> <div class="collapsible-content"> <div class="row" eq-height=""> <div class="col-lg-12 pull-left" eq-col=""> <div class="info"> <h3>Subscribe Today!</h3> <!-- Start Solution 1: Prevents render blocking, but breaks layout --> <script> setTimeout(function(){ $.ajax({ url: '//js.hsforms.net/forms/v2.js', dataType: 'script', cache: true, success: function() { console.log("AJAX success!") hbspt.forms.create({ portalId: '2564694', formId: '2a257043-30bc-4888-a09e-745501e0012a' }) } }) },2800); </script> <!-- End Solution 1 --> <!-- Start Solution 2: Works, but becomes render blocking --> <!--<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> <script> hbspt.forms.create({ portalId: '2564694', formId: '2a257043-30bc-4888-a09e-745501e0012a' }); </script>--> <!-- End Solution 2 --> </div> </div> </div> </div> </div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-4 col-xs-6 social text-center"> <div class="content tframe fw fh"> <div class="tcell valign-mid"> <div class="container-fluid"> <div class="addthis_toolbox social"> <a href="#" class="addthis_button_facebook" title="Facebook"> <i class="fa fa-facebook" aria-hidden="true"></i> </a> <!--<a href="#" class="addthis_button_twitter" title="Twitter"> <i class="fa fa-twitter" aria-hidden="true"></i> </a>--> <a href="#" class="addthis_button_email" title="Contact Us"> <i class="fa fa-envelope" aria-hidden="true"></i> </a> <a href="#" class="addthis_button_linkedin" title="LinkedIn"> <i class="fa fa-linkedin" aria-hidden="true"></i> </a> <a href="#" class="addthis_button_more" title="Share"> <i class="fa fa-share-alt" aria-hidden="true"></i> </a> </div> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 signup"> <div class="content tframe fw fh"> <div class="tcell valign-mid"> <?php echo g2is_home_webinar_latest() ?> </div> </div> </div> </div> </div> </footer> </div> <!-- Pagespeed compliant - Avoid render blocking load of JS --> <!--<script type="text/javascript"> function loadJS(e) { var t = document.createElement("script"); t.type = "text/javascript", t.async = !0, t.src = e; var n = document.getElementsByTagName("head")[0]; n.appendChild(t) }; loadJS('<?php echo get_template_directory_uri(); ?>/_assets/js/all.min.js'); </script>--> <!--Pagespeed compliant - Alternate non-render blocking JS --> <script async type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "<?php echo get_template_directory_uri(); ?>/_assets/js/all.min.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script> <?php wp_footer(); ?> <!-- Social Share Links --> <script type="text/javascript" async="" defer="" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-588971d14a074f13"></script> <!-- Start of HubSpot Embed Code --> <script type="text/javascript" async="" defer="" id="hs-script-loader" src="//js.hs-scripts.com/2564694.js"></script> <!-- End of HubSpot Embed Code --> </body> </html> 

Answer 1

wrap the code in noptimize-tags, cfr. AO's FAQ ?