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.
Iframe adjust with conditional hidden fields and prepulate through urlAsked by sacredsmile on April 09, 2013 at 06:52 AM
Hi. I have a form that is not adjusting (in height) when embedding with iframe. I have some fields set to show and hide conditionally. And i choose which "program" to show through the url like this: https://secure.jotformeu.com/form/30981657147361?type=KursForedragsholder.
The problem is that the iframe doesn't adjust to these "programs" and is displayed as if the whole form should be displayed, without any conditionals. The result is that the form is displayed with a very long empty space beneath the form.
We apologize for the inconvenience that may have caused. With regards to the issue, can you please share to us the URL of your Website where your form embedded for us to investigate the issue and for further assistance?
Here is an url with that form (the form is at the bottom of the page): http://verdigesmil.no/bli-frivillig/bli-en-forkjemper/venn/
By the way, have you changed the html of your mails? The last mails from jotform have i found in my spam/junk folder.
Embedding your form using our iframe method (including the script tags) should auto adjust the form height. One thing I found out that might causing that not to work well is the pre-population. I've check your form and "Type" field is hidden. Can you explain what's the use of that method? You might want to remove the pre-population and just show the field so your user will be able to select an option.
The use of the type field is for the type or program that the user wants to partake in. The page where the form is placed is for a specific program. And the user should only see the fields for the specific program when viewing the form on that page. I want to have all the programs on the same form, because they are sub-programs in a program. So it is done that way because of administrative reasons.
I dont want to remove the pre-population because the user should not see the other fields that are conditionally set for other programs.
I have checked all the different programs/conditions and doesn't see any changes on the form height except on header title on top of all the fields? This means, you can easily change the iframe height that fits exactly on the form lenght.
I think re-embedding your form using only this, may help.
<iframe id="JotFormIFrame" allowtransparency="true" src="https://secure.jotformeu.com/form/30981657147361?type=Venn" frameborder="0" style="width: 100%; height: 1406px; border: none;" scrolling="auto"></iframe>
Notice the bolded part, I have changed the iframe height value to fit exactly on the form. The scrolling=auto attribute helps prevent cut off issues if it may happen.
Let us know if this doesn't help. Thanks!
Thank you EltonCris. Your modification works, but i dont like the scrollbar when wieving in other screen-sizes. The best option i've got so far is to use your "embed" option. The only thing with that option is that the bottom border of the form is not shown. It seems like the height of the form is calculated 10px to small.
You can see it now at the same url: http://verdigesmil.no/bli-frivillig/bli-en-forkjemper/venn/
I see, the "embed" option should always be the right solution for auto-adjusting form length. Anyway, to fix the cut off issue, inject the following CSS codes to your form.
padding-bottom: 12px !important;
This should add a little space after the bottom border of your form. Here's a guide: How to Inject Custom CSS Codes to your Form
Thank you very much. That works perfectly :)