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 not displaying properly in Android devices

    Asked by JKulp42757 on May 14, 2015 at 01:50 PM

    The form looks fine to me on an iPhone. However on a Samsung Android

    phone it's being distorted.

     

    CSS I am using is between the ************************:

     

    ************************

    @media screen and (min-width: 580px){

        #id_7 {

            position : relative;

            top : -30px !important;

        }

     

        .form-line.form-line-column.form-col-1.form-line-column-clear {

            top : -240px;

        }

     

    }

     

    @media screen and (min-width: 200px) and (max-width: 570px){

        #input_6_donation {

            width : 80% !important;

        }

     

    }

     

    ************************

    Screenshot
    mobile form Mobile Android form-line max-width
  • Profile Image

    Answered by Sammy on May 14, 2015 at 02:15 PM

    Have you enabled responsive mod for the form under form preferences. Kindly do this then revert with the results.

    Also could you provide a link to the site so I can run some additional tests regarding this issue.

  • Profile Image

    Answered by JKulp42757 on May 14, 2015 at 03:09 PM

    Thanks for the reply.

     

    Yes, responsive form is enabled.

    The form is located here (and again it looks fine on desktop and iPhone...seems to be just Android with the problem):

    http://goo.gl/Bii6cu

     

     

  • Profile Image

    Answered by Ben on May 14, 2015 at 04:33 PM

    Looking at the screenshot above, I see that it is making them much smaller than what they can be considered as usable.

    Can you please try this code to see how it goes for you:

    @media screen and (max-width:320px) {
     input.form-textbox {
        max-width: 100% !important;
        min-width: 100% !important;
        width: 100%;
     }
    }

    - Now it should work without the !important, and I do not like to use it, but would recommend it at this time to make sure that it overrides all other code - if possible.

    You should add it at the bottom of all other code - which is shown how here: Inject Custom CSS Codes

  • Profile Image

    Answered by feusebio on May 14, 2015 at 04:38 PM

    Hello, I have a similar problem where my form is working on pc's and apple iPhone's but not on any android device.  I did not have this issue before.  The form can be found at the following link;

     

    http://form.jotformpro.com/form/51243797448970

  • Profile Image

    Answered by Ben on May 14, 2015 at 05:31 PM

    I have moved your issue @feusebio to a new thread.

    This way we can assist you with the issue without disturbing the workflow of the current thread nor your own.

    Your new thread can be found here: http://www.jotform.com/answers/570145 and we will be replying to it shortly.

  • Profile Image

    Answered by JKulp42757 on May 14, 2015 at 06:49 PM

    Thanks...I will try this out and see if it works. May be a couple hours because I don't have access to the Android device immediately.

    What's weird is that I did not originally have this problem. It has come up over the last few days sometime, when before I know it was displaying correctly.

    But....hopefully this code we will . . . we'll see!

  • Profile Image

    Answered by JKulp42757 on May 14, 2015 at 11:34 PM

    Okay, on my Android tablet (7inch) vertically it displays fine...but on my Android phone, it's still messed up (see attached image).

  • Profile Image

    Answered by JKulp42757 on May 14, 2015 at 11:39 PM

    Below is the full code listed in the "inject css"

    ______________________

     CSS code has been moved to this pastebin.

  • Profile Image
    JotForm Support

    Answered by Charlie on May 15, 2015 at 09:45 AM

    Hi,

    Upon checking your form, there are some problems on it. I see you are setting multiple responsive options in your form.

    If you are using the Mobile Responsive widget, please disable the options in the Preferences and the Designer tool that will make your form responsive, they might conflict one another.

    Disable this one:

    Also disable this one:

    Also, please add only "one" mobile responsive widget, I see you added two on your form.

    After that, in your website, make sure to add a view port in your head tag, to learn more about it, please check this page: Configure Viewport.

    Here's my cloned form with all the changes: http://form.jotformpro.com/form/51343615481957.

    Here's my test web page where the form is embedded: https://shots.jotform.com/charlie/test_embed_form_mobile_responsive.html.

    I embedded it using the iFrame embed code. Here's how my web page where the form is embedded looks like in my Android device:

     

    If my cloned form works good in your end, you can clone my form using this guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.

    Do let us know if that works.

    Thank you.

  • Profile Image

    Answered by JKulp42757 on May 15, 2015 at 09:03 PM

    I changed the length as shown...it was originally 7xx, and I changed it to 2592...but the form is still being cut off.

     Desktop is fine, it's just the mobile that gets cut off.

  • Profile Image
    JotForm Support

    Answered by Jan on May 15, 2015 at 10:17 PM

    Your form is not being cut off when I checked your webpage. I am using a Motorola razr android phone. I tried both Google Chrome browser and the built in browser on the phone. I was able to see the whole form, actually the height value is too big.

    Can you please try to not re-embed the form using SSL, try the regular iFrame embed form. Let's see if this will work. Thank you.

  • Profile Image

    Answered by JKulp42757 on May 16, 2015 at 11:25 PM

    Jan,


    Thanks for the reply.


    Here is something strange. I had another person check from their phone for me...they are on a droid razor m, and here's what they see. I'm perplexed, lol. I don't see how the view on phones with the same or close to the same screen size, running the same browser and operating system, could be so different. Could it perhaps be a server caching issue or some sort..with it holding on to older versions of the page?

    I'm trying the regular form embed instead of the SSL...once I hear back from those I've asked to check with their phones, I'll let you know. Thanks!

  • Profile Image

    Answered by raul on May 16, 2015 at 11:39 PM

    Can you please confirm if this is the URL: https://axismonitoring.com/payment/ where your form is shown?

    I've checked that URL using my phone, but I see a different form.

    I would like to confirm if I'm looking at the right place.

  • Profile Image

    Answered by JKulp42757 on May 16, 2015 at 11:49 PM

    Yes, that IS the correct URL. The form you posted is a lead capture that pops up. Just click the "x" in the top right to close that, and then you'll see the form. Thanks!

  • Profile Image

    Answered by raul on May 17, 2015 at 12:02 AM

    My apologies for not mentioning this earlier, I was a bit confused about why I couldn't see your form before, but I've checked your code and noticed that you're using the HTTP protocol to render your form, but your site is using HTTPS.

    Please try to use the secure iframe code of your form since this will ensure that your form is rendered correctly. Chrome blocks mixed content and this might be causing the issue with your form's appearance.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotform.us/form/51347045284151" frameborder="0" style="width:100%; height:790px; 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>

    Please let us know if this makes any difference.

  • Profile Image

    Answered by JKulp42757 on May 18, 2015 at 12:49 PM

    Raul: Thanks for the reply.

    Yes, I was originally using the https. A suggestion earlier in the thread was to try without the https, so I did (and that's what you saw)...So, I've tried both forms of the iframe code, and it did not make a difference. 

  • Profile Image
    JotForm Support

    Answered by Charlie on May 18, 2015 at 01:29 PM

    Hi,

    To confirm, you are still able to see the form being cut off in your mobile device? Or is it something reported by your users? 

    It's possible that the web browser or the OS of the mobile device is an older version that does not properly renders the page. Could you confirm us that this only happens to specific devices or is it happening to all of your test devices?

    I would also like to suggest that when using the SSL enabled form, you might need to update the link to your cover image/s. Update the protocol to "https://" for the link of your cover image.

     

    But, this might not resolve the problem. I would advise trying to changing the Wordpress theme to default and see if the problem persists. After that if it's not in the theme, you can try disabling extensions or plugins, it might be related. I see in my testing that there are a lot of mixed unsecure content that is also related to your Wordpress theme.

     

    Do let us know if the above steps helped resolve the problem.

    Thank you.

  • Profile Image

    Answered by JKulp42757 on May 18, 2015 at 03:23 PM

    "It's possible that the web browser or the OS of the mobile device is an older version that does not properly renders the page. Could you confirm us that this only happens to specific devices or is it happening to all of your test devices?"

     

    That is correct. It's only SOME devices, not all.

     

    Thanks for the suggestions. Much appreciated!

  • Profile Image

    Answered by Ben on May 18, 2015 at 03:48 PM

    I have moved your CSS code from earlier to a pastebin paste here: https://pastebin.com/yCeQkRrB please do the same if you wish to paste some long code since that would allow us to keep the thread lighter (not as long) so it is easy to go back to one of the responses (for both you and us).

    Also, do note that we can see and check the CSS code of your jotform :)

    Having done that, I also think that I know how we can solve your issue with the phone being cut off.

    Do try to add this CSS code - right above your jotform:

    <style type="text/javascript">
      @media screen and (max-width: 360px) {
        #JotFormIFrame {
          min-height: 1180px;
        }
      }
      @media screen and (max-width: 980px) {
        #JotFormIFrame {
          min-height: 850px;
        }
      }
      @media screen and (min-width: 1280px) {
        #JotFormIFrame {
          min-height: 910px;
        }
      }
    </style>

    - This should not go into your jotform, but into your website, right above the form itself.

    Do let us know how it goes and if the same issue is still present for you.

  • Profile Image

    Answered by JKulp42757 on May 20, 2015 at 11:49 PM

    Ben,


    Thanks for the reply!

    I must have missed the email notification I usually get when replies are made in the thread..so I just now see your reply. I am going to check some phones and I will let you know how it looks with this code added. It may be a day, because I have to get the people to check their phones....thanks!

     

  • Profile Image
    JotForm Support

    Answered by Charlie on May 21, 2015 at 12:55 AM

    I believe it's because of the @aol.com in your email. There are some issues regarding not receiving email notifications from those email domains, it's possible they're marking our emails as spam. You can try adding noreply@jotform.com in your unblock list or safe list of email addresses to avoid any problems. 

    Regarding the issue, please do update us if my colleague's solution worked.

  • Profile Image

    Answered by JKulp42757 on May 21, 2015 at 11:21 AM

    Update: Well, I was really hoping the above code (provided by Ben) would work...but it did not work...the form is still being cut off.

  • Profile Image

    Answered by raul on May 21, 2015 at 11:39 AM

    I've tested your site on my phone and the form is not cut off on my side.

    You may also try to increase the min-height value for this portion of the code provided by Ben.

    @media screen and (max-width: 360px) {
        #JotFormIFrame {
          min-height: 1180px;
        }

    If you set a higher value (for example 1280px) the height of the iframe should be increased and the form should be completely visible.

  • Profile Image

    Answered by JKulp42757 on May 21, 2015 at 01:20 PM

    Raul: Thanks for the reply.

    Yes, I tried editing the minimum height, but the form was still cut off...some people see it fine on their phones and others do not (both running Android)...I don't understand how that is happening. 

     

  • Profile Image

    Answered by raul on May 21, 2015 at 01:35 PM

    Can you ask your users that are not viewing the form completely if they are using Chrome or the native browser to check your site in their phones?

    I used Chrome to test it before and now I did it using the native browser and it also loads fine on my side.

    Also, it would be great if you could let us know which android version are they running on their phones to make further tests using the same version. My phone runs Android v4.4.2

  • Profile Image

    Answered by JKulp42757 on May 21, 2015 at 06:32 PM

    Ok, I'll do so and post back. Thanks!

  • Profile Image

    Answered by raul on May 21, 2015 at 06:57 PM

    You're welcome.
    We'll wait for your reply.

  • Profile Image

    Answered by JKulp42757 on May 22, 2015 at 08:40 PM

    Okay, one of the phones is a Samsung S5on Chrome Version: 42.0.2311.111

    Android Version: 4.4.4

     

    I'm still waiting on info on the other phone.

  • Profile Image
    JotForm Support

    Answered by Jan on May 23, 2015 at 02:10 AM

    Thank you for that information. We'll wait for the other phones.

  • Profile Image

    Answered by JKulp42757 on May 25, 2015 at 08:53 AM

    The other phone is: 

    Droid Razr M
    Android version: 4.4.2
    Chrome version: 42.0.2311.111

     

    And on this phone the form just isn't cut off, it's totally messed up.

     

    Same with the Samsung S5 that I posted earlier..the form is messed up (see image).

  • Profile Image
    JotForm Support

    Answered by Charlie on May 25, 2015 at 10:27 AM

    Hi,

    I'm checking the screenshot you have and it seems like it's the Firefox browser, is that correct? Is this the same with the Chrome browser? I see in this conversation that you were testing the website link in a chrome browser. I'm still unable to reproduce the problem, but I'm checking it now in Firefox and we'll let you know what it resulted to. 

    Could you also try clearing your browser's cache and your form's cache just to make sure that it's viewing the latest changes. 

     

  • Profile Image
    JotForm Support

    Answered by Charlie on May 25, 2015 at 10:40 AM

    I was able to reproduce the problem using Firefox. 

     

    The problem I believe is how the browsers are reading your website, and upon inspection of  your website, there are a lot of errors that may cause the browser to not properly display your website content. You can inspect your website by right clicking on it->Inspect Element.

    You'll see that there are errors in loading some images, stylesheets, and other resources in your website, causing errors.

     

    I would suggest fixing those so that the browsers could read your website properly, especially there are resources there that contributes to design of the overall website, also the browsers stops reading the back end code properly when they encounter errors like this. 

    Try fixing them first and we'll try to assess if the form can be responsive on all of the Android devices.

  • Profile Image

    Answered by JKulp42757 on May 26, 2015 at 06:24 PM

    ok, thanks for the reply

  • Profile Image

    Answered by JKulp42757 on May 29, 2015 at 09:10 PM

    Charlie: Okay, I believe the page errors are taken care of...no more "mixed content" errors. Thanks!

  • Profile Image
    JotForm Support

    Answered by BJoanna on May 30, 2015 at 04:40 AM

    I have tested your form on Samsung Galaxy S4 inside of Chrome and Firefox and it seems that your form is loading correctly now.

    If you still have problem with your form please inform us and we would be happy to assist. 

  • Profile Image

    Answered by JKulp42757 on June 02, 2015 at 06:15 PM

    Okay, unfortunately looks like I'm still having problems with some devices properly displaying the form.

    I know that AT LEAST, the phone that is Samsung S5on Chrome Version: 42.0.2311.111, Android Version: 4.4.4 has viewing errors in both Chrome and Firefox...(see attached).

  • Profile Image
    JotForm Support

    Answered by BDAVID on June 02, 2015 at 06:50 PM

    Did you try clearing browsers cache? Or checking for any updates? I just tried it in an emulator for Samsung S5 :

    And it is looking good. I could not test it in the exact same version since that options was not given in the emulator:

    If it still not responsive, please let us know, so we can escalate to our second level for further help.

  • Profile Image

    Answered by JKulp42757 on June 05, 2015 at 09:57 AM

    If it still not responsive, please let us know, so we can escalate to our second level for further help.

     

    - Yes, the browser cache has been cleared.

  • Profile Image
    JotForm Support

    Answered by Charlie on June 05, 2015 at 11:52 AM

    Hi,

    I made an in depth analysis of your website and tried simulating the problem. Here are the findings:

    1. You declared the <style> tag as "text/javascript", this is incorrect. Remove it or just leave it like this <style>

    2. Removed the <script> tag included in your JotForm iFrame embed code.

     

    Example, this is the iFrame embed code that you use.

    Before:

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

    <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>

     

    After:

    <iframe id="JotFormIFrame" allowtransparency="true" src="https://secure.jotform.us/form/51347045284151" frameborder="0" style="width:100%; height:1800px; border:none;" scrolling="no"></iframe><br />

     

    In short, we will remove the code wrapped in <script> tag. 

    See if those changes will resolve the problem. Also, leave the changes there, we will inspect it again if the problem persists.

    We'll wait for your response.

  • Profile Image

    Answered by JKulp42757 on June 09, 2015 at 12:24 PM

    Sorry for the late reply....I have made these changes and now I am having others check their phones. I'll report back with their findings. Thanks!!

  • Profile Image
    JotForm Support

    Answered by Charlie on June 09, 2015 at 12:42 PM

    Thank you for updating us. Please do let us know what your findings are.

  • Profile Image

    Answered by JKulp42757 on June 10, 2015 at 02:18 PM

    Okay...unfortunately...no change :-(

    This is a heck of a problem....

     

  • Profile Image
    JotForm Support

    Answered by Charlie on June 10, 2015 at 02:42 PM

    I'm sorry to hear that. I've tested the website link https://axismonitoring.com/payment/. But still unable to replicate the problem. 

    Mozilla Firefox on Android

    Chrome Browser on Android

     

    I was able to replicate the problem before I suggested the changes and it fixed it in my end. 

    Have you tried testing the website link on incognito mode? The browser might be loading a previous session from your website based from cache. 

    Can you send us some latest screenshots and we'll check if there's any change. Also, does this happen to ALL devices that you have tested?

    If it still happening even in incognito mode, I can forward this to our developers to have it checked.

    We'll wait for your response.

     

  • Profile Image

    Answered by thespanishfactory on June 13, 2015 at 11:04 AM

    This is a SSL issue, the same i have reported and that nobody is trying to solve.

    http://www.jotform.com/answers/587214-AGAIN-Unsecured-Form-SSL-Warning-when-Secured-Form-is-Submitted-on-MOBILE#0

    The URL that Jotform provided it is not 100% compatible with SSL on mobiles and you get a SSL warning and the forms does not work. 

    So if you are embedding code, the forms does not work.

  • Profile Image

    Answered by Ben on June 13, 2015 at 04:48 PM

    @thespanishfactory might be correct on this to be caused by the URL. Looking at the screenshots above, it seems that your lock has orange color which means that some resource was not loaded over a secure connection.

    Based on the screenshot, I would say that the issue is with some CSS (styles) file not being loaded properly - which would explain why it is shown as it is.

    Can you please try something else to see if it helps here - to embed the form to the page using the source code embedding method? - You can see how to get it here: How to get the Full Source Code of your Form

    Embedding it like that would mean that all of the forms source code is on your own website, so it should work and if so it might be a solution that would work for both you (@JKulp42757) and  @thespanishfactory.

    I would also like to apologize for the CSS code above in my earlier reply, I see that I added "text/javascript", while it should have been "text/css", although I see that it is already rectified on your website by just having <style>.

    Do let us know how it goes and hopefully that will help you resolve the issue :)

  • Profile Image

    Answered by JKulp42757 on June 15, 2015 at 03:53 PM

    Okay, here's where it stands.

    Ben: I have not tried your latest recommendation. Also, to note...the lock should be green now...it was previously orange, but after I made some changes it's green for me.

    Charlie: My users are now telling me that the form displays properly in incognito and also the regular browser for them...so they must have had an old version stored on their phone.

    There is just one small error I'm trying to fix, it's not with the form itself, but actually the image right above the form, that does not scale properly. Is it possible to scale this image so that the words in the image are not cut off on small screens?

     

     

  • Profile Image
    JotForm Support

    Answered by BJoanna on June 15, 2015 at 04:36 PM

    If I understood your original issue is resolved. I have tested your form one more time on my Samsung Galaxy S4 and your form is displayed properly.

    I have moved your other question to separate thread because it is not related to your original question and we will provide you an answer there shortly. 

    http://www.jotform.com/answers/589148