What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

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.


  • Profile Image

    Form does not correctly on iPad

    Asked by sjpd on June 03, 2015 at 01:18 PM

    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

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

    ipad JotForm problem embed
  • Profile Image
    JotForm Support

    Answered by BJoanna on June 03, 2015 at 02:11 PM

    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. 

  • Profile Image

    Answered by sjpd on June 03, 2015 at 03:22 PM

    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

     

  • Profile Image
    JotForm Support

    Answered by BJoanna on June 03, 2015 at 03:43 PM

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

    <iframe id="JotFormIFrame" onload="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. 

  • Profile Image

    Answered by sjpd on June 03, 2015 at 10:33 PM

    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

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 04, 2015 at 01:34 AM

    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.