3.2.3 Update Breaks Gravity Forms Styling

Support
#1

I have seen at least one other, older, post on this, but I have no resolution. I’ve been running Pro theme 3.1.2 but if I try to update to anything above that (currently 3.2.3) and the styling breaks. I’m using the Classic Gravity Forms element and putting some custom styling elements in Global CSS. More accurately, I’m using the Classic Gravity Forms Element in a global block and inserting that block on my pages. If I go to the global block editor and view the form in there, it looks great. The styling is applied just fine. But when I go to any page that has the global in it, it’s broken. Here’s the before, where the styling is working:

Screen Shot 2020-06-04 at 9.19.37 AM
Screen Shot 2020-06-04 at 9.19.37 AM1254×260 15.7 KB

And here’s after the update where the styling is broken:

Screen Shot 2020-06-04 at 9.22.07 AM
Screen Shot 2020-06-04 at 9.22.07 AM1124×315 25.3 KB

#2

Hello Steven,

Thanks for writing in! I can see that you are using CDN. This is why you experience a broken site after any updates. Please check out this documentation guide to resolve your issue:

We would love to know if this has worked for you. Thank you.

#3

Unfortunately, it doesn’t seem to have worked. I’m working on our staging site that doesn’t have CDN enabled so that takes care of that. I don’t have any caching plugins installed, so that removes that as an issue and I tried manually clearing the cache as directed but that didn’t fix it either. So that addresses all 3 things mentioned on that page. Not sure what to try from here. I’ve tried disabling all the plugins, but that didn’t fix it either. I’m really at a loss.

#4

Hi Steven,

It could be you have a custom CSS syntax error. Please check all your custom CSS, you can use this tool here and address if it’s found an error.

When I say all your custom CSS, I meant the Theme Options > CSS, Page > CSS, Header > CSS, Footer > CSS, and all the elements that has an ELEMENT CSS on it. You could have an error CSS somewhere on these CSS areas.

Cheers!

#5

I checked my CSS, made the suggested fixes, but it still doesn’t work. Check out the site here to see for yourself:

#6

It might be worth noting that I have my form in a global block. When I got to edit the global block, the Gravity Forms CSS (which lives in the Global CSS section) is applied perfectly and the form looks just fine. When the block appears on my home page, the CSS is not working correctly. I’ve tried not using a global block and just adding the form via the Classic Gravity Forms element but I have the same issue.

#7

Doing more testing and I’m more confused than ever. I found that the CSS styled just fine on one of my pages. So then I assumed that something must be conflicting on my home page. So I made a duplicate of my home page and deleted every element one at a time until the only thing that was left is the form global block and the header and footer and the form STILL did not style properly. Posting links in a secure message.

#8

Hi Steven,

That is why I asked to check all the custom CSS area including Header > CSS , Footer > CSS, and all the elements that have an ELEMENT CSS on it, because all of those will be combined on the front-end, regardless where the syntax error is every CSS area will be affected on the frontend.

Please provide us login credentials in a secure note so we can take a closer look.

Cheers!

#9

Okay, I’ve made some headway here, but still need your help for sure. I’ve found that if I have a Gravity Form in a Global block, with my CSS style for the form in that Global Block (though the CSS could be in the site settings as well, it wouldn’t make a difference) the form isn’t styled correctly. If I add another Gravity Form to that page, all of a sudden, the first form is styled correctly. That second form can even be hidden, it just needs to be on the page. And it can’t be another Global Block like the first form, it must be an actual Classic Gravity Forms element. Sending you credentials now.

#10

Hello Steven,

Since you have inserted the form inside the global block, you will need to enable the global CSS of Gravity Form in Forms > Settings > General Settings > Output CSS.

Qfl0GmzJQVKKSZ42nhcsHg (1)
Qfl0GmzJQVKKSZ42nhcsHg (1)790×390 41.9 KB

After saving your settings, you still need to go to WP Engine > General Settings and purge your caches.

Best Regards.

#11

You want me to ENABLE output? I’m guessing you didn’t use the login credentials I gave you because if you had, you would have seen that it was already enabled. I tried disabling just in case that’s what you meant, but it made no difference. I’m really starting to get frustrated here. If feel as if you all are just throwing out ideas but nobody is even looking at my site to try and see what’s really going on.

#12

For what it’s worth, I just fixed the problem by enabling No Conflict Mode in Gravity Forms settings.

#13

Hey Steven,

We’re sorry you had issues, we’re glad you sorted it out and thank you for sharing the solution with us. This would help others as well.

Cheers!

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.