CMS Development

SpacedUp
Miembro

Close a div on form validation - Webflow + Hubspot

resolver

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

1 Soluciones aceptada
tjoyce
Solución
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

Close a div on form validation - Webflow + Hubspot

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

Ver la solución en mensaje original publicado

2 Respuestas 2
tjoyce
Solución
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

Close a div on form validation - Webflow + Hubspot

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

Close a div on form validation - Webflow + Hubspot

resolver

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

 

Much appreciated 🙂