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.
Trouble with iFrames - Forms getting cut off on Designer feature and Preview mode of the embedded wizard.Asked by OVUForms on July 23, 2015 at 04:36 PM
I'm having a problem that is new to me. I have several forms embedded on my site using iframes that used to work just fine--I've successfully tested them before and after making them live on our website. Recently though, we've found at least a couple forms (possibly more once we investigate further) that are cut off at the bottom. This problem is two-fold... one, of course, is that people can't submit the form, but the second is that this wasn't an issue when we set these up originally, these forms are only a few months old... so I need to figure out what changed and why this is suddenly a problem now?
For now, I'm going to use this form as reference: http://www.jotform.com//?formID=51043620137948
What is weird with all of this is that this problem is showing up even before I've embedded the form, so I don't think it's code from my website giving us issues. When I go to preview the iframe embed code (an option in the Embed Form Wizard), the form is cut off there.
So something in the code is cutting my form off before it even gets over to my site. That could be something wrong in our custom css--it seems the form is also cut off when viewed in "Designer" mode. But again, this wasn't a problem a couple of months ago, and I haven't changed anything on those forms or done anything to the CSS recently to have it suddenly go wrong now.
I've looked at some similar problems in the forums and found that if I delete the script section of the embed code, the iframe shows up properly... but this seems like a temporary fix. I shouldn't need to edit the embed code every time I want to place this on my site... why is the script even being generated if it isn't working? And why is the embed code not working now, when it was working fine just a couple of months ago?
Hopefully you can help me solve this problem. Thanks!
One common denominator that I am noticing is that the forms with these issues all use "Form Collapse" and conditions to hide and show those sections based on certain inputs.
So there may be an issue there... again, as stated before, these were all working fine weeks/months ago.
Can you please share the URL of the webpage where you have embedded your form? A quick solution would be to embed a fresh iFrame code: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code
Before you embed the code, paste it in a text editor like WordPad, you will notice two part of codes, only copy and embed the iFrame part in your webpage, example:
Make sure to set the scrolling property to "yes", example:
Once we you share the URL, we can test and report to our second level to have this fixed as it was before.
The URL for this particular form is: http://www.ovu.edu/give-to-ovu/donate-online.html
With the quick fix of not embedding the "script" portion of the code, the form is live and works.
As noted in my initial email, I've done this on the rest of my forms that are having this issue, but this feels like a work-around and not necessarily a solution, or an explanation as to why it was working months ago and suddenly stopped working. Hopefully we'll sort that out in the next steps.
Glad to know that form is live and working now.
That's why removing the script part made the form worked properly, since pretty much nothing can break the iframe where the form is loaded, because it does not conflict with anything in your page.
Here is an interesting post on how to put jQuery Into No-Conflict Mode: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
Please open a new thread, if you need anything else, we will be glad to assist you.
Okay... this is fine, but doesn't answer all of my questions...
1) We didn't change anything on our end as far as jQuery is concerned. The forms were working a month or two ago when we set them up, why did they suddenly break recently?
2) When I do a "preview the iframe embed code" in your Embed Form Wizard the form is cut off.
3) When I look at my form in "designer" mode, it is cut off as well...
The latter two indicate that the problem is happening before I embed the code on my website. I'd like to continue to troubleshoot that issue to get at the root of the problem. It may be some bad code on my side, or something else, but I would like to sort that out to avoid the problem in the future.
All this is quite odd, not really sure what exactly caused the problem or what is cutting off the form in preview or designer mode.
I know that even though the form is working now, you are concerned about these aspects, since you want to avoid any other problem in the future.
I will forward this to our second level to further check into this situation, just to let you know, there is no estimated time-frame for an update, so it may take a while to hear from them.
If you need anything else, please open a new thread, we will be glad to assist you.