Inactive field when arranged in two or more columns

Hi Jorge,

It’s possible that you have a style conflict occurring.

The first thing I’d recommend checking is that you have our form styling in place. To do this, go to WPForms > Settings and check that Include Form Styling is set to Base and Form Theme Styling (shown in this screenshot).

If this setting was already in place, or if switching to that doesn’t fix the issue, I’d need to see the form embedded on the page to help with a solution. If you’re willing to provide a URL for that, could you please let me know?

Thanks! ??

Hi Jess,

Yes, you’re right: when changing settings to Base and Form Theme Styling, the form works properly.

However, I need to maintain style just to Base style only. GeneratePress template settings controls some of the look & feel of the website, including Submit button color.

Then, I must change CSS for the WP Forms in order to apply Base and Form Theme Styling.

Thank you very much for your assistance.

Jorge

Hi Jorge,

Sure, that’s understandable. If the main goal is to have consistent styles for the submit button, you might consider styling the button specifically (allowing you to keep “Base and Form Theme Styling” in place). If you’re willing to consider this approach, here’s our tutorial with details on styling the submit button.

Otherwise, if you could share the URL where your form is embedded I may be able to put together a CSS snippet to help resolve the issue you’re seeing. If you’d like to go this direction, please be sure to let me know exactly which field(s) aren’t working so I can test on my end.

Thanks! Please let me know ??

I had this same issue, using Beaver Builder with the Astra theme. In my form, when a single column came after several rows with multiple columns, the div for the single column would cover them up, making them unresponsive to clicks.

Turning “Base and Form Theme Styling” back on as suggested and adding new CSS to style the submit button worked as a fix for me, because thankfully the rest of the default styles were acceptable.

Thanks for the fix. I do have a question though: If Form Theme Styling is required for forms with a mix of column sixes, what’s the point of having a “Base Styling Only” option? I like WPForms and will likely use it for other client website in the future, but may need the option use base styling only.

Cheers, Sarah

Hi Sarah,

Great question. Base styling is intended for developers who want to apply extensive customizations to their forms.

Our form theme styles are fairly aggressive, meaning that they require a good bit of effort to override. It’s set up this way because most WordPress themes unfortunately do a pretty poor job of styling forms, and we want to do our best to ensure that our forms look great for everyone.

Our base styling, however, applies only a basic level of styles — and so it’s a much easier starting point for a more custom design. This is generally the best middle ground for developers — it saves them the time of making the form look decent (unstyled web forms are super rough), but also lets them more easily add on their own customizations.

This all being said, I definitely agree that it would make more sense if the base styling option was still compatible with multi-column forms. Our team is working on improvements that will support this, though we don’t have an ETA on when that will be ready just yet.

In the meantime, a little custom CSS can be used to fix the multi-column issue when base styling is used. As I mentioned to Jorge, I’d just need to see the URL where the form is embedded to create the CSS snippet you’d need.

I hope this helps! ??