Hide div once Hubspot form has been successfully validated

Hi all,

I’m using a Hubspot form as a page overlay and would like to close the overlay once the Hubspot form has been successfully validated.

I think I can use some Javascript to achieve this, but I’m a bit lost with implementation.

Does anyone have any experience with this?

Thanks!

If anyone is facing this issue, here’s a fix:

Code before:

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

Code after (when Hubspot form is successfully submitted, my overlay over covering the page hides):

    <!--[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(){
$('.your-div').hide();
} 
}); 
</script>

Hope that helps someone! Simple bit of code but finding & implementing wasn’t easy :man_shrugging:

Thank you so so much !! Been stuck on this for hours and hours and it worked perfectly :smiling_face_with_three_hearts: