Streaming live at 10am (PST)

iFrame Help with Jotform code


#1

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


#2

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.


#3

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


#4

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


#5

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!


#6

It needs to be 100vh, not 100% :wink:


#7

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


#8

Ahhh, you need to change your embed height from auto to 100vh as well. That'll fix the issue. :smile: @mattbrant1981


#9

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


#10

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!
https://form.jotformeu.com/Mattbrant/uploader


#11

Oww... it was about big background picture! Wait, I will check one more time


#12

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


#13

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


#14

HA! now it shows 443 px :smile: 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


#15

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

http://prontaprintdarlington.webflow.io/jotform


#16

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


#17

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:


#18

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


#19

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