The Issue:

- Forms with conditional logic not showing up on mobile version of the website -

I am having an issue with Gravity Forms that seems to be rooted in the WP-bakery build into the Salient theme. See the page listed in this ticket as well as the attached screenshots. The section in question is at the very bottom. I have tried both adding the form within the tabbed area as well as below it on its own (you will see the text block indicating this). The form I am having issues with is the quote request form. 

This particular form seems to without issue on Desktop, yet it is not functioning correctly on mobile. The form either doesn't show up at all or, using some code that your team provided previously, it will show but then ignores all conditional logic. This isn't happening to all forms, as my "Questions" form is currently working on any device without issue. It seems that the problem only occurs with forms that carry conditional logic.

What I Have Tried:

I have tried multiple ways of troubleshooting the issue, including deactivating each plugin one-by-one, changing to a default Wordpress theme (tried both Twenty-One and Twenty-Four), and finally building a new page and adding the form with the block builder in the Twenty-Four theme and that finally worked. So it seems that it may be a conflict within something to do maybe specifically with WP-Bakery? I would love any insight or help you can provide on this matter as I am at a loss as to how to fix it.

Code provided by Salient team previously to override the form not showing on mobile: 

> > .wpb_column:not(.vc_hidden-sm):not(.vc_hidden-xs) .wpb_tab.visible-tab .gform_wrapper[style*="display:none"] {
> > display: block !important;
> > }
> > /*CSS to force the site to show the conditional logic forms that are being hidden when I set them to only show on mobile.From Salient Support team*/
> > .wpb_column:not(.vc_hidden-sm):not(.vc_hidden-xs) .wpb_tab.visible-tab .gform_wrapper[style*="display:none"] {
> > display: block !important;
> > }
> > .wpb_column:not(.vc_hidden-sm):not(.vc_hidden-xs) .wpb_tab:first-of-type:not(.visible-tab) .gform_wrapper[style*="display:none"] {
> > display: block !important;
> > }

Recent Gravity Forms/Salient Conflicts:

I also wanted to ask if there have been other complaints about Gravity Forms conflicts over the last year or so? Between working at agencies and as a freelancer I have used Gravity Forms and Salient together without any major issues for years and, until the last year or so, I have never had issues. Yet in the last year to year and a half I seem to be constantly running into all kinds of functionality and styling issues when trying to use these two together. It is becoming a bit of a problem. Do you know of anything that has changed on the Salient side that might be causing these issues with compatibility?

As a follow up to this, after all of my troubleshooting I also found that it actually may have something to do specifically with the tabbed element I am using. I realized I had created two different tabbed sections for desktop and mobile. I removed the restrictions for visibility and can now see both the desktop and mobile versions on both devices. However, the mobile section still is not showing the form with conditional logic.

I compared the two elements that seemed to be the same, but found that the one for mobile is using the "Material" style, while the desktop one (that seems to work fine with both desktop and mobile) is using the "Vertical Material" style. I changed the style because the "Vertical Style" looks terrible on mobile (see attached screenshot. The screenshot with my original ticket is the "Material" style which, as you can see, looks much better visually). But either that particular style, or some setting I can't seem to find, seems to be conflicting with the conditional logic show/hide functions.

Any suggestions with that added information?

This is a project I am picking back up after putting on hold for over a year, so I apologize that I missed this responsive information in my original ticket as I forgot it was there. I'm hoping this added information will help in figuring out the issue. 

And related to that, can I submit a feature request as well? If possible in future updates for the theme, it would be amazing if there was a more stark visual differentiation between disabled rows and rows with these responsive settings changed. Right now, any columns set to be hidden for the larger screens show with all content as grayed out. However, if there is only one row, it looks almost identical to how disabled rows are indicated as well. And having these look so similar can be very confusing at times. Unfortunately this isn't the first time I have made the mistake of assuming a section like this was a disabled row. That is 100% me either forgetting or working too quickly, but it would make it much easier to avoid this kind of mistake if there was a way to differentiate these more easily.

Thank in advance you for your help!

Melanie

I had actually already tried the form outside of the toggled element as well, and it still did not work (also, it might be nice if the Gravity Forms element not be available to add to the toggle element if it will not work - can that be submitted as a request for future releases of the theme?).

However I just found something interesting... It seems like any form that is added to the tabbed section specifically within the column that is set to be hidden on desktop, is also hidden everywhere else on the page (desktop and mobile, independent of whether or not the form is inside a tabbed section or not). I can see the tabbed section for that column on mobile, but nothing no forms.

I created a quick video to show you what I am seeing. 

For now I guess I'll have to create different pages for these forms as Gravity Forms does not support nested conditional logic. But it would be nice to know why there have been so many problems with this plugin and theme over the last year or so.

Thank you! I look forward to seeing what can be done!

Also, if there is ever the option to provide the ability to add forms into toggle sections, that would be amazing for situations like this! Thank you again for your help!

Melanie