Hello team! I am running into an interesting issue with Gravity Forms and, after doing some troubleshooting, it seems it might be rooted in some conflict with the column responsive settings within Salient.
I have two forms on my page (a contact and a request for quote), both nested in a tabbed element. To get the formatting to look correct on both desktop and mobile, I needed to duplicate this element and hide one for desktop and the other for mobile.
On both desktop and mobile the contact form is working just fine and is showing as it should. The quote request form, however, will not show up in the mobile-visible element.
From my troubleshooting, it also seems like the conflict may also have some connection with Gravity Form's conditional logic, as forms with similar field types but no conditional logic seemed to show just fine.
Any thoughts on why this might be happening?
If it is helpful, I am using a Mac and iPhone for testing, so I am not sure if this is an iOS-only issue, or mobile in general.
Thanks for the detailed description. Could you setup a test page where we can view the issue and also provide us a screenshot of the columns not working so we can provide a CSS fix for it.
Would you like me to set up a temporary user account for you to be able to view the back end? Would that be helpful?
I have attached screenshots of the front and back end of the column in question as well as the column settings (the responsive settings are the only ones I have adjusted). Let me know what other screenshots you might need.
The Gravity Form plugin is automatically adding a display:none to the Mobile column form when the parent div is hidden. Were you able to get a response from the Plugin support regarding this ?.
It seemed to only be happening with forms with the conditional logic set, so I wanted to see if there was a conflict I could work through with Salient first. The other form seems to show just fine.
Can you explain what a "parent div" is? I would like to understand what is happening the best I can before I reach out to their support.
The Gravityforms plugin is setting a display none on the form if it is set to hidden using the Column Responsive Options.
See screenshot:
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Thank you, we have some progress! Now it will show, but not immediately. If I open the page it doesn't show, but if I click the "Questions" tab (that form seems to always work just fine weirdly enough) then back to "Request a Quote" it shows. Do you think that could be a caching issue or something else in the code that is catching in that initial load?
I just checked it again before adding this snippet and it seems to be working! I'm not sure what changed between the last message I sent and today, but thank you for all of your help! Hoping it will continue to work properly! *fingers crossed*
I actually realized I forgot I had changed the settings to no longer hide on mobile while we figured this out, so it wasn't working. But I added your snippet and it seems to be showing now! Thank you so much for your help!
Hello team! I am running into an interesting issue with Gravity Forms and, after doing some troubleshooting, it seems it might be rooted in some conflict with the column responsive settings within Salient.
I have two forms on my page (a contact and a request for quote), both nested in a tabbed element. To get the formatting to look correct on both desktop and mobile, I needed to duplicate this element and hide one for desktop and the other for mobile.
On both desktop and mobile the contact form is working just fine and is showing as it should. The quote request form, however, will not show up in the mobile-visible element.
From my troubleshooting, it also seems like the conflict may also have some connection with Gravity Form's conditional logic, as forms with similar field types but no conditional logic seemed to show just fine.
Any thoughts on why this might be happening?
If it is helpful, I am using a Mac and iPhone for testing, so I am not sure if this is an iOS-only issue, or mobile in general.
Thank you!
Melanie
Hey Again,
Thanks for the detailed description. Could you setup a test page where we can view the issue and also provide us a screenshot of the columns not working so we can provide a CSS fix for it.
Thanks.
ThemeNectar Support Team
Hi Tahir!
I have set up a test page: https://rockcanyonprint.ssmstaging.com/home-page-duplicate-test-page/
Would you like me to set up a temporary user account for you to be able to view the back end? Would that be helpful?
I have attached screenshots of the front and back end of the column in question as well as the column settings (the responsive settings are the only ones I have adjusted). Let me know what other screenshots you might need.
Attached files: IMG_5030.PNG
Screenshot 2023-07-11 at 12.53.03 PM.png
Screenshot 2023-07-11 at 12.56.19 PM.png
Hey Again,
The Gravity Form plugin is automatically adding a display:none to the Mobile column form when the parent div is hidden. Were you able to get a response from the Plugin support regarding this ?.
See screenshot:
Thanks
ThemeNectar Support Team
It seemed to only be happening with forms with the conditional logic set, so I wanted to see if there was a conflict I could work through with Salient first. The other form seems to show just fine.
Can you explain what a "parent div" is? I would like to understand what is happening the best I can before I reach out to their support.
Thank you for looking into that!
Hey Again,
The Gravityforms plugin is setting a display none on the form if it is set to hidden using the Column Responsive Options.
See screenshot:
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.wpb_column:not(.vc_hidden-sm):not(.vc_hidden-xs) .wpb_tab.visible-tab .gform_wrapper[style*="display:none"] { display: block !important; }Thanks
ThemeNectar Support Team
Thank you, we have some progress! Now it will show, but not immediately. If I open the page it doesn't show, but if I click the "Questions" tab (that form seems to always work just fine weirdly enough) then back to "Request a Quote" it shows. Do you think that could be a caching issue or something else in the code that is catching in that initial load?
Hey Again,
Please use this CSS instead and check.
.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; }Thanks
ThemeNectar Support Team
I just checked it again before adding this snippet and it seems to be working! I'm not sure what changed between the last message I sent and today, but thank you for all of your help! Hoping it will continue to work properly! *fingers crossed*
I actually realized I forgot I had changed the settings to no longer hide on mobile while we figured this out, so it wasn't working. But I added your snippet and it seems to be showing now! Thank you so much for your help!