Gravity Forms is one of the most powerful WordPress plugins available, and hands down the best forms plugin money can buy. Gravity Forms gets installed on every single website I build, and if I take over maintenance of a website, I usually encourage clients to switch to Gravity Forms. It’s so powerful, expandable and easy to use that I just can’t be bothered with anything else.
However, there has been one nagging issue that has made me crazy over the years. Thankfully I’ve found a dead simple solution.
If you use Gravity Forms to insert a newsletter sign-up link in your website’s footer or sidebar it’s probably going to require some custom CSS to make it fit your design. That’s super simple to do, just write some custom CSS, insert it into your website and you’re done.
But what if you need to add a second form on your website, like a contact form on the contact page? that form will use the same custom CSS you wrote for your footer and typically that’s not going to be a good thing.
After a ton of searching, research and experimentation I finally found a simple solution that allows you to target specific forms with custom CSS written for that specific form.
When you use Gravity Forms, each form you create has a specific ID number, which is viewable on the main Gravity Forms page (Forms > Forms in the WordPress admin sidebar). In the screenshot below my mailing list subscribe form has an ID of 1.
All you need to do is add #gform_wrapper_1 in front of any custom css and it will only target the Mailing List Subscribe Form. If you want to target the Contact Form instead, use #gform_wrapper_2. The # symbol is important – without it this technique won’t work.
It’s that simple! If you can write even rudimentary CSS you can easily target individual forms created using Gravity Forms with custom CSS.
