- sacredsmileAsked 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.
- pinoytechAnswered on April 09, 2013 at 09:16 AM
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?
- sacredsmileAnswered on April 09, 2013 at 12:25 PM
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.
- JotForm SupportWelvinAnswered on April 09, 2013 at 01:08 PM
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.
- sacredsmileAnswered on April 09, 2013 at 02:28 PM
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.
- JotForm SupportEltonCrisAnswered on April 09, 2013 at 02:46 PM
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!
- sacredsmileAnswered on April 09, 2013 at 03:46 PM
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/
- JotForm SupportEltonCrisAnswered on April 09, 2013 at 03:54 PM
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
- sacredsmileAnswered on April 09, 2013 at 04:05 PM
Thank you very much. That works perfectly :)