Help: Hubspot form shows up on bottom of the page after closing pop-up modal window

[ziadi]

Using Hubspot CMS we created a custom pop-up model and used the hubspot share code that was provided via HS forms.

We've added the javascript code into the model inside a div, pop-up works great but when you close the pop-up via close button or click out from frame, the actualy form unloads on the button of the page. 

<div class="span12 widget-span widget-type-custom_widget " style="" data-widget-type="custom_widget" data-x="0" data-w="12">
<div id="hs_cos_wrapper_module_159165582900002" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module widget-type-rich_text widget-type-rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><span id="hs_cos_wrapper_module_159165582900002_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"><h4 style="font-size: 24px;"><span data-contrast="auto" class="TextRun Highlight SCXW26043007 BCX7" xml:lang="EN-US" lang="EN-US"><span class="NormalTextRun SCXW26043007 BCX7">Ready to work with a</span></span><span data-contrast="auto" class="TextRun Highlight SCXW26043007 BCX7" xml:lang="EN-US" lang="EN-US"><span class="NormalTextRun SCXW26043007 BCX7">n optimized</span></span><span data-contrast="auto" class="TextRun Highlight SCXW26043007 BCX7" xml:lang="EN-US" lang="EN-US"><span class="NormalTextRun SCXW26043007 BCX7"><span>&nbsp;</span>lab?</span></span><span data-contrast="auto" class="TextRun SCXW26043007 BCX7" xml:lang="EN-US" lang="EN-US"><span class="NormalTextRun SCXW26043007 BCX7"><span>&nbsp;</span>Provide us your information and we’ll follow up with you to gather your details so we can connect you with the lab that best matches your needs!</span></span><span class="EOP SCXW26043007 BCX7" data-ccp-props="{}">&nbsp;</span></h4>
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script type="text/javascript" src="//js.hsforms.net/forms/v2.js" charset="utf-8"></script>
<script>
  hbspt.forms.create({
	portalId: "1806452",
	formId: "75b91b55-8a8a-4865-b832-a6847578dd10"
});
</script></span></div>

Is there some additional css code that I need to add to make sure the form disappears completely and not place itself on the bottom of the page? 

[TRooInbound · Accepted solution]

Hi @ziadi 

In CSS please add this line, it will fix this issue.

body > div.hbspt-form {
    display: none !important;
}

We hope it works for you.

Did our post help answer your query? Help the community by marking it as a solution.

Thanks,

Team TRooInbound

[ziadi]

@TRooInbound hello, this worked like a charm. Appreciate your help!!