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.

Submit button Issue

Gravity Support Forums » Plugin Support » Gravity Forms

  1. faith4more
    Member

    Submit button at bottom of form is hard to read. It picks up the colors of my theme. Is there away to over ride that and customize that button. I did not include URL to site because it is not public yet.

    Posted 13 years ago on Thursday March 10, 2011 | Permalink

  2. Carl Hancock
    Administrator

    Yes, you can use CSS to target and style any form element. You would add custom CSS to your themes stylesheet to target and style whatever you want.

    Here are some examples:

    http://www.gravityhelp.com/documentation/css-targeting-samples/

    Posted 13 years ago on Thursday March 10, 2011 | Permalink

  3. faith4more
    Member

    Thanks for links

    From the link I get

    body .gform_wrapper .gform_footer input[type=image] {border:1px solid red}

    But question is how do I change it? What I have is a blue button . Problem is text in button is so dark can't really tell it says submit. The button is also very small. Is there a way to change that using code above or is there another way to do it?

    Any suggestions would be helpful

    Posted 13 years ago on Thursday March 10, 2011 | Permalink

  4. Carl Hancock
    Administrator

    The CSS you referenced is only if you are using an image submit button, which it doesn't sound like you are if your theme is setting the colors. So you wouldn't use that.

    If you want to change the background color and foreground color you need to add the appropriate CSS. For example:

    body .gform_wrapper .gform_footer input[type=submit] {color: #FFFFFF, background-color: #000000;}

    That would set the foreground color to white and the background color to black for the button. BUT the way CSS inheritance works depending on how your CSS is setup and the order in which your CSS is executed, if your colors are still getting overwritten then you can use the !important declaration to force it. For example:

    body .gform_wrapper .gform_footer input[type=submit] {color: #FFFFFF!important, background-color: #000000!important;}

    It's all standard CSS. You just have to target the correct HTML element and use CSS to apply the styles you want.

    Posted 13 years ago on Thursday March 10, 2011 | Permalink