Form does not correctly on iPad

This strange behavior is already causing problem for our users.  I've learned that when the JotForm is embedded using the JavaScript embed link, and the user is using an iPad (perhaps other small screen devices), in the vertical orientation, the conditional logic and validation fail.

Our recruiting application form has paragraphs that display conditionally.  For instance, when an applicant checks a box to indicate that they live more than 3 hours away, the "Testing Process" section toggles to display alternate requirements.  And we have several fields that are "Required" throughout the form.  When I view the page natively on JotForm, everything works as designed.  But when the same form is embedded on our website, contained within our webpage template, AND when the iPad is oriented vertically, the conditional features fail, displaying both the primary and alternate text.  And the form can be submitted with required fields empty.

Here's a link to the form on JotForm:  http://www.jotform.us/form/50215879780160

And here's a link to the same form, embedded into our website:

https://www.sjpd.org/JoinSJPDBlue/policerecruitapplication.asp

I know I can experiment with embedding the form in different ways (by copying source code, or using a lightbox), but this behavior is so strange I wanted to point it out to identify the cause.  It would be most convenient to be able load the form dynamically rather than cut and paste source code each time the form is modified.

Can you help with an explanation and perhaps a suggestion?

Thanks,

-Dave

I have inspected your form and like you said I saw that you are using script block (source code) for embedding your form on the website. We recommend using of iFrame code. When you are using script code there is a possibility that there will be conflict between JotForm script and other external script (scripts from your website).

You can try to replace script code with iFrame to see if the form will work correctly. In this article you can find out how to do it.

http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code 

Also I noticed that your form is not responsive and that can impact layout of your website when using small devices.

If you want to make your form responsive you need to add Mobile responsive widget to your form.

Hope this will help. Let us know if you need further assistance. 

When I use the iFrame embed method the javascript works but the iFrame is thousands of pixel too tall, resulting in very large amounts of white space at the bottom of the page.

Can the iFrame height be controlled or optimized?  It doesn't fit my page template in an attractive way.

Also, I added the mobile responsive widget, but it seems to do nothing when the iFrame is displayed in my fixed-width page. 

Here are temporary, test links

http://www.jotform.com/?formID=51535502760955

https://www.sjpd.org/JoinSJPDBlue/policerecruitapplication1.asp

Can you please try to replace existing code with following code to see if that will resolve your problem.

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformpro.com/form/51535502760955" frameborder="0" style="width: 100%; height: 2944px !important; border: none;" scrolling="auto"></iframe>

I have changed height of the form and now there should not be white space at the bottom of your form.

Hope this will help. Let us know if you need further assistance. 

Thank you. I tried your iFrame code and it worked on portable devices (iPad) best.  But on computer browsers (Safari, Chrome, Firefox, IE) the iFrame must be sized lage enough to accommodate all the validation error messages and the largest blocks of conditional hiden text.  So the iFrame must be sized 6 to 8 inches larger than the initial form size.  Oddly, the iPad seems able to dynamically size the iFrame very elegantly.

So I went back to the JavaScript embed method and tried to see what JavaScript running on the parent page template might be causing a conflict that breaks on the iPad.  I think I've found it...  I have a "ShareThis" social media component installed on the page so users can share pages throughout my site.  When I removed "ShareThis" JavaScript, the JotForm JavaScript embed method seems to work in the iPad.  I have more testing to do but I wanted to share this result in case it affects someone else.

I'm not a fan of the iFrame embed method because in the design of my site, the extra space at the bottom of the iFrame I need to reserve for validation messages and conditionally hidden sections makes the form look unbalanced on the page.

Thanks again for your prompt answers to my many questions!

-Dave

Hi sjpd, 

Glad to hear that you found a workaround to solve the issue you encounter.

Do let us know if you need further assistance.

Regards.