Fix spacing on embedded form. HELP!

[mckaybird]

I am attempting to fix white spacing on an embedded form.

Our CMS does not show and <p> in the code but when I go to inspect element on the browser <p> is inserted by the embed form. Is there anyway to limit the white space on embed forms? 

[Kevin-C]

Could you prvided a live link for us to trouble shoot?

[mckaybird]

Hi Kevin. 

Here is the live environment. I'd like to reduce the spacing around the embedded form. 

www.tcn.com/pricing/

[Kevin-C]

Hey @mckaybird 

Unfortunately this isn't an easy CSS fix.

It looks like youve got 2 unneeded BR tags creating theb space. See below:

I'm at a loss 😞

Maybe @jennysowyrda has some insight?

[mckaybird]

There are no <br> ;s in the code. 

[lscanlan]

Hey guys @mckaybird @Kevin-C,

Maybe I can help. I think what's happening here is that WordPress is adding those <br> tags. So even though you're pasting our embed code in correctly, WordPress is then adding those <br> tags. It looks like the embed code is inside <p> tags, so maybe that has something to do with it. But I think we can work around it actually. Kevin's right that there isn't really a great CSS solution here. The reason for that is because CSS reads top-to-bottom. So since there's nothing really identifiable in the wrapping HTML for your form, we can't easily/reliably select those <br> tags to style them with CSS.

But we can customize your embed code with a JavaScript function that fires when the form loads. And unlike CSS, our function can traverse the DOM. So we can look for the form's parents, and then select those <br> tags and style them. My idea is something like this (using just some simple jQuery):

$('iframe.hs-form-iframe').parent('.hbspt-form').siblings('br').css('display', 'none');

So then @mckaybird, you can replace the existing embed code with this:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]--><br />
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script><br />
<script>
  hbspt.forms.create({
	portalId: "343021",
  formId: "e3172991-1332-41d5-8d13-1692105a76bf",
  onFormReady: function($form) {
    $('iframe.hs-form-iframe').parent('.hbspt-form').siblings('br').css('display', 'none');
  } 
});
</script>

Assuming that WordPress adds the <br> tags in the same way that it's currently doing, that will prevent them displaying, which will remove the space you're seeing.

If that doesn't work, I have 2 other ideas. The 1st would be to see if you can add a class to one of the form's parent elements. Then we could more easily select those tags to hide them. And the 2nd would be to use the target attribute within the embed code, which is documented here: https://developers.hubspot.com/docs/methods/forms/advanced_form_options, which would enable us to insert our form embed HTML somewhere else on the page where we don't need to worry about the <br> tags.

But let's try the above solution first, since it's just a copy/paste on your end. And if you have any trouble with it or if that doesn't work, let us know and we'll see about my other ideas.