PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Forms aren't using default GF css

  1. So I'm making multiple forms for my client's site:
    http://www.lincolninsure.com/quotes/residential-quote/auto/

    Unfortunately the styling is completely gone when I create each form.. and the only way I've gotten any styling on the form is if I manually add it to the style.css file.

    I copied everything from the GF form.css file into the bottom of the style.css, but the form still doesn't use the styling as it should.

    The only way around it is manually adding specific styles.. such as:
    ( body #gform_wrapper_1 .gform_body .gform_fields .gfield select {border: 2px solid black} )
    I can do that for one form, but I've got at minimum 7 forms to work with.. and would rather style them all the same... Do I seriously have to go through all the lines in the forms.css sheet, modify them to my desires for each individual form by adding _1, _2, _3, and so on in respect to each form I make? Or is there a way to modify just one, and have them all reference the same style sheet?

    I'm using the Avanix theme, so I suspect it 'might' have something to do with their built in contact form, but I'm a novice when it comes to wordpress customizations like this. Halp!

    Here is the theme's page for further information on the theme:
    http://demo.imediapixel.com/index.php?theme=avanix

    Here is my site:
    http://www.lincolninsure.com
    And the main forms I'm working on now:
    http://www.lincolninsure.com/quotes/residential-quote/auto/
    http://www.lincolninsure.com/quotes/residential-quote/home/
    http://www.lincolninsure.com/quotes/commercial-quote/workers-compensation/

    Thanks a ton!

    Posted 7 years ago on Friday December 28, 2012 | Permalink
  2. Do you have the Output CSS setting to on in the Gravity Forms settings page? If not, can you activate that and let me know when you have? Sounds like you might have a conflict of some kind.

    Posted 7 years ago on Friday December 28, 2012 | Permalink
  3. Yeah, I turned it off last night while trying to get it to work..

    I just turned it back on, the style.css sheet only has my customized code.

    Let me know if you want me to change anything else, and thank you so much for the help!

    Posted 7 years ago on Friday December 28, 2012 | Permalink
  4. OK - now our styles are being output. Comment out or cut and paste everything you added to your styles.css and let me know when that's gone.

    Posted 7 years ago on Friday December 28, 2012 | Permalink
  5. Customized styles removed, default GF styles added to the style.css sheet, all styling appears to be gone.

    Posted 7 years ago on Friday December 28, 2012 | Permalink
  6. Right on, so in your theme - it's reseting some form elements. Check out this screenshot.

    Don't copy our styles into the theme's stylesheet - you don't need to do that, it's redundant. Remove those, they are already getting called in via forms.css. We don't set any "coloring" in our stylesheet, it's all inherited from the theme - but your reset rule is making the inputs appear to have no styling and such.

    So after you remove the GF styles from style.css, try dropping this into your theme's stylesheet to target your inputs globally to add a background and a border:

    [css]
    body .gform_wrapper input[type="text"], body .gform_wrapper input[type="url"], body .gform_wrapper input[type="email"], body .gform_wrapper input[type="tel"], body .gform_wrapper input[type="number"], body .gform_wrapper input[type="password"] {
    background-color: #fff;
    border: 1px solid #ccc;
    }

    This screenshot will be your result.

    Posted 7 years ago on Friday December 28, 2012 | Permalink
  7. I copied/pasted your block of code, forced refresh on the form page, and all the styling is still gone.

    Looked at the code with Firebug, and this is what I'm showing:
    http://imgur.com/JIj7d

    When I look at Firebug, it's showing the background as transparent. If I disable it, the form boxes go white (I like that actually)

    Ideally, I'd like the background of the form boxes to be white, with a 1px black border, something that looks similar to this:
    http://imgur.com/ACAJa

    But, I want it as a default for all forms..

    Posted 7 years ago on Friday December 28, 2012 | Permalink
  8. You have invalid CSS. Look at this Screenshot

    You need to get rid of all those dashes and the numbers... if you hover my code sample you'll see a way to pop the code so it doesn't show the numbers. The code sample formatting is for display purposes only - the numbers are used to mimic line numbers.

    Posted 7 years ago on Friday December 28, 2012 | Permalink
  9. Ah, got it. Wasn't thinking about it. I meant to use the dashes as a spacer to keep my point of reference, and forgot to comment them out.

    Looks much better now, and now I can just look for specific parts of the style sheet to edit. Thanks a bunch!

    Posted 7 years ago on Friday December 28, 2012 | Permalink
  10. Right on, no problem. Just remember, don't edit forms.css - changes you make there will get overwritten by plugin updates. So do all of your customizations in style.css of your theme. Give a shout if you get stuck anywhere.

    Posted 7 years ago on Friday December 28, 2012 | Permalink
  11. Hey Rob, one more quick one.

    On my Auto quote page, I took out the Country (since the company only does insurance in the states) but when I style the Address fields, the Zip Code box only has 3 sides with a border, the right side is missing one.

    See this example:
    http://imgur.com/ofcir

    Any way to fix that by chance?

    Thanks again!

    Posted 7 years ago on Friday December 28, 2012 | Permalink
  12. It looks like your theme is adding in paragraph and break tags into our code, which means it's most likely using the [raw] shortcode function. Try wrapping your gravity form shortcode on your page like this:

    [raw][your gf shortcode goes here][/raw]

    Let's see if that changes things for you.

    Posted 7 years ago on Friday December 28, 2012 | Permalink
  13. Slightly confused, but is this how it should look like?

    http://imgur.com/0MtQH

    Posted 7 years ago on Friday December 28, 2012 | Permalink
  14. Ha - sorry, no. I'm talking about the form shortcode, not the CSS. The shortcode would be on your page in the admin, where you place the form.

    Posted 7 years ago on Friday December 28, 2012 | Permalink
  15. Ah, derp. Sorry, long night.. and early morning. I got it now, looks perfect, you are a bauce.

    Posted 7 years ago on Friday December 28, 2012 | Permalink
  16. Sweet action, glad to help!

    Posted 7 years ago on Friday December 28, 2012 | Permalink
  17. David Peralty
    Administrator

    Just as a side note, you might want to contact the theme developer and ask them to look into changing how they do things so you don't need to use those RAW tags, as they can create many issues that will be difficult to troubleshoot because they are changing how WordPress does things by default.

    Posted 7 years ago on Friday December 28, 2012 | Permalink

This topic has been resolved and has been closed to new replies.