Having trouble with JavaScript embedded JotForms, iFrame alternative embedding fails on iPhone

I'm having trouble with the Jotform, JavaScript-embedded forms (1) AND the alternative iFramed version(2) of the same form.  

I've created two parent pages as a test.  One includes the JavaScript embedded form and the other includes the iFrame embedded form.

1) https://www.sjpd.org/JoinSJPDBlue/PoliceRecruitApplicationJSCRIPT.asp

2) https://www.sjpd.org/JoinSJPDBlue/PoliceRecruitApplicationIFRAME.asp

In a previous support request concerning iPads and Javascript-embedded forms, Jotform suggested I use the alternate iFrame embedding method because JavaScripts in the parent page may conflict with Jotform JavaScript.  

That worked for the iPad, but fails on the iPhone.  

One signficant downside to the iFrame-embedded form is that  the iFrame expands the length of the page vertically on PCs and Macs and fills the page with expanded white space.  The space is needed to allow for the validation text that can expand the vertical dimension of the form conditionally. 

After much testing, I've now found a problem with the iFrame-embedded form as well.  When the iFrame-embedded from is displayed in an iPhone, we get an error message instead of the form. (See attached screenshot from the iPhone)  

The error is displayed in the iFramed space, within the parent page.  And it says, "Invalid Form URL, This form is not available for this domain. http://www.jotform.us/form/50215879780160"

However if I click the link in the error message, the form is downloaded from Jotform and displayed.

The same iFramed form works fine on the PC and the Mac, just not on the iPhone.  Could this be an SSL issue?  My forms all use SSL.

Another related issue is when I use the Jotform JavaScript-embed method on the iPad and iPhone, the form intermittently fails to process the JavaScripts used by the form, and conditional fields are displayed unconditionally.  The form validation is also ignored,allowing the form to be submitted without required field data.

If you visit this link: https://www.sjpd.org/JoinSJPDBlue/PoliceRecruitApplicationJSCRIPT.asp using an iPad or an iPhone, the form may intermittently fail to hide certain fields that are conditionally hidden.  And it will also allow the form to be submitted without checking for required fields.

But if you reload the same page again, the JavaScripts may then fully load and process normally.  And if you reload yet again, they may again fail. 

There seems to be an issue with the timing of the request and perhaps network/server latency, or maybe its an order-of-processing issue within the scripts on the page.  

I want to find one method of embedding a Jotform that works everywhere.  At this time I am testing server side logic to sniff the user agent string to detect mobile devices, and redirect them to Jotform.  But this is sub-optimal, escapes my site's branding and I'm stuck using the iFrame with long trailing white space for PCs and Macs.

Can you review these issues and see if you have any suggestions?

Assuming that the problem is an order-of-execution issue, Is there a way to modify things on your end to asynchronously load the Jotform javascripts and wait until the entire page has loaded before executing the scripts that load the form?

Hi,

You can have the scripts asynchronously load on your page by using the form's full source code. You can also download the entire form source code (css, js and html) of your form and host it on your server. http://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form

With regards to the attached error, it is a problem with the domain used on the embedded form. Check the form domain on your embed code, it should have www.jotform.us not anything else. This is part of the domain separation rule. Depending on the user location, there is a domain assigned to the forms.

Pertaining to the iframe length, unfortunately that's how iframe works. It's height is fixed and does not dynamically changed depending on the content height unless you will implement 3rd party scripts.

Let us know if I have missed something here. Thanks!

Thank you for your helpful reply.

With regard to my test page: https://www.sjpd.org/JoinSJPDBlue/policerecruitapplicationiframe.asp

In order to test without poluting the data in our Live form, I cloned the form to a new one:

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

And this is the form that is embedded as an iFrame in the parent page referenced above.

When I edit that cloned version of our form and select the "iFrame Embed" icon it displays the following embed code:

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

...

Note that the domain name is secure.jotformpro.com.

So I've learned that sometimes the domain is secure.jotform.us and at other times the domain might be secure.jotformpro.com.

I did not notice this while testing and may have cut and pasted the embed code from the original form, and then just changed the form ID number.

Now that I have corrected the domain name in my cloned test form, parent page, it seems to be working on the iPhone.

Why do newly cloned forms have the jotformpro.com domain name?  Will all new forms have this domain name?

Thanks

-Dave

PS: It is interesting to note that IOS on the iPhone 5s and iPad Does dynamically resize iFrames natively while Safari, Firefox, Chrome and IE do not.

So just to clarify, all is working the way you wanted, correct? If so, we are very glad to hear that, and on behalf of our colleague Elton, you are kindly welcome.

It is not necessarily true that all your new forms would be on jotformpro.com domain, but as you are on a paid plan (Economy) - your new forms will be preferably placed on *pro domain by our system automatically. We usually disperse forms over other domains, such as *eu and *us, to reduce the loads on our main servers.

For this reason, it is still best that you use the embed codes as they are provided by our system on the form itself, as you have already discovered for yourself.

Please let us know if you need any further assistance, or kindly open a new thread for any other questions or issues that you may have with your forms. We will gladly help.