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.
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
height property of the iframe where the form is embedded.Enable auto-resizing for the HubSpot form
resize script to dynamically adjust the form height.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>
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>
Having the same issue working with Elementor on Wordpress. Dropdown works perfect on the Hubspot Form URL, but the list is cropped when embedding. Tried the step recommended by @Wesimplifi_ above to manually adjust the height, but it just extends the frame size, not the dropdown list.
Any help much appreciated!
