How to make sure calendar doesn't get cut off on my hubspot form?
解決
I tried embedding this form on my website but the calendar seems to get cut off whenever I try it. I tried it out on codepen and other code simulators and it seems to behave the same exact way. It's right when you try "Best day to chat?"
The reason why the calendar was cut off is because the iframe height was set to before the calendar was expanded which was 1140px and if you increase the iframe height by adding the following code into the css style:
If you're looking to style the form, I'd suggest for you to turn this option on:
When this option is turn on, you'll be able to style your embed form as it'll be render as a raw HTML instead of within an iframe. Learn more here: Style your embedded form on external pages
Regarding the styling, the best way here is to add the following css style:
The reason why the calendar was cut off is because the iframe height was set to before the calendar was expanded which was 1140px and if you increase the iframe height by adding the following code into the css style:
How to make sure calendar doesn't get cut off on my hubspot form?
解決
Hi Wendy,
Thanks again. I actually noticed this affects the forms on all the other pages on the website, is there any way I can do this so it only affects this form specifically?
but that didn't seem to work. I'm a bit confused by this -- I'm not too familiar with Javascript or React.
There's some other modifications I'd like to try -- such as adding overflow: auto so the calendar doesn't get cut off if the user leaves any of the fields blank (when they do, the form gets longer so it cuts off the calendar).
If there's any more info about styling with CSS that would be very helpful -- thank you!
If you're looking to style the form, I'd suggest for you to turn this option on:
When this option is turn on, you'll be able to style your embed form as it'll be render as a raw HTML instead of within an iframe. Learn more here: Style your embedded form on external pages
Regarding the styling, the best way here is to add the following css style: