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

    Are forms automatically mobile ready?

    Asked by peakdotie on February 12, 2014 at 02:41 PM

    Hi, I have read numerous forum posts but still don't really have an answer.

     

    Do I need to do anything to make my forms view correctly on mobile or is it all pre-arranged?

     

    Thanks.

    Mobile My Forms thanks forum posts
  • Profile Image
    JotForm Support

    Answered by Welvin on February 12, 2014 at 03:14 PM

    Hi,

    Our forms would work well with mobile devices, but we recommend the default form formatting. Using a form from our Form Template Gallery, specially a form with various formatting such as a custom background image is sometimes the cause of an issue with a form not viewing correctly on mobile devices. Some of our Pre-Made Templates would only work best with using a computer.

     

    Do I need to do anything to make my forms view correctly on mobile

    -If some formatting doesn't look well, we can add a custom mobile CSS codes to the form that would adjust its view on mobile devices.

    Thanks

  • Profile Image

    Answered by peakdotie on February 12, 2014 at 03:42 PM

    Hi,

     

    I'm not really sure what you mean by "Default form formatting".

     

    I have created a form here http://form.jotformeu.com/form/40422399491357 and as far as I am aware the formatting is default. The form however does not appear to respond in anyway to a smaller screen or a resized browser window.

     

    Any help?

  • Profile Image
    JotForm Support

    Answered by Welvin on February 12, 2014 at 04:16 PM

    Hi,

    When I say "default", I mean the field alignments, the options alignments, the current template, the sizes of the font. I can say your current formatting is good. The only issue I found in your form when viewing in mobile devices is the images that serves as your section numbers. They are not shrinking, they creates a big space in your form.

    We can help you with custom CSS codes to adjust the image sizes. However, I would suggest finishing first your form.

    Thanks

  • Profile Image

    Answered by peakdotie on February 12, 2014 at 04:39 PM

    Hi Welvin,

    Actually I have just discovered something. I have the form embeded on a page on a Squarespace site. It can be seen here http://www.peak.ie/get-started/

    When viewed on mobile the form does not respond at all.

    When the direct URL at http://form.jotformeu.com/form/40422399491357 is viewed on mobile it responds as expected.

    So.....What to do? Any suggestions?

  • Profile Image

    Answered by peakdotie on February 12, 2014 at 04:50 PM

    I should add that at the above URL I have used the embed code...

    and at this URL http://www.peak.ie/the-peak-process/ I have used the iFrame code.

     

    Both fail with respect to responsiveness.

     

    Any help would be greatly appreciated.

  • Profile Image
    JotForm Support

    Answered by Welvin on February 12, 2014 at 04:51 PM

    Hi,

    Kindly try to re-embed your form using our iFrame Method: Getting the Form iFrame Code. Check if this resolves the issue. If not, do this:

    1. In the iFrame Codes, change the width of the form from 100% to the form actual width in pixel value. Your form is 660px wide. 

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on February 12, 2014 at 04:53 PM

    Oops! Thanks for the update. Can you do the changes to the form width value? Also, after doing this changes and if it still not fixing the issue, try to remove the script tags from the iFrame Codes:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/40422399491357" frameborder="0" style="width:100%; height:3329px; 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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Remove the codes highlighted with Yellow.

    Thanks 

  • Profile Image

    Answered by peakdotie on February 12, 2014 at 05:29 PM

    Hi Welvin,

     

    Thanks for all the effort but still no luck.

    I have edited both pages as you instructed. Both pages work fine at full size but no changes on mobile.

    Not sure what to ask now!

  • Profile Image
    JotForm Support

    Answered by Mike_T on February 12, 2014 at 06:30 PM

    Please inject the following CSS to your form in order to fix your section images on the mobile version.

    @media only screen and (max-device-width: 550px) {
    .form-image {
    max-width: 320px;
    height: auto;
    }
    }

    Then, use 100% width on your iFrame.

    Thank you.

  • Profile Image

    Answered by peakdotie on February 13, 2014 at 01:13 AM

    So here is where I'm at...

    I have this on my page ;

    <iframe id="JotFormIFrame"  allowtransparency="true" src="//form.jotformeu.com/form/40422399491357" frameborder="0" style="width:100%; height:3329px; border:none;" scrolling="no"></iframe>

    and I have this CSS from Mike-T to handle the images

    @media only screen and (max-device-width: 550px) {
    .form-image {
    max-width: 320px;
    height: auto;
    }
    }

     

    The URL at http://form.jotformeu.com/form/40422399491357 works perfectly but only when viewed on an actual mobile device. iPhone 4 in this case. The page does not respond when I resize the browser window.

    On the site at http://www.peak.ie/get-started/ no responsiveness is seen EXCEPT for Mike-T's CSS for the images.

     

    Would greatly appreciate any additional help.

    QUESTION : Do the forms only respond when viewed on actual mobile devices? or should they also respond to a resized browser on Desktop?

     

    Thanks Everyone.

  • Profile Image

    Answered by peakdotie on February 13, 2014 at 01:33 AM

    Quick Add-On;

     

    Just to be 100% clear. The page at http://form.jotformeu.com/form/40422399491357 does NOT respond to the browser window being resized. It does however view perfectly on an actual mobile device.

    Is this relevant to the problem I have?

     

    Thanks.

  • Profile Image
    JotForm Support

    Answered by Welvin on February 13, 2014 at 03:54 AM

    Hi,

    Both shrink computer browser and mobile screen should work the same as far as what I have observed but I would suggest checking the page using the actual device.

    Can you check again the embedded form? I have added a custom CSS codes.

    Thanks

  • Profile Image

    Answered by peakdotie on February 13, 2014 at 04:32 AM

    Hi Welvin,

    You are a great man!

    That's working great now so thank you very much.

    I see you added some code to affect the font sizes. Is there any way for me to retain control over each of the sizes I was using? You may notice that I didn't use the actual headings tool. Maybe I should have?

    If you have some extra time to devote to this I would be greatly appreciative.

    Thanks.