https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button Gravity Support Forums Topic: Styling the Submit button en-US Sun, 19 Apr 2026 14:51:39 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button#post-9501 Tue, 07 Sep 2010 10:07:26 +0000 orangeapple 9501@https://legacy.forums.gravityhelp.com/ <p>Kevin, thanks again. I'll have to go the jQuery route if I want to apply multiple classes to a field. </p> https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button#post-9373 Fri, 03 Sep 2010 20:15:29 +0000 Kevin Flahaut 9373@https://legacy.forums.gravityhelp.com/ <p>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 &lt;li &gt; element.</p> <pre><code>li.mycustomclassname input {margin:0} li.mycustomclassname select {margin:10px}</code></pre> <p>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..</p> <pre><code>&lt;script type=&quot;text/javascript&quot;&gt; jQuery(document).ready(function() { jQuery(&quot;li.mycustomclassname input&quot;).addClass(&quot;myinputclass&quot;); }); &lt;/script&gt;</code></pre> <p>or directly using the input id like this..</p> <pre><code>&lt;script type=&quot;text/javascript&quot;&gt; jQuery(document).ready(function() { jQuery(&quot;#input_1_4&quot;).addClass(&quot;myinputclass&quot;); }); &lt;/script&gt;</code></pre> https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button#post-9367 Fri, 03 Sep 2010 19:17:51 +0000 orangeapple 9367@https://legacy.forums.gravityhelp.com/ <p>Kevin, thanks! I had found that and just wanted to put my vote in for custom classes on individual inputs.</p> <p>Your solution worked like a charm.</p> <p>Follow-up question:<br /> 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 <u>li</u> rather than the form field itself. </p> <p>example: I want to change this specific input in form ID 1<br /> <code>&lt;input name=&quot;input_4&quot; id=&quot;input_1_4&quot; type=&quot;text&quot; value=&quot;&quot; class=&quot;large&quot; tabindex=&quot;1&quot;&gt;</code> </p> https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button#post-9330 Fri, 03 Sep 2010 09:46:42 +0000 Kevin Flahaut 9330@https://legacy.forums.gravityhelp.com/ <p>You can do this now using the "gform_submit_button" filter. Here's another topic with an example.</p> <p><a href="http://forum.gravityhelp.com/topic/styling-the-submit-button-1#post-7367" rel="nofollow">http://forum.gravityhelp.com/topic/styling-the-submit-button-1#post-7367</a></p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button#post-9329 Fri, 03 Sep 2010 09:26:02 +0000 orangeapple 9329@https://legacy.forums.gravityhelp.com/ <p>+1 vote for the ability to add a custom class (or multiple classes) to the submit button. </p> https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button#post-1028 Tue, 20 Oct 2009 18:36:29 +0000 Kevin Flahaut 1028@https://legacy.forums.gravityhelp.com/ <p>David,</p> <p>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.</p> <p><code>.gform_wrapper input.button { color:#222 }</code><br /> 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.</p> <p><code>.gform_footer input.button { padding:3px }</code><br /> Let me know if that doesn't work for you for some reason.</p> <p>We can also look into adding a custom class to the button to make things even easier in the future. Thanks for the suggestion. </p> https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button#post-1027 Tue, 20 Oct 2009 18:29:54 +0000 David Peralty 1027@https://legacy.forums.gravityhelp.com/ <p>Could you add a custom class like gfsubmit or something so I can style it differently than my comment submit button and whatnot? </p> https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button#post-1026 Tue, 20 Oct 2009 18:08:31 +0000 Kevin Flahaut 1026@https://legacy.forums.gravityhelp.com/ <p>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. </p> <p>We have discussed offering some additional styling options or form 'skins' if you will, but haven't implemented any of that to date. </p> <p>For now, here's the styles we used on the forum buttons. You can grab the background image for the button <a href="http://dl.getdropbox.com/u/688846/gravityhelp/buttonbg.png">here</a></p> <pre><code>input[type=submit], input[type=button] { background-color: #b1b1b1; border: 1px none #707070; color: #636363; font-weight:bold; text-shadow: 0px 1px 1px #fff; background-image:url(images/buttonbg.png); background-repeat:repeat-x; background-position:bottom; 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; }</code></pre> <p>You'll want to make sure the image path is correct for your application and you can format the CSS to your preference.</p> <p>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.</p> <p>screenshot: <a href="http://dl.getdropbox.com/u/688846/gravityhelp/screenshot_873.png">form image button settings</a> </p> https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button#post-1024 Tue, 20 Oct 2009 17:32:56 +0000 Chris Hajer 1024@https://legacy.forums.gravityhelp.com/ <p>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. </p> https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button#post-1023 Tue, 20 Oct 2009 17:26:54 +0000 Chris Hajer 1023@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>Thanks </p>