Forminator not responsive on mobile

Hello @ann20

Hope you’re doing well today!

Thank you for the information about the issue and installed theme and plugins. I was able to install the Neve theme with Otter Page Builder and Optimole on my testing site, however, I was unable to replicate the issue.

To test specifically with Otter, I added the form to the Otter Accordion block and it was rendered correctly when in responsive mode, please refer to the screenshot here: https://monosnap.com/file/58NevskJJFESG8HjmSgNxOgd6QI6qY

Additionally, I also tested the form on a normal paragraph block and it didn’t show any issues with responsiveness too, please refer to the screenshot here: https://monosnap.com/file/nepiBG2LPWnII88EuIbIqhhIozIXIq

Could you please let me know if in case I am missing anything? Also, can you please let me know if the content on the page apart from the form is also not responsive? Since your site is not yet published and not available publicly, it will be a bit difficult to ascertain the cause.

However, you can perform a small test on your end by deactivating the Otter page builder plugin. Further, create a test page and add the form via the default WordPress “Paragraph” block and check if the form is showing fine in responsive mode.

If the issue persists, in this case, would it be possible for you to share the export of your form so that we can import it on our testing site and see if the issue is?replicated??

Here is how you can export the forminator form: https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#import-export

Please feel free to remove sensitive information if any.?

You can use services like Google Drive or pastebin.com to share the form export with us.

Please let us know how it goes.?

Kind Regards,
Saurabh

Thanks for your reply. It looks like somethin is better, lets call it: magically start to work better after yor reply ;)) and thats great because the form is more reponsive. Visible well on the part of mobile now. Thanks for that! (Yes, my text in the form was longer and now it brakes in two line where necessary).
Yet, has still the same problem with the screenes narrower than around 420px (ex. iPhone SE, iPhone12Pro, samsung S8+, Galaxy ZFold5). I think it should be till 300px.

And the same problem on all mobiles when text in “multiple answer” is long and brake in two lines, form is not responsive on mobile, and it has a problem with changing just choosen answer for another in that field also on desktop (when text in multiple answers is in one line I don’t identify that issue)

PS Blocks without the form are responsive well.

Hello @wpmudev-support7

I’m waiting for your reply.
Meantime, here is the form if its still necessary: https://pastebin.com/vSN31Wyv
I’ve changed some text for share public, but its length is similar.

Can anyone help me? Or it’s time to use different plugin?

Again my form available for longer time: https://pastebin.com/mSx8FwCk

Hi @ann20,

Yet, has still the same problem with the screenes narrower than around 420px (ex. iPhone SE, iPhone12Pro, samsung S8+, Galaxy ZFold5). I think it should be till 300px.

I gave a quick test with the given form but I’m not able to replicate issues with less screen size. Possible to test how it behaves if you create a new page with only the form? This should help in ruling out if any section in the page isn’t causing the issue or not.

And?the same problem on all mobiles when text in “multiple answer” is long and brake in two lines,

Are you referring to the Select Field? I’m not sure whether I fully get the issue regarding the above, since its expected for the lines to break inside the Select Fields if there are long texts inside options.

Possible to check whether you could setup a test site where you could share the page URL regarding the issues noticed so that we could have a better idea?

Looking forward to your response.

Kind Regards,

Nithin

“Are you referring to the Select Field? I’m not sure whether I fully get the issue regarding the above, since its expected for the lines to break inside the Select Fields if there are long texts inside options.”

Yes. When the text in multiple answes fields is in each of them shorter the form is responsive with the screens minimum 420px.

If the text in multiple answes fields is loger (like in my shared form) the form is responsive with the screens around minimum 600px only.

The text in the lines brakes properly. But the whole form is not visible in the block properly – it is visible only its central part – does not fit in the block – means is not responsive ??

I’ve tried in new page. Tbe problem is the same.

Besides that in the block section with 2 columns is even worst – visible only on the desktop.

Hi, I think I found the reason of the problem.

Structure that I got:

section (otter block) -> section column (otter blocks): header (WP block/guttenberg), advanced heading (otter block), forminator form.

When I’ve tried publish directly forminator form without putting it inside any block or in column (WP block/guttenberg) is responsive well also on mobile.

The answer is – forminator is not cooperating with plugin Otter block. Can you solve that or I can’t use it on that page?

Please let me know asap, I need to finish that page asap and the form is very important part of it.

Hello @ann20,

Thank you for explaining the details.

Could you please test the following workaround, for overriding conflicting block styles.

1. Add CSS class to the parent column, for instance “forminator-width-fix” in Style >> Advanced section:
https://prnt.sc/HjBeu7Zru39R

2. Add the following rules in Appearance >> Customize >> Additional CSS:

.forminator-width-fix .alignfull {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

https://prnt.sc/vg4PCSZBAaKf

– change forminator-width-fix here to the actual class name, which you have assigned to the column.

Hope this helps. Please let us know if there’s still any issue.

Best Regards,
Dmytro

Hello @ann20,

I hope the suggested workaround helped. We haven’t heard from you for a while, so I’ll be marking this thread as resolved.

Please feel free to reply if you still have any questions!

Best Regards,
Dmytro