Close a div on form validation - Webflow + Hubspot

[SpacedUp]

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

[tjoyce · Accepted solution]

<!--[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

[SpacedUp]

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

Much appreciated 🙂