Displaying Google Form on Mobile

Hello. I’ve got a Google form in a Modal element which works fine on desktop and tablet, but is not seen fully when on mobile. I’ve tried everything, but can’t get it be centered and small enough that you see the whole form. Thank you for your help.

Hello Kenny,

Thanks for writing in! The given password is incorrect. In the meantime, please make sure to set a 100% for the maximum width and minimum width of your modal on smaller screens.

If you are not familiar with the Responsive Styling for the elements, please check this out:

Best Regards.

Ruenel, thanks for your quick response. I made the width changes you mentioned, but it’s still quite off. Thank you for checking it out further. (I have fixed the URL for the site in the secure note so the password should now work0.

Hello Kenny,

I have checked your Modal element settings and it is all good. You have inserted an iframe with a fixed width. A minimum width of 100% should be set for the iframe to fit in the modal.

Kindly check your page now.

Thank you. It is indeed centered now. However, when testing on a actual iPhone, it does not scroll down the form properly. I appreciate your continued help with this.

Hello Kenny,

In your Modal element settings, the “Body Scroll” option needs to be set to disabled.

Best Regards.

Thank you. That worked. Except now on phone and tablet, the page lockes up after opening and closing the modal. On desktop, it’s fine.

Hey Kenny,

The reason why when you close the modal it doesn’t scroll down because of the body scroll is set to disabled. You need to set it to allow again. Regarding the modal, it was scrollable with allow body scroll option, I tried it on my actual mobile device.

Hope that helps.

Okay, now I’m thoroughly confused. ruenel said Body Scroll needed to be disabled in order for the Google form to scroll on a mobile device. But you’re saying it should be enabled.

When it’s enabled, the form does not scroll properly on mobile. When it’s disabled, the form scrolls properly, but the page is not able to scroll when the modal is closed. I’ve tried this on two iPhones and two iPads, each with different screen sizes, and all of them fail to scroll after the modal is closed. But oddly, it’s okay on desktop.

So, what exactly is the proper setting to have it work on desktop and mobile? Thank you.

Hello Kenny,

Can you please update to the latest version of the theme? The latest versions are the following:

  • X Theme 10.3.9
  • Cornerstone 7.3.9
  • WordPress 6.3.1
  • PHP 8.1

You can check out the changelog here:

Important: Before updating, please back up your database and files. For help with updates, visit the Updating WordPress documentation page.

Best Regards.

Okay, everything has been updated to the versions you specified. The background page no longer locks up after closing the modal.

However, when the modal is open, in order to scroll the enclosed Google form, you have to mouse over the body area instead of over the modal area. When you mouse over the modal, the background page scrolls and when you mouse over the background page, the modal scrolls. It’s reversed. And this seems to occur whether I have Body Scroll set to allow or to disable.

What can we now do to get the modal to work properly on all devices?

Thank you.

Hello Kenny,

Now that you have updated to the latest version, can you disable the Body Scroll in your Modal? be advised that the Google Form has its style and events trigger. We do not have any control over it. There may be factors that has a conflict between the theme and the form.

Best Regards.

Okay, I have disabled the Body Scroll in the modal. However, on both desktop and mobile, the actions are still reversed. That is, when you scroll the background page body, the Google form in the modal scrolls. And when you scroll the form, the backing page actually scrolls.

I understand there could be issues with the settings in the Google form, but given how popular their forms are, I would hope this theme could work well with them. Is this a bug? Can you please look further into this to see how we might get it to work properly? Thanks, @ruenel

Hello? I’m waiting for a response to my last message. Thank you.

Hello Kenny,

I will forward this thread to our developers so that they can take a closer look at the issue.

Please bear with us. Thanks.

Let’s see if we have this issue when X 10.4 is released. Disable body scroll doesn’t work well in Mobile in this build and I think you need that to work well given the interactive nature of the form. Let us know if it persists after that release and have a great day!

Well, please make sure the developers know about this bug. It’s caused a real issue for me with my client. Not good. Do you know when 10.4 will be released? Thanks.

Hey @KennyReff,

We don’t have a timeline yet. Please stay tuned.

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