JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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.
Form does not display properly on MacAir / SafariAsked by rogerwf on September 09, 2014 at 10:00 AM
Due to site limitations (number of pages), I have two simple forms on the same web page... one above the other. This displays and functions properly on my Windows 7 / IE laptop as well as my Windows 8 / IE tablet. However, on my wife's MacAir with Safari, the last two items (captcha code and submit button) of the second form do not show up at all, seemingly rendering the form useless, as there is apparent way to submit.
However I did find that, if she places the cursor in the last field that does display and then presses Tab, those last two items then appear and can be completed. But I also noticed that, when I do this, the heading on the form disappears. It is as if there is a limitation on the size of a form that can be displayed on the Mac...???
The attached screenshot shows the bottom of the form as it displays on the Mac: No Captcha and No Submit. I searched the Forum and saw some possibly related issues, but nothing that showed me how to handle this specific situation.
Have you tried using another method to display the form? EG iframe ?
Re-embed the second form using iframe embed code, that should fixed it.
Here's how to get your form's iframe embed code. http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code
You have 2 forms embedded on the same page, we recommend using iframe for the 2nd form to avoid conflicts.
Thank you both for the feedback - I didn't expect such quick responses! This sounds promising. I need my wife's Mac to test this, and I hope to be able to pry it away from her later today. I will follow up soon. Thanks again.
On behalf of my colleagues you are very welcome. Let us know if this does not fix the problem and we will be happy to see what else we can do.
The iFrame code did have an effect, but not desirable.
On Windows/IE, which was originally fine with the embed code, the form display is now truncated at the first text box (description). In other words, the same Mac issue is now present on IE.
On Safari, the change to iFrame code had the same effect: truncation sooner on the form (instead of above the Submit button, it's also truncated at the description text box).
I noticed a 'height' parameter in the code, so I tried playing with that. On IE, no effect; truncation at the same spot. On Safari, it was weird...sometimes the form displayed OK, but upon page reload it would be truncated.
At any rate, neither the embed code nor the iFrame code is currently satisfactory. So I looked into some of the other options, and have decided to use the popup link for now. I'm not crazy about that approach (it's one more click the user has to do; people allow or disallow popups at varying degrees; the link text does not fit the style of the page), and would certainly like the direct form display to work. I haven't tried more complicated options (e.g. source), and would prefer not to, just to keep maintenance by others simpler).
I'm open to further suggestions and would appreciate any help you can offer in getting this to work. I'll be glad to provide specific screenshots if needed.
I did quite a bit more testing and found that the script from the first form you embedded is interfering with the script of the second form. It is causing the height to be the same for both no matter what I changed. Embedding BOTH forms to your page using the iFrame embed code produced the proper results and stopped the form from being cut off on my test page. Replace both form embeds with the iFrame code and you should be good to go.
Thanks David for spending the time on this. Your suggestion to convert both forms to iFrame has indeed resolved the problem...at least well enough that I feel I can switch back to the inline form display right on the desired page (and I have made the switch).
One thing is still kinda ugly: When I initially go to the page after publishing the site, everything looks great. But if I simply do a page reload, the height value of 1733 from the second form still seems to be in effect for the first form, overriding its height specification of 860. All the trailing blank space makes it difficult for a user to see that there is still more info on that page below the first form. And if I close/reopen the browser and go back to that page, the second length is still effective.
Any suggestions on this one final issue?
Oh well, I think that's because of the script in the iFrame codes.
For the top form, use the following codes:
<iframe id="JotFormIFrame" allowtransparency="true" src="//form.jotform.us/form/41077654452153" frameborder="0" style="width:100%; height:860px; border:none;" scrolling="no"></iframe>
For the bottom form, use the following codes:
<iframe id="JotFormIFrame" allowtransparency="true" src="//form.jotform.us/form/41507273322144" frameborder="0" style="width:100%; height:1733px; border:none;" scrolling="no"></iframe>
The script is only usable for Back-To-Top function when your form is using page breaks. It's no use for one page forms.
Please kindly change it and update us here if the issue persists.
Thanks, and sorry for the belated reply...just catching up after being away for a while. I will take a look at this code vs what we're currently using, and will give it a try soon.
1. remove the 'onload' argument from the iframe code;
2. remove the script code altogether.
Just tested it on Win7, Win8, and Mac...and it all looks great! Thanks so much for your help on this! Now I'll know how to deal with future forms if needed...
I consider this issue closed. Let me know if you need anything else from me. Thanks again...
On behalf of my colleagues you are welcome.
I am glad to know that your issue is resolved.
Do get back to us if you have any questions.