Making forms in WordPress mobile-responsive

Product Feedback
1

Hi,

One of the clients I work with embeds Funraise forms on their WordPress site using the official plugin. They mentioned that on mobile, the form did not fill the vertical height of its containing element (the form iframe was only around 100px tall, compared with roughly 800px for the containing div).

I was able to make the forms fill all the available by setting the div containing the form’s iframe to display: flex, which should be safe, given that the iframe should, as far as I know, be the only child element of that div.

I was wondering if you might consider making that part of the default styling for the shortcode-generated HTML. I suspect other people may have experienced similar problems.

2

Hello @ericdjonas :wave:

Thanks for sharing this detail. Our team is aware and working on a fix for this form sizing issue. Can you share a link to the site where you experienced this? I’ll be sure to share with our engineers to ensure that our fix also solves your case. Thanks!

3

Hi, @tony . Thank you for responding.

The page where this was an issue is here:

I have since added a CSS declaration to set the Funraise iframe’s parent div to solve the mobile display issue, namely:

[class^=“fr-placed-form-container”] {
display: flex;
}

So this page demonstrates the proposed solution. If you know of any reason this solution wouldn’t be safe, please let me know.

4

Thanks, @ericdjonas! I’ll share this with our technical team.