Customizing Forms with CSS

The styles are going to be located in your theme/child theme's styles.css file in your theme folder, or within the plug-in directory itself. However, you won't want to edit the code in the plug-ins directory, because this will typically be overwritten in the event of an update to the plugin. Same goes w/ themes. That is why it's best practice to use a child theme. However, I too am having difficulty finding out how to overwrite the styles that are located in the plugin directory because I want to keep my edits independent of the pre-fab styles that come w/ the plug-in.

I'd suggest downloading firebug for FireFox if you use that browser. It will show you all those directories by highlighting code. There are other tools, as well, but this is what I use.

What is the best practice way to store css overwrites of built-in gravity forms styles? For instance, I want to edit:

.gform_wrapper input[type="text"], .gform_wrapper input[type="url"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"], .gform_wrapper input[type="number"], .gform_wrapper input[type="password"] {
font-family: inherit;
font-size: 11px;
letter-spacing: normal;
outline-style: none;
padding: 2px 0;
}

in the forms.css file, but I'm not sure where to put this. Normally, I would put the new/revised style in my styles.css file in my child theme so there are no complications w/ future updates. Please advise.

:( Okay, it looks like my idea of dropping the ".gform_wrapper" from the list of classes isn't working. The styles are still being overwritten by gravity form's built in styles.

So back to square one—how do users override form styling built in to the gravity forms plug-in w/o directly editing the plug in styles that are in gf's plugin directory?

Can you post a link to your form?

Oh, and as far as David's suggestion, do I need to declare "!important" following every style value, or can I just do it at the end of my declaration block before closing the brackets?

i.e. selector { property: value !important; property: value !important; }
vs. selector { property: value; property: value !important; }

?

OK. So I figured out how to add the changes to the child theme's style.css file from a video at WebDesign.com on Gravity Forms. I've done some simple things, but I want to place the form on top of an image to get a more customized look. I'm trying to figure out how to control the placement of the fields and the margins. I'm playing with two forms at http://173.254.52.96/~gmcontra/services/bathrooms/ one in a right side widget and one across the main part of the page. I'm really trying to achieve something that looks like the form on this page http://bathroom.ciacounters.com/ or the popup forms at http://pippity.com/ only I don't want to use popups.

Again, if you look at my previous comments and visit the links, you can see what I'm trying to achieve. I never had any plan to put two forms on the same page, I was just playing with the layout and code to see what they would look like. For a right column form, if you look at the bathrooms.ciacounters.com link that I provided, I would say that form is every bit of 500px, maybe more. I don't want to copy that form, but the general size and layout is what I'm looking for. I've tried various padding declarations and nothing works. I'm obviously not doing something properly. CSS...enough knowledge to get myself in trouble but not enough to get this form to look like what I want.

This should do the trick for you:

[css]
.gform_widget .gform_wrapper input[type="text"], .gform_widget .gform_wrapper input[type="url"], .gform_widget .gform_wrapper input[type="email"], .gform_widget .gform_wrapper input[type="tel"], .gform_widget .gform_wrapper input[type="number"], .gform_widget .gform_wrapper input[type="password"] {
width: 90% !important;
}

This group of selectors will target only the inputs within the widget area.

I edited that snippet and added an !important tag to it. That will do the trick for you. Screenshot