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.

Increase submit button size in chrome

  1. Hello,

    How do I increase the size of the submit button in Chrome. The size is fine in IE and Firefox but in Chrome it loses the spacing around the text.

    Form at http://developyourenglish.ch/contact

    Posted 10 years ago on Tuesday January 10, 2012 | Permalink
  2. Right now each browser is using just the default submit button stlying that is rendered via the browser and it looks fine here in Chrome on my end. However, you have a lot of options as to how to change that.

    1 - You can target the submit button via CSS (using one of many selectors available to you)

    Example (this would target only form ID 1's submit button)

    [css]
    #gform_submit_button_1 {
    font-size: 2em;
    }

    2- You can create an image and apply that image in the form builder for the submit button.

    Posted 10 years ago on Tuesday January 10, 2012 | Permalink
  3. I am sorry that question came out wrong. What I find is that the distance between the text and the border is different in IE and Chrome. How can I have that they bath have same amount of padding?
    Here is a print screen of the two.
    http://imageshack.us/photo/my-images/849/captureivp.jpg/

    Posted 10 years ago on Tuesday January 10, 2012 | Permalink
  4. Sorry, I just provided you with a way to target that particular submit button. Font-size was just an example. You can use padding as well, or whatever other CSS declarations you want. You would want to place this into your theme's stylesheet.

    [css]
    #gform_submit_button_1 {
    padding: 5px;
    }

    If you want to target all submit buttons in GF, you could use a less specific selector:

    [css]
    .gform_wrapper .gform_footer input[type="submit"] {
    padding: 5px;
    }

    You have a reset rule in your stylesheet that is setting the padding to 0.

    Posted 10 years ago on Tuesday January 10, 2012 | Permalink
  5. I had already tried that but there was still a difference between IE and Chrome. I think I will try this tip from Kevin unless you have a better solution

    http://www.gravityhelp.com/forums/topic/ie-safari-chrome-discrepencies

    Posted 10 years ago on Tuesday January 10, 2012 | Permalink
  6. Actually, we have the browser selectors built in now. Sorry about that. If you view the source you can see at the top of the wrapper it will show you the current browser you are using as part of the class:

    http://grab.by/bxrL

    You can use that to get more specific with your submit button selector. Sorry, that completely slipped my mind here!

    Posted 10 years ago on Tuesday January 10, 2012 | Permalink
  7. I'm pretty new to CSS, and I'm having trouble with the size of my form buttons too. After several attempts, I managed to increase the font-size, but now, just like developyourenglish, I'm having a padding problem with the button. I figured that since the font-size changed, the padding would too, but no luck. Also, the font-size only changed on the submit button of the form, and not the next and previous buttons. Any help? My form is here:

    http://zephyrpoint.org/conference-guest-evaluation

    Posted 9 years ago on Thursday September 13, 2012 | Permalink
  8. Okay... I'm getting a little more direction from this post from Chris Hajer:

    http://www.gravityhelp.com/forums/topic/next-and-submit-button-styling

    BUT now my question is how do I style the Next, Previous, and Submit buttons separately? The .gform_wrapper input.button {... CSS Chris mentioned in the other post styles all of the buttons. I searched for "next" and "previous" in forms.css trying to find the class name for those buttons without success (don't worry - I'm not making my changes in forms.css). Thanks!

    Posted 9 years ago on Thursday September 13, 2012 | Permalink
  9. You can target the next and previous buttons like this:

    [css]
    body .gform_page_footer input.gform_next_button {
        color: green;
    }
    
    body .gform_page_footer input.gform_previous_button {
        color: red;
    }
    Posted 9 years ago on Friday September 14, 2012 | Permalink
  10. Okay. Those worked great. I am learning that a more specific selector such as input.gform_next_button will override a less specific selector such as input.button, correct? Now I just need to know the more specific selectors. Can you tell me how to specifically target the "submit" button and the "choose file" button on the file upload form field?

    By the way, is there another place I could be looking to learn this stuff, too? I don't mind searching... I kinda like it sometimes. Is it written into a .css file somewhere in the /plugins/gravityforms directory? I didn't find anything about a "submit" button in forms.css (or a "gform_next_button" or "gform_previous_button" for that matter). Cheers!

    Posted 9 years ago on Friday September 14, 2012 | Permalink
  11. Okay. Those worked great. I am learning that a more specific selector such as input.gform_next_button will override a less specific selector such as input.button, correct?

    True

    Now I just need to know the more specific selectors. Can you tell me how to specifically target the "submit" button and the "choose file" button on the file upload form field?

    Because you're going to be doing this a lot, I would recommend getting familiar with how to find the class or id of the element you want to target. Take a look at the source of the rendered page where the form was embedded (just load the page in your browser and "view source".) Search the page for some text which uniquely identifies the item you want to style (like "next" or "previous" or "submit".) Here's what I found in the source of my page when I went looking for the "Submit" button:

    [php]
    <div class='gform_footer left_label'> <input type='submit' id='gform_submit_button_62' class='button gform_button' value='Submit' tabindex='43' />

    You could target this one button on this one form with an id specific rule, like this:

    [css]
    #gform_submit_button_62 {
    	font-size: 20px;
    	padding: 20px;
    	color: green;
    }

    But that will only work for the submit button on this one form. Note that an ID is prefixed with the hash mark in your stylesheet (#gform_submit_button_62). Classes are more generic (you can have multiple elements on a page with the same class: the ID must be unique and used on only one element in the form.)

    So, to be more generic and give all your form submit buttons the same style, you could target by class:

    [css]
    input['submit'] .gform_button {
    	font-size: 20px;
    	padding: 20px;
    	color: green;
    }

    That will give any submit input element with the class (prefix with a . for a class) .gform_button your custom style. However, this is not a very specific rule. We want our custom rule to always "win" so we need to make it more specific. If you look at the source of the web page, you will see that it's a series of nested elements. You can chain these elements together and come up with a very specific rule, which will still apply to all your Gravity Forms. Looking at the source of my page, I find I can do this, based on where the form is located in my page:

    [css]
    body .gform_wrapper form .gform_footer input['submit'] .gform_button {
    	font-size: 20px;
    	padding: 20px;
    	color: green;
    }

    Now we have a very specific rule which should win out over any less generic rule, and not affect any other buttons on your site.

    By the way, is there another place I could be looking to learn this stuff, too? I don't mind searching... I kinda like it sometimes. Is it written into a .css file somewhere in the /plugins/gravityforms directory? I didn't find anything about a "submit" button in forms.css (or a "gform_next_button" or "gform_previous_button" for that matter). Cheers!

    I've never looked at the forms.css file. I don't know what rules are written there. I just follow the procedure above to find a very specific chain of elements that I can use to ensure my rule is more specific than any other rule which might be present in a theme stylesheet or even in the Gravity Forms forms.css.

    Here is some documentation on CSS specificity which is what we're using to ensure our rules "win". http://css-tricks.com/specifics-on-css-specificity/

    There are other tools which make finding the class and ID easier, but this is a good way to start. Just remember that classes use a period in your style rule, and ids use a hash mark. If you get stuck on something, post a link to where you applied it online and we'll check it out for you.

    Posted 9 years ago on Friday September 14, 2012 | Permalink
  12. This is awesome... and you work late! Aren't you on the east coast? Thanks for your quick reply, Chris. You guys certainly make it easy to come for help. I will certainly be recommending Gravity Forms when the opportunity arises.

    Posted 9 years ago on Friday September 14, 2012 | Permalink
  13. Rocketgenius is in Virginia Beach Virginia, but I do support for them from Chicago, Illinois. It's not too late here :-)

    Posted 9 years ago on Friday September 14, 2012 | Permalink