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.

1 Like

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


1 Like

I like jotform as well. They always seem to make great forms and functionality.

1 Like

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 :slight_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 :slight_smile:

1 Like

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

1 Like

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