Blog, Website & Page Publishing

xpthegreek
Member

Embedded form does not display until I refresh the page.

SOLVE

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>

0 Upvotes
1 Accepted solution
xpthegreek
Solution
Member

Embedded form does not display until I refresh the page.

SOLVE

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.

 

View solution in original post

jchristie
Member

Embedded form does not display until I refresh the page.

SOLVE

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

 

 

0 Upvotes
sharonlicari
Community Manager
Community Manager

Embedded form does not display until I refresh the page.

SOLVE

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 


¿Sabías que la Comunidad está disponible en Español?
¡Participa hoy en conversaciones en el idioma de tu preferencia,cambiando el idioma en tus configuraciones!

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


xpthegreek
Solution
Member

Embedded form does not display until I refresh the page.

SOLVE

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.