Close a div on form validation - Webflow + Hubspot

Developer Support CMS Development
1

Hi all,

I’ve been building in Webflow and have a Hubspot form inside a div (let’s call it, ‘Overlay-div’) which is gating the content on the page.

I would like the ‘Overlay-div’ to hide once the form is successfully validated. I’m guessing I need to use some sort of Javascript but I’m a little lost.

Does anyone have any experience with this?

I’ve consulted StackOverflow to find some related Javascript but implementation is really confusing me at the moment.

Existing code:

<!--[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>
<script>
 hbspt.forms.create({
portalId: "[PORTALID]",
formId: "[FORMID]"
});
</script>

(I’ve replaced my portalId and formId with placeholders)

Thanks

Paul

2 
<!--[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>
<script>
 hbspt.forms.create({
portalId: "[PORTALID]",
formId: "[FORMID]",onFormSubmit: function(){ $('.Overlay-div').hide();}
});
</script>

https://developers.hubspot.com/docs/methods/forms/advanced_form_options

3

Ah, I was so close to this solution, thank you so much for the assistance.

Much appreciated :slightly_smiling_face: