Form not displaying properly in Android devices

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;

    }

}

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

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.

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

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

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.

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!

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

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

______________________

 CSS code has been moved to this pastebin.

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.

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.

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.

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!

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.

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!

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" onDISABLEDload="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.

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. 

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.

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

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.

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!

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.

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.

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.

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. 

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

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

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

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

Android Version: 4.4.4

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

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

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

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. 

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.

ok, thanks for the reply

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

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. 

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 a Samsung S5: on Chrome Version: 42.0.2311.111, Android Version: 4.4.4 has viewing errors in both Chrome and Firefox...(see attached).

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.

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.

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" onDISABLEDload="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.

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

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

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

This is a heck of a problem....

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.

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.

@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 :)

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.

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