Contact form on mobile device

Support
#1

My contact form is not being displayed correctly on mobile devices. I have attached a screenshot that shows how it appears on mobile devices. As you can see, you can’t even read the instructions. This happen for the form on my Contact page as well as my Referral Program page.

How can I get the entire form to display on a mobile device? Your help is appreciated.

#2

Hello @eutaw,

Thanks for asking. :slight_smile:

Please add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
 .wpforms-form {
    width: 95% !important;
    padding: 10px;
    margin: 10px;
}
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

Thanks. This worked for the referral form but not the contact form.

#4

Hi again,

Please add the following code as well:

.wpforms-form {
    width: 100% !important;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#5

That didn’t work. The entire contact form is still not showing on a mobile device. Also, it changed the width of the forms on my laptop. Everything works well as is, except the contact form on a mobile device.

#6

Hello @eutaw,

Thanks for updating the thread.

There is no need to add extra code as the code I shared will work for the contact and referral form both. I tested on my end it’s working fine. Probably you need to clear cache and then try loading the page again.

Let us know how it goes.

Thanks.

#7

I’ve cleared my cache for Google and Chrome on my mobile device, but still have the problem with the contact form. I also had two other people test it on their phone and they have the problem also.

#8

Hi @eutaw,

I have checked both contact form on actual Android devices, and sorry but we can’t replicate this on our end, please let us know what device you have and the two other people so we can try to replicate it and see what is causing it.

Thanks,

#9

Thank you. It appears that it takes my cache forever to clear. The form looks nice now. However, when I turn the phone in a landscape style, the entire form is not shown. Will you point me in the right direction for fixing this? Thanks.

#10

Hi,

I cheked on my phone and it is not disappearing though the form is overflowing.

You can try adding this in Theme Options > CSS


@media(max-width:800px) {
.wpforms-form {
   width:100% !important;
}
}

Then clear your mobile browser cache and check again.

https://help.yahoo.com/kb/SLN14733.html

Thanks

#11

Thank you.

#12

You’re welcome! :slight_smile:

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.