Embedded form does not display until I refresh the page.

[xpthegreek]

Using 1and1 for hosting and using the MyWebsite Feature.  I embed a hubspot form on the page but the form does not display at first. Its only after I refresh the page that the form displays.  the website is.

hispropertyservices.com

here is the section of code

<!-- *** ADD OR EDIT HTML INSIDE OF THE dmRespCol DIVS, SEE DOCUMENTATION FOR GUIDELINES *** -->
<div dm:templateorder="101" class="dmContactUsRespTmpl" id="1460126442">
<div class="innerPageTmplBox dmRespRowsWrapper" id="1404622777">
<div class="u_1327928876 dmRespRow hasBackgroundOverlay" style="text-align: center;" id="1327928876">
<div class="dmRespColsWrapper" id="1986132531">
<div class="dmRespCol small-12 medium-12 large-12" id="1358377271">
<!-- *** INSERT YOUR HTML BELOW *** -->
<h1 data-inject="contactMin-pageTitle" class="u_1471354086 dmNewParagraph" dmle_widget="paragraph" id="1471354086" data-uialign="center" style="transition: opacity 1s ease-in-out;" no_space_e="true" data-element-type="paragraph">
How to Contact Us
</h1>
</div>
</div>
</div>
<div class="u_1654570035 dmRespRow" style="text-align: center;" id="1654570035">
<div class="dmRespColsWrapper" id="1382649347">
<div class="u_1976554779 dmRespCol small-12 medium-6 large-6" id="1976554779">
<!-- *** INSERT YOUR HTML BELOW *** -->
<div data-inject="contactMin-formParagraph" class="u_1108835787 dmNewParagraph" data-dmtmpl="true" id="1108835787" data-uialign="left" style="transition: opacity 1s ease-in-out;" no_space_e="true">
To book a cleaning or if you have any questions about our offers, please contact us by filling out the form&nbsp; and we will get in touch with you shortly. Alternatively, you can give us a call. We hope to see you soon!
</div>
</div>
<div class="dmRespCol small-12 medium-6 large-6" id="1722486682">
<!-- *** INSERT YOUR HTML BELOW *** -->
<h3 data-inject="contactMin-formTitle" class="u_1624086688 dmNewParagraph" dmle_widget="paragraph" id="1624086688" data-uialign="left" style="transition: opacity 1s ease-in-out;" no_space_e="true" data-element-type="paragraph">
Send Us a Message
</h3>
<div id="contact_form">
</div>
<div class="dmNewParagraph" data-dmtmpl="true" data-element-type="paragraph" id="1640172627" style="transition: opacity 1s ease-in-out 0s;" no_space_e="true">
<font style="color: rgb(197, 15, 95);" no_space_b="true" no_space_e="true">
<i style="" class="lh-1 font-size-12" no_space_b="true" no_space_e="true">
You may have to refresh page to display the contact form.
</i>
</font>
</div>
<script type="text/javascript" src="//js.hsforms.net/forms/shell.js" id="1579417928">
</script>
<script id="1782441352">
hbspt.forms.create({
portalId: "6262268",
formId: "6389d3bd-e2f9-4a01-8bf6-4ab186808824",
target:'#contact_form'
});
</script>
</div>
</div>
</div>
</div>
</div>

[jchristie]

I am having this issue in a Squarespace website but I'm not a developer so I don't know if this is going to help me. Here are the pages:

 https://catapultgreybruce.com/apply

https://catapultgreybruce.com/contact

[sharonlicari]

Hey @jchristie 

Thank you for reaching out! I'll tag a few experts that can share their thoughts with you

Hey @Kevin-C @Alex_ @Gonzalo any advice on this case?

Thanks

Sharon 

[JBlackmore]

@jchristie I'm having the same problem on squarespace. Did you work out how to fix this?

[xpthegreek · Accepted solution]

actually figured it out .  on 1 and 1 (IONOS) Mywebsite you have to copy and paste the code in DEVELOPER MODE. The first script tag which fetches  "shell.js" must be copied to the head section of the page. Not in the body of the page where the HTML WIDGET will put it.  Then you can add the second script tag with the newly added "taget:" property using the "HTML WIDGET" to your desired location on the page.  After the second script tag is added create your taget DIV and insure it comes before the second script tag in the page flow.  Hope this helps sombody.