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 image ......

  1. Hello,

    I just bought the developer version and am starting to dive in now. I apologize for some dumb questions in advance. I made a nice button with a drop shadow that I want to use for (instead of) my submit button, which is an option for each form.

    It seems that GF puts a border around any image I try to use which defeats me trying to use a button with a drop shadow of course. Is there an easy way to stop this behavior?

    Regards
    SEO Scott

    Posted 7 years ago on Friday August 5, 2011 | Permalink
  2. Gravity Forms isn't adding your border. It's coming from your theme. Most likely the theme has applied a blanket border property to all inputs. Since the image button is technically an input, it's going to inherit from this rule. Since you didn't post a URL to your form I can't tell you with 100% surety, but I'd bet money thats the case.

    You can add this to your theme stylesheet and it should override the border property.

    [css]
    body .gform_wrapper .gform_footer input[type=image] {border:none!important}
    Posted 7 years ago on Saturday August 6, 2011 | Permalink
  3. Hi Kevin,

    I'm using the Thesis theme on THIS particular site. If I insert the button image anywhere else I get no border. It's only when I insert the image through the form editor this happens.

    I inserted the css code into my custom css in thesis, and it did remove the black border, but there is still a border that looks kind of like a padding color or something. Here's the code I put in from you:
    ----------------------------
    body .gform_wrapper .gform_footer input[type=image] {
    border:none;}
    ----------------------------
    Thanks again Kevin!

    Scott

    Posted 7 years ago on Saturday August 6, 2011 | Permalink
  4. Kevin,

    It appears I answered my own question. ;)
    The padding was affected by the background of the button element itself, so I just added this to the code you provided:
    ------------------------
    body .gform_wrapper .gform_footer input[type=image] {
    border:none;
    background-color: #FFFFFF;}
    ------------------------
    And voila, it is removed, or the same color as my background I should say.

    Thanks again Kevin!
    Scott

    Posted 7 years ago on Saturday August 6, 2011 | Permalink
  5. I would have guessed Thesis because I've seen this many times.

    The reason you don't see a border when you add the image elsewhere is that you're not using the image as an input type. You're probably just adding the image with the normal src tag. When you apply the image as the form button, it gets added as input type="image" src="blahblah.png" Once it's defined as in input, it inherits styles intended for inputs.

    Glad you figured it all out. You're the man!

    Posted 7 years ago on Saturday August 6, 2011 | Permalink

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