Form Dropdown cropped

[JKielty1]

Hi,

We've embedded a form on an external Wordpress website, but the very first dropdown list is being cropped (images attached). 

It works perfectly on the hsforms.com page:

I've tried adding spacing/padding to the bottom of the code/embed module (we use the Divi theme builder), but the dropdown still gets cropped:

Are there any solutions, other than switching back to the Legacy Editor version? I've read the new Editor is limited in some styling/layout aspects.

Thanks,

James.

[Wesimplifi_ · Accepted solution]

Hi @JKielty1,

The dropdown is being cropped due to the iframe height being too short. Since the form works fine on the hsforms.com page, the issue is likely related to how the iframe is embedded within your WordPress site using Divi.

Increase the iframe height

• Try manually increasing the height property of the iframe where the form is embedded.

Enable auto-resizing for the HubSpot form

• HubSpot forms support automatic resizing. If you're using the HubSpot embed code, ensure it includes the resize script to dynamically adjust the form height.

[Wesimplifi_ · Accepted solution]

Hi @JKielty1,

The dropdown is being cropped due to the iframe height being too short. Since the form works fine on the hsforms.com page, the issue is likely related to how the iframe is embedded within your WordPress site using Divi.

Increase the iframe height

• Try manually increasing the height property of the iframe where the form is embedded.

Enable auto-resizing for the HubSpot form

• HubSpot forms support automatic resizing. If you're using the HubSpot embed code, ensure it includes the resize script to dynamically adjust the form height.

[JLovick]

Hi - how would I add the resize script into the form code? I am having a similar issue.

Code is below:

<script src="https://js-eu1.hsforms.net/forms/embed/25858380.js" defer></script>
<div class="hs-form-frame" data-region="eu1" data-form-id="745f9123-49f1-41c2-8ee1-f7abac96eb6f" data-portal-id="25858380"></div>

[Wesimplifi_ · Accepted solution]

Hi @JLovick,

You can use this code,

<script src="https://js-eu1.hsforms.net/forms/embed/25858380.js"></script>
<div class="hs-form-frame"
     data-region="eu1"
     data-form-id="745f9123-49f1-41c2-8ee1-f7abac96eb6f"
     data-portal-id="25858380"></div>
<style>
  .hs-form-frame {
    min-height: 800px;
    overflow: visible;
  }
  .hs-form-frame iframe {
    min-height: 800px !important;
    width: 100% !important;
    display: block;
  }
</style>