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.
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.
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.
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?
embed form issue
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:
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" onload="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?
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.