How to make sure calendar doesn't get cut off on my hubspot form?

SOLVE
Highlighted
Regular Contributor

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?" 

Screen Shot 2019-09-23 at 3.15.33 PM (3).png

https://codepen.io/dkapomasspay/pen/YzKBpBo

 

Thank you. 

 

 

Reply
0 Upvotes
2 Accepted solutions

Accepted Solutions
Community Manager

Hi @dkapo,

 

I hope all is well with you 😄

 

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:

iframe#hs-form-iframe-0 {
  height: 1280px !important;
}

You'll be able to see the calendar just fine;

iframheight.png

 

I hope this helps!

Reply
0 Upvotes
Community Manager

Hi @dkapo,

 

If you're looking to style the form, I'd suggest for you to turn this option on:

rawHTML.png

 

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:

<style>
iframe#hs-form-iframe-0 { height: 1280px !important; }
</style>

On the page head HTML setting instead of the template css stylesheet file like this:

headHtml.png

 

So that it'll only affect form that is on this particular page instead of all pages that is using the same template.

 

Hope this helps!!

Reply
0 Upvotes
4 Replies 4
Community Manager

Hi @dkapo,

 

I hope all is well with you 😄

 

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:

iframe#hs-form-iframe-0 {
  height: 1280px !important;
}

You'll be able to see the calendar just fine;

iframheight.png

 

I hope this helps!

Reply
0 Upvotes
Regular Contributor

That worked great, thank you!

Reply
0 Upvotes
Regular Contributor

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? 

 

I found this documentation https://designers.hubspot.com/docs/cms/hubspot-form-markup  and tried 

 

#hs-form-1f20245e-57f5-4ba4-816f-df623654aa6f-iframe-0 {
    height: 1280px !important;
}
 
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! 
 
 
Reply
0 Upvotes
Community Manager

Hi @dkapo,

 

If you're looking to style the form, I'd suggest for you to turn this option on:

rawHTML.png

 

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:

<style>
iframe#hs-form-iframe-0 { height: 1280px !important; }
</style>

On the page head HTML setting instead of the template css stylesheet file like this:

headHtml.png

 

So that it'll only affect form that is on this particular page instead of all pages that is using the same template.

 

Hope this helps!!

Reply
0 Upvotes