Forms on Wordpress.com + Android does not work properly

On wordpress.com, when an Android phone is used, there's some odd behaviour whereby it's quite difficult to scroll. This issue doesn't present itself with iPhone. 

If you use any time of emulator or an Android phone, you will be able to see what I am describing.

Could you please advise how I can rectify.

Could you please share the URL of your website so we can investigate this issue further?

We'll wait for your response.

Thank you!

Hi Nik,

If you could please provide your email address, I can add it to the website. It's a closed wordpress website, hence it's not that easy to just give you the link.

Thanks.

You could add support@jotform.com to allow us access to the website, you could also re-embed your form using the iFrame code since it may be due to a conflict between the code in the website an the code in the form, here's the guide that will help you to get the iFrame code: Getting-the-form-iFrame-code

We will wait for your response.  

Thanks. I've now added you. As it's a wordpress.com site, I can't use the iFrame code.

Thank you, the email with the invitation was received and I was able to view your website now. 

I can see you have embedded multiple forms in your website, I have checked them and I cannot replicate the problem you're mentioning at the moment.

For example, when loading this webpage https://teamevoke.co/report-new-alloy-damage/ I can scroll fine on an Android emulator and the same when I'm using a real Android device.

Here's a screen-cast about what I can see so far: 

Is this problem happening only with one specific form? 

Could you please provide us or indicate us where can we find the form? 

I can also see the way the form has been embedded is using already the iFrame code and it has a fixed height, when the webpage is viewed in a mobile device a scroll bar appears and the form can be viewed. 

Please do let us know this info and we will be glad to take another look to your form. 

It's happening with all the forms. Here you can see me taking a photo of the screen. Unfortunately, both scroll bars can't be seen, but hopefully this gives you an indication of what's happening.

Did you remove support@jotform.com? I tried accessing through the invitation you sent us, but this error showed up:

I can confirm access still exists and hasn't been changed.

Hello,

I would like to test your forms in your website. However, I could not manage to access your website with JotForm Wordpress account and also my own WordPress account now as you can see in the following screenshots:

You should give us an approval in order to help you.

Anyway, I have checked some of your forms on my mobile phone such as "Driver Assessment Indemnity" and I did not have any issue to view the forms on my Android Mobile phone.

Also, I have checked your form configurations. I have seen that you did not make your form mobile responsive as the following screenshot:

You can add a Mobile Responsive Widget into your forms in order to make them work in mobile phones.

Moreover, you can inject the following CSS codes into your form to make them scroll on the mobile devices:

@media only screen and (max-device-width: 500px){ /*mobile*/

.form-all{

overflow: scroll;

}

}

@media only screen and (max-device-width: 768px){ /*tablet*/

.form-all{

overflow: scroll;

}

}

Please try and if you need more assistance, let us know.

Thank you.

I have confirmed with the person that had the issue that it is still present. Their device details are:

Model: Huawei Nexus 6p
OS: Android 7
Browser: Chrome (latest) v 54.0.2840.85
Resolution: 2560 x 1440

I made several tests and this issue is related to android devices in general. Scrollbar will fade away after several seconds. This will happen on stand alone form as well. 

I have tested your embedded form and I was able to scroll without any issues. 

Is your user unable to scroll or the issue is just that scrollbar fade away?

They can scroll however, it's a very clunky experience when compared to iPhone.

You can also try first re-embedding the form using the iframe embed code.

User guide:  https://www.jotform.com/help/148-Getting-the-form-iFrame-code

When I checked, I see it was using the WP oembed code. It is possible it was having issue with the current embed code. Please try testing it using another embed method i.e. iframe embed.

Please let us know if this did not make any difference.

Thanks.

embedding iFrame code on a wordpress.com page didn't seem to work. All that showed was the iFrame code (no form displayed).

As I mentioned on my previous post this issue is related to android devices in general. I think that there is nothing on our end that we can to to resolve your issue with fade away of scrollbar. Scrollbar will fade away on standalone form as well. I have tried to resolve this issue with CSS, but I was not able to find any CSS code that will work. 

This can maybe only be resolved with javascript, but then you will need to embed your form with full source code. Maybe some of this articles can help you to resolve your issue:

http://stackoverflow.com/questions/22907777/make-scrollbar-visible-in-mobile-browsers 

http://stackoverflow.com/questions/25684620/always-show-scrollbars-in-iphone-android