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.
How to expand form on the website with using of iFrameAsked by gonzalezi2 on June 11, 2015 at 12:59 PM
I've created a request for quote form on my page with a products widget that allows for unlimited lines. It starts with just a single item and customers may click a button to add additional lines ad infinitum.
This problem is solved by using iFrame but this creates another problem; once the page expands beyond the size of the frame, the button to submit disappears at the bottom of the page.
There is no other way around this that I can figure out. Embedding the entire code creates problems with styling so I'd rather not do that. If there is any solution to this problem please let me know.
expand embed iframe form
I saw that you are currently using script code for embedding your form. We recommend using of iFrame. Can you please try with iFrame code again, but this time also increase height of your form and set scrolling to auto.
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/51554176836159" frameborder="0" style="width:100%; height:2500px; border:none;" scrolling="auto"></iframe>
Hope this will help. Let us know if you need further assistance.
I would rather not have to depend on a scrolling feature when it comes to a form like this. I also do not want to have unnecessary white space if I don't need to; A height of 2500 will have way too much unused space at the bottom.
I can see the problem you mentioned when I checked on your website.
the issue with the script embed code is, your website also have existing scripts like jquery scripts that is causing conflict with the form scripts. The iframe embed code is the simplest way to prevent the script conflict issue.
BUT if I may also suggest, can you at least try first the suggestion by my colleague using the iframe embed code?
We would like to be able to test the actual usage and figure out further workaround if issue still exist even after using the iframe embed method already.
We will wait for your update on this.
I've activated the iFrame on the site so you may check again and see for yourself. You need to add as many lines as you can and you will see that the bottom disappears.
Of course I could make the height 2500px like your colleague stated but that would really be as a last resort if there is no solution.
I understand that I have a lot of scripts running but I did not create the website and do not have full access to remove certain scripts that our website provider has locked on the control panel.
I tested and at the moment when you add many products a scrollbar is added to the form:
I will investigate further to see if there is a better solution.
Let us know if we can assist you further.