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

    My form is too wide on iPhones

    Asked by kevkulbacki on June 28, 2015 at 09:17 PM

    For some reason the form is appearing too wide on iPhones (tested with iPhone 5S).  The whole website is designed with bootstrap to be mobile responsive, so it is an important issue.

    Page URL:
    kulbackifde.com/temp/contact.html

    Screenshot
    wide too wide Mobile mobile responsive
  • Profile Image
    JotForm Support

    Answered by Chriistian on June 29, 2015 at 07:46 AM

    Hi kevkulbacki, 

    Thanks for contacting us.

     

    Can you try embedding your form using the iFrame embed code below and see if it works?

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/51773608413153" frameborder="0" style="width:100%; height:547px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

     

    Do let us know if you need further assistance.

     

    Regards.

  • Profile Image

    Answered by kevkulbacki on June 29, 2015 at 09:27 AM

    Hello Chriistian,

    Thank you for your reply; however, that solution did not work.  On my computer, the form appears correctly when the window is narrowed; however, on the iPhone 5S I am testing it on the form does not (see earlier screen shot).  I have cleared the browser's cache to ensure that I am viewing the updated version as well.  

    I have also tried adjusting the size of the column it is in on xs devices; however, that hasn't worked either.

  • Profile Image
    JotForm Support

    Answered by Boris on June 29, 2015 at 11:31 AM

    Thank you for letting us know. I do not have an iPhone device, but I have asked one of our colleagues to take a look at it on their iPhone.

    For what it is worth, I do see that it displays correctly when testing the Mobile Responsive View function on my desktop:

    I will try testing on an iPhone emulator, and a colleague of ours will be checking on their iPhone. We will let you know of our findings, thank you.

  • Profile Image
    JotForm Support

    Answered by Boris on June 29, 2015 at 11:49 AM

    While testing this form on an online iPhone simulator, I was still unable to replicate the issue as you have described. I have seen that on screens that are very narrow, such as 320px, the captcha box seems to overflow a little bit to the right - as the captcha has a minimum width of 304px and there is some additional padding to the left and to the right of it.

    However, your screenshot seems to be showing that the entire form is slightly moved to the right, is that the issue that you are experiencing?

    I have also checked on the following iPhone and iPad simulator, again without being able to get the same look as depicted in your screenshot.

    http://www.responsimulator.com/?url=http%3A%2F%2Fkulbackifde.com%2Ftemp%2Fcontact.html#360

    Can you please check on another iPhone device if the issue appears or not, and kindly let us know.

  • Profile Image

    Answered by kevkulbacki on June 29, 2015 at 01:11 PM

    Boris that is correct, the entire form is shifted to the right.  I have had it tested on both the iPhone 5S and iPhone 6.  It works on the 6, but on the 5S it appears as it does in my screenshot.

     

    On the computer the responsive design works with the form very well, it just appears to be something with the narrower display on the 5S.

  • Profile Image
    JotForm Support

    Answered by BJoanna on June 29, 2015 at 02:22 PM

    Considering that I do not have iPhone 5S I was not able to test your issue. However I have tested on iPhone 5 simulator and form displays correctly. I have also tested on my Samsung Galaxy S4 and form is responsive there as well.

    Have you tested on some other iPhone 5S? Can you also try to clear your iPhone browser cache:

    http://www.wikihow.com/Clear-Your-Browser's-Cache-on-an-iPhone 

     

  • Profile Image

    Answered by kevkulbacki on June 29, 2015 at 09:35 PM

    Yeah, I think it might be isolated to narrower devices.  I will keep working on trying to figure out a solution.

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 29, 2015 at 11:23 PM

    Hi kevkulbacki, 

     

    I checked your form using an iPhone emulator and I was not able to duplicate the issue. Have you tried clearing your browser cache on your iPhone as suggested by my colleague BJoanna in her previous post? 

     

    If the issue still persists even after clearing the browser's cache, can you give us the browser version you are using to access your site so we can further check?

     

    We will wait for your response.

     

    Regards.

  • Profile Image

    Answered by kevkulbacki on June 30, 2015 at 12:09 AM

    I have tried clearing the cache and tested with both Google Chrome and Safari on the iPhone 5S.  The iPhone is running iOS 8.3 (no updates available) and both apps are up to date as well.

    As I mentioned, it appears to work properly when adjusting the width on the computer.  It is strictly when the iPhone 5S is in portrait view that the width becomes an issue.

    I just attempted to update the site - I shrunk the container with the form to take up only 10 columns (out of 12 which would be width of the display) and it worked temporarily - the fields name, email, message, and submit appeared correctly.  After a few second the Recaptcha loaded and that caused the form to distort.  I know it was mentioned above by Boris that the Recaptcha has a minimum width of 304px, but the iPhone 5S had a screen width of 640px if I remember correctly, so I am not sure why that would be an issue.

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 30, 2015 at 02:47 AM

    Hi kevkulbacki. 

     

     

    It looks like the captcha is not being responsive. I tried removing the captcha on my cloned form and I don't see any problem. Have you tried to temporarily remove the captcha and see if the form is displayed properly? If we can confirm that the captcha is causing the problem on your end, we can escalate this issue to our development team.

     

    We will wait for your response.

     

    Regards. 

  • Profile Image

    Answered by kevkulbacki on June 30, 2015 at 10:14 AM

    Hello Chriistian,

    I cloned the form, with the captcha removed, and it now displays properly on the iPhone.

    In browsing the web for solutions, I came across this solution; however, I am guessing they built the form from scratch to be able to insert that <div>.  I also am unsure if that solution would work for the popup that comes up when the recaptcha decides to verify a user (with the 9 squares).

    Thanks as always for the assistance.

  • Profile Image
    JotForm Support

    Answered by BJoanna on June 30, 2015 at 11:38 AM

    May I suggest you to try with Drawing Captcha instead.

    I have tested it on my demo form and it is responsive.

    http://form.jotformpro.com/form/51804233877964? 

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

  • Profile Image

    Answered by kevkulbacki on June 30, 2015 at 12:58 PM

    BJoanna - I love it!  I hadn't known about that one and it works properly!  Thank you so much!!

  • Profile Image
    JotForm Support

    Answered by BJoanna on June 30, 2015 at 01:39 PM

    You're welcome. We are glad to hear that your issue is resolved.

    Feel free to contact us if you have any other question.