What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
Resize jotform iframe to fit parent window sizeAsked by englep10 on September 22, 2014 at 11:26 PM
Hello, I am having some difficulties. Placing the code that I built here into my pages. I am using Dream Weaver and I want my form to be as responsive as possible. What I envision having is being able to place my form into one of these floating boxes. My Webpage Theme that I am using. However whenever I enter the code the form is too large or is not responsive how I want to be.
Any help will be greatly appericated!!
Please, I am running close on a deadline and want to get this finished soon.
Have you tried using the mobile responsive widget? http://widgets.jotform.com/widget/mobile_responsive
Or since you are using custom form templates, you can try removing the Jotform style-sheets and apply the form classes from your template within your form.
We'd be grateful if you could provide a page where we can inspect the form. It would be easier to diagnose the problem if we can view it on our browser.
We'll await your reply. Thank you so much!
http://imgur.com/c5mTb1y Sorry but this is the best I can do for the moment. I could send you the code through email.
http://imgur.com/6lN2XmC I have made it closer. However I need help re sizing the window
I took a look at the pictures, but unfortunately can not quite understand what you are looking to achieve.
I see that in the second screenshot the header image is not being resized at all (static - not responsive), but I can not see any other changes.
If possible, it would be great to mark the sections on the screenshot that you would like to change and then tell us about each section how you would like to change it.
It would still be best if you could follow that with a link to some closed off page that we could visit and check. We can also make this form private if needed for that?
Just to check, by window do you mean the iframe/frame?
Also did you test it on a page where it would be posted as other styles might impact it differently there so it would be good to do the final polishing there.
Sorry my mistake, I accidentally confused you with the two images.
What I want to do is to is to have the window the same size as the iframe. As you can see in the picture I am having trouble because the jotform created form is too large for the window. I would like to re-size either the Form aspect or the Window (preferably the window).
I labeled what I thought each thing meant. But let me know if that helps
Thank you for the clarifying your problem more.
It's possible to adjust your iFrame's height and width but please note that making it too small will cause it to be cut off.
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/42186219916157" frameborder="0" style="width:100%; height:6190px; border:none;" scrolling="no"></iframe>
Now if your jotform is too small or too long then the only way to combat that problem better would be to make sure that your scrolling is set to "yes".
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/42186219916157" frameborder="0" style="width:100%; height:6190px; border:none;" scrolling="yes"></iframe>
I hope this helps but if you need more help just let us know and we'll assist you more.
Hi Kade has helped with part of the problem but I am still facing a couple issues.
As you know since I using an ibox for my forum to enter on display on my web page I am forced to choose between mobile responsiveness and functionality.
( What I want is for when my users are on the computer they see:
If my user is on their mobile device I want them to see:
http://imgur.com/FkkrD3U ) <what I do want
( However what I am currently stuck with is depending on whether I include the mobile responsive widget:
So when I have the widget running my computer users see:
When I dont have it running my user on mobile sees:
http://imgur.com/UmPuDXN ) <what i dont want
Please let me know if this is possible. Thank you very much!
I can not reproduce the issue with the cloned version of your form and mobile responsive widget, the form is responsive and looks good on my side on both PC and Mobile.
The form appearance might be affected by your website styles, so we need to check the published site to be able to advise on how to move forward.
I will be sure to post direction to the site shortly. Still working
Thanks in advance. It would be a lot more easier if we can diagnose the problem on our browser. We'll look forward to hearing from you.