Can someone please tell my why I can’t get this Jotform embed to be 100% screen size, I probably doing something painfully simple wrong but I can’t for the life of me find out what it is!!! HELP!
Links:
http://prontaprintdarlington.webflow.io/jotform
https://preview.webflow.com/preview/prontaprintdarlington?preview=7797851dfc8d6f9a5280e8991a3f1292
Any reason why you’re using JotForm over the native Webflow contact form?
Your iframe has a height of 100%, though it doesn’t have a reference of what to be 100% of. So if you change the height 100vh (vh stands for view height), that’ll fix the issue.
Thanks @Waldo, I’ll try that. I’m only using jotform as it plays nice with Filepicker.com which I’m using for the file upload button and it will eventually be a payment form which is easy to do in Jotform.
I would use Webflow forms but I currently don’t know how to add e-commerce & a file upload button to the native form!!
Cheers
I like jotform as well. They always seem to make great forms and functionality.
Just Tried that @Waldo & still not working, any other suggestions?
It was initially set at 514px from the Jotform code and I thought that was the issue so I changed it to 100%, I’ve also tried it at 800px and still no success!
It needs to be 100vh, not 100% 
Yeah, sorry I meant to say I tried that too!! 
Ahhh, you need to change your embed height from auto to 100vh as well. That’ll fix the issue. 
@mattbrant1981
Here we go…
I would try to create same class in Webflow and apply settings that needed. If it will not help, you will have to use custom CSS with !important declaration
UPD: Nope, Webflow class will not work, there is stylesheet inside the iframe. MAYBE you can change it when you creating form there.
Regards,
Anna
Thanks @sabanna, I’ll have a look at the Jotform end and see if I missed something.
The raw Jotform link works perfect, just not when I drop the code into Webflow!
Oww… it was about big background picture! Wait, I will check one more time
Found it, changed it and still no joy!! 
HA! now it shows 443 px 
really weird! Try add custom CSS with !important to the head part of page:
<style>
#JotFormIFrame {
height: 100vh !important;
}
</style>
PS. Pay attention to ID name, uppercase/lowercase
Lol, 
thanks @sabanna, that seems to have fixed it!
Dirty way, but works… Seems this issue on that service side 
Yeah it seems so, they have just updated the publish tool at Jotform so it could be a bug I guess, but as long as it’s working that’s all that counts!
Thanks for your help
Changing this to an Embed/Custom Code and renaming the post from “Help Please Fellow Webflowers!” to iFrame Help with Jotform code.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.