How to expand form on the website with using of iFrame

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.

The problem is that under javascript I cannot add more than 7 items because the button to add more disappears after the 7th item. There's also a big space under the "Products" module/widget because it has a set height that I cannot change it to automatically adjust to fit its content.

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.

Thanks!

Ivan

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" onDISABLEDload="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.

The script form used to work and displays properly on the preview on jotform.com but behaves differently on my site. I simply need to have the Javascript doing what it's supposed to.

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.

Thanks.

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.

Ivan

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.