Streaming live at 10am (PST)

iFrame Help with Jotform code


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!



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 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!!



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% :wink:


Yeah, sorry I meant to say I tried that too!! :pensive:


Ahhh, you need to change your embed height from auto to 100vh as well. That'll fix the issue. :smile: @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.



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


It is in iframe settings... So maybe you can find it inside the code that you embeding


Found it, changed it and still no joy!! :tired_face:


HA! now it shows 443 px :smile: really weird! Try add custom CSS with !important to the head part of page:

#JotFormIFrame {
height: 100vh !important;

PS. Pay attention to ID name, uppercase/lowercase


Lol, :grinning: thanks @sabanna, that seems to have fixed it!


Dirty way, but works... Seems this issue on that service side :confused:


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 :smile:


Changing this to an Embed/Custom Code and renaming the post from "Help Please Fellow Webflowers!" to iFrame Help with Jotform code.

closed #19

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.