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.
Form height problem when embeddedAsked by acgresources on December 11, 2013 at 01:24 AM
I have added a JotForm to the banner area of this page: http://acgresources.com/job-seekers/. Although I have the height set to 86px in the iframe's style attribute, that height changes to 126px after the form loads. (If I use Firebug and watch as the form loads, I see the style is orirginally written correctly, and then changes - presumably when the script runs.)
If I change the height to 100%, I get the same problem. No matter the value I set for height, it gets overwritten.
If I remove the script, as I have seen you suggest in similar forum questions, and set the height to 86px, the form is clipped when error messages are shown. It doesn't expand to display all the error messages.
If I remove the script and set the height for 100%, the form height is set to the height it would be if all the error messages were shown, even when the error messages are not being shown. Thus the form overflows its container. You can see an example here: http://acgresources.com/employers/employer-faq/.
Interestingly, if I embed the from using just the script you provide, not the iframe, it works perfectly in Firefox, but in Chrome, IE10, and Safari the form spills out of the container, same as in the paragraph above.
You can see in Safari there are also other problems as well (with the CSS.) I can probably make that work - the real problem is the height of the form.
This change is supposed to go live by morning. (6am ET, New York City time) so I can only leave these examples up for a few hours.
Thank you for your help.
What? You all don't work 24/7? ;) It was worth a try.
I need to change the site back to the old non-JotForms for now. Hopefully the explanations above will give you enough info to help me. I'm also willing to get screenshots for you if you wantt o see something in particular.
We apologized for the inconvenience but upon checking your site I can't find any form that is currently embedded into your site using jotform. I even downloaded the form source and the code. I also checked your account to match the form that is on your website so far I can similar layout but not exactly on your site. Can you please stir me in the right direction as i'm not able to see something that is embedded into your site.
By the way are you referring to the contact us section or the join now? I made a test on your contact us form but I think this is a different form. You can use this guide on how to attach images when sending us your reply so we can have a better view of what is issue. https://www.jotform.com/answers/277033
You didn't see the JotForms because I had to change the forms back to the old non-JotForms so it would look okay for the next business day. I can't put the JotForms on the site until they don't look bad, unless you can work with me later at night, maybe 10pm Mountain Standard Time.
This is how I want the form to look:
And this is how I want it to look when errors are displayed:
Below are images of how the form looks in different browsers both with and without error messages.
My main problems are:
- the form expanding out of its parent container in some browsers
- error messages not displaying correctly
There are some position problems with the labels and inputs in Safari, but I can fix that on my own (unless you have a quick answer for me).
Please let me know if you need any other info.
WHEN I EMBED WITH THE SCRIPT
WHEN I EMBED WITH THE IFRAME + SCRIPT
It makes no difference what I set the height at in the iframe inline styles. The page loads with the correct height, but then the height is overwritten when the script runs.
WHEN I EMBED WITH THE IFRAME AND LEAVE OUT THE SCRIPT
Sorry about the giant images.
Thanks for the additional information.
Can you make a sample page with the Jotforn form added on the same position so we can check? One possible solution to that issue is to inject a custom CSS codes to the form that would change its behavior when access through certain browsers. We won't be able to provide the custom CSS codes until we'll see the page with the form on it. We'll do our best.
By the way, re-embed your form using the iFrame Method without the script tags when creating a sample page for us, this codes:
<iframe id="JotFormIFrame" allowtransparency="true" src="//www.jotform.us/form/33348255740152" frameborder="0" style="width:100%; height:465px; border:none;" scrolling="no"></iframe>
No worries with the images, I adjusted the dimensions per forum editor settings. Thanks
I'm sorry, I have updated the codes. I pasted the wrong URL. Please kindly correct it, just in case.
Good idea. Here you go. http://acgresources.com/employers/jot/
I have cloned your form here and made a little adjustment on the CSS code. Kindly check if this works fine now. So far this displays fine on Chrome, Firefox and IE10 upon checking it here.
You can clone this form, here's how: http://www.jotform.com/help/28-Cloning-a-Form-from-a-Web-Page
Let us know if there are still remaining issues so we can provide you further assistance.
Sorry my fixed was for the consistency of the form field layout on different browser.
Regarding on the container problem, if you will have to use iframe, you have to define a fixed iframe height that covers the entire form length including the error state. The following iframe code should help.
<iframe allowtransparency="true" src="//form.jotform.us/form/33448926597168" frameborder="0" style="width:100%; height: 149px; border:none;" scrolling="no" height="149" width="100%"></iframe>
But, I would recommend using the default embed code since it comes script that auto-adjusts the container dynamically everytime the form length changes. Please try it with the following code. I have added a CSS that might help restore the form length on different browsers. This might be probably due to some conflict since everytime the form is loaded on your page, the iframe height of the form is removed. Anyway, I hope the following code would help. Please give it a shot.
Please let us know the result afterwards. Thank you!
"I would recommend using the default embed code since it comes script that auto-adjusts the container dynamically everytime the form length changes."
OK. I used your script & style. I also added the style you gave I tried it in my stylesheet, in the page template, and in the custom css for the form here on JotForm.
The CSS will limit the height of the form, but then it does not expand when error messages are displayed. You can see it on http://acgresources.com/employers/jot/ now.
Please let me know if this is unsolvable and I need to start thinking about changing the layout of the site.
Yes, that limits the height to 90px but it should supposed to expand the form when the error appears. That works fine for me on Chrome, Firefox.
Yes, the problem is most likely related to script conflict because the form iframe height has been removed when the form loads in your page which is really not common. I'm not really sure what existing script on your page makes the iframe height to be removed.
Could you please try to embed your form using the direct form source code? Guide: http://www.jotform.com/help/104-How-to-Download-a-Source-Code-of-your-Form. Copy the provided source code and embed it to your page. This doesn't create an iframe container since the source code is defined within your page so it might probably help. If there are changes on the form style (form embedded as source code is usually overwritten with your existing CSS), we can help you resolved it.
Please let us know if the problem still persists so we can check the source code in depth.
That did it!! I still have a little incidental CSS to do, but the form is the right size to start and expands properly for errors - in all 4 browsers!
Thank you for your time on this - you really stuck with me and I appreciate it. I can get forms in a dozen different places, but good customer service is rare. Jot Form has earned a loyal fan.
On behalf of my colleagues, Thank you. If you do need further assistance, do let us know.