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.

Styling the Submit button

  1. I see you guys have styled the input buttons here. Any chance of adding those styles to the download package? The submit button styling in the stock form is a little flat. Dressing that up a little would save me from having to style the buttons in my own stylesheet.


    Posted 14 years ago on Tuesday October 20, 2009 | Permalink
  2. Once again, I just realized the form styles were being overwritten by the stylesheet of my theme, StudioPress Church. Removing that still leaves the buttons sort of flat and it would be great to see styles like you use here in the forum.

    Posted 14 years ago on Tuesday October 20, 2009 | Permalink
  3. Thanks for the suggestion. We decided to leave the button elements un-styled so they would just inherit the default browser button styles, or any the user might already have in place in the theme.

    We have discussed offering some additional styling options or form 'skins' if you will, but haven't implemented any of that to date.

    For now, here's the styles we used on the forum buttons. You can grab the background image for the button here

    input[type=submit], input[type=button] {
    	background-color: #b1b1b1;
    	border: 1px none #707070;
    	color: #636363;
    	text-shadow: 0px 1px 1px #fff;
    	padding: 3px 4px;
    	line-height: 14px;
    	font-size: 13px;
    	margin: 0;
    	-moz-border-radius: 4px;
    	-khtml-border-radius: 4px;
    	-webkit-border-radius: 4px;
    	border-radius: 4px;

    You'll want to make sure the image path is correct for your application and you can format the CSS to your preference.

    Also, in case you're not aware of it, you can also create a form button graphic and apply it directly via the form settings in the admin.

    screenshot: form image button settings

    Posted 14 years ago on Tuesday October 20, 2009 | Permalink
  4. David Peralty

    Could you add a custom class like gfsubmit or something so I can style it differently than my comment submit button and whatnot?

    Posted 14 years ago on Tuesday October 20, 2009 | Permalink
  5. David,

    You should be able to do this now with a little CSS inheritance. The entire form is wrapped in a div with class "gform_wrapper" so you can target the individual elements inside there.

    .gform_wrapper input.button { color:#222 }
    if you want to get a little more granular, the main submit button is in a div with the class "gform_footer" so you could use that to target the button if you preferred.

    .gform_footer input.button { padding:3px }
    Let me know if that doesn't work for you for some reason.

    We can also look into adding a custom class to the button to make things even easier in the future. Thanks for the suggestion.

    Posted 14 years ago on Tuesday October 20, 2009 | Permalink
  6. +1 vote for the ability to add a custom class (or multiple classes) to the submit button.

    Posted 13 years ago on Friday September 3, 2010 | Permalink
  7. You can do this now using the "gform_submit_button" filter. Here's another topic with an example.

    We may add the capability to the admin in a later version, but you can use that filter to manipulate the submit button anyway you want. Just be sure to keep the "id" value on the button so it still works properly with conditional logic, etc.

    Posted 13 years ago on Friday September 3, 2010 | Permalink
  8. Kevin, thanks! I had found that and just wanted to put my vote in for custom classes on individual inputs.

    Your solution worked like a charm.

    Follow-up question:
    What is the correct function calls to replace the class on a specific input? When creating the form you can enter a custom class, but that is added to the parent li rather than the form field itself.

    example: I want to change this specific input in form ID 1
    <input name="input_4" id="input_1_4" type="text" value="" class="large" tabindex="1">

    Posted 13 years ago on Friday September 3, 2010 | Permalink
  9. Not sure if there's a filter to change the input itself.. I'll have to double check on that. You can usually effect changes with inheritance from the parent <li > element.

    li.mycustomclassname input {margin:0}
    li.mycustomclassname select {margin:10px}

    You could use the same method to target the field with jQuery if you really wanted to append a class name to the input itself... something like this..

    <script type="text/javascript">
    jQuery(document).ready(function() {
     		jQuery("li.mycustomclassname input").addClass("myinputclass");

    or directly using the input id like this..

    <script type="text/javascript">
    jQuery(document).ready(function() {
    Posted 13 years ago on Saturday September 4, 2010 | Permalink
  10. Kevin, thanks again. I'll have to go the jQuery route if I want to apply multiple classes to a field.

    Posted 13 years ago on Tuesday September 7, 2010 | Permalink

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