Gravity Support Forums Topic: Styling the submit button

Gravity Support Forums Topic: Styling the submit button https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button-1 Gravity Support Forums Topic: Styling the submit button en-US Mon, 20 Apr 2026 08:25:52 +0000 http://bbpress.org/?v=1.0.1 <![CDATA[Search]]> q https://legacy.forums.gravityhelp.com/search.php Chris Hajer on "Styling the submit button" https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button-1#post-35297 Wed, 14 Sep 2011 14:19:21 +0000 Chris Hajer 35297@https://legacy.forums.gravityhelp.com/ Happy this solution worked for you. uxllc on "Styling the submit button" https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button-1#post-35261 Wed, 14 Sep 2011 10:31:26 +0000 uxllc 35261@https://legacy.forums.gravityhelp.com/ Thanks phuketnet -- realized only now that some of our clients' forms were not working in IE7 and below. Added the type='submit' attribute to buttons and it's all good now. Thanks again. phuketnet on "Styling the submit button" https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button-1#post-26441 Fri, 27 May 2011 03:15:20 +0000 phuketnet 26441@https://legacy.forums.gravityhelp.com/ Just an update. For IE 7 or less the button needs 'type="Submit"' to enable the form to submit; e.g: <pre><code>// filter the Gravity Forms button type add_filter("gform_submit_button", "form_submit_button", 10, 2); function form_submit_button($button, $form){ $xml = new SimpleXMLElement($button); return "<button type='Submit' class='submitBtn' id='gform_submit_button_{$form["id"]}'>{$xml['value']}</button>"; }</code></pre> phuketnet on "Styling the submit button" https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button-1#post-25371 Thu, 12 May 2011 02:13:59 +0000 phuketnet 25371@https://legacy.forums.gravityhelp.com/ To preserve the text value from the form button, you can use the following: <pre><code>// filter the Gravity Forms button type add_filter("gform_submit_button", "form_submit_button", 10, 2); function form_submit_button($button, $form){ $xml = new SimpleXMLElement($button); return "<button class='submitBtn' id='gform_submit_button_{$form["id"]}'>{$xml['value']}</button>"; }</code></pre> studioleland on "Styling the submit button" https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button-1#post-18813 Thu, 17 Feb 2011 13:05:41 +0000 studioleland 18813@https://legacy.forums.gravityhelp.com/ This is perfect. Thank you for code example and complete response Kevin. Kevin Flahaut on "Styling the submit button" https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button-1#post-7381 Wed, 14 Jul 2010 01:16:12 +0000 Kevin Flahaut 7381@https://legacy.forums.gravityhelp.com/ That's one way to do it. Rock on. Rami Taher on "Styling the submit button" https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button-1#post-7380 Wed, 14 Jul 2010 01:11:42 +0000 Rami Taher 7380@https://legacy.forums.gravityhelp.com/ Thx for the quick response, that got the button to display, but there were alignment issues... so I just took a screenshot of the button (how it's supposed to look) and created an image out of it. Kevin Flahaut on "Styling the submit button" https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button-1#post-7367 Tue, 13 Jul 2010 16:13:41 +0000 Kevin Flahaut 7367@https://legacy.forums.gravityhelp.com/ The submit button uses the "input" type rather than the "button" element that you need to pull of the "sliding doors" technique you're talking about. You can use change the default button using a built in filter. Just add the following to your theme's functions.php file. <pre><code>// filter the Gravity Forms button type add_filter("gform_submit_button", "form_submit_button", 10, 2); function form_submit_button($button, $form){ return "<button class='button' id='gform_submit_button_{$form["id"]}'>Submit</button>"; }</code></pre> This will change the button for every form. If you only want it to apply to a specific form, you can do that this way (just remember to replace the "_1" with the id of the form you want to change) <pre><code>// filter the Gravity Forms button type for a specific form add_filter("gform_submit_button_1", "form_submit_button"); function form_submit_button($button){ return "<button class='button' id='gform_submit_button_1'>Submit</button>"; }</code></pre> <a href="http://grab.by/grabs/815bc0c2dddcdd29ec2062a4cd582750.png" rel="nofollow">source screenshot</a> That should get you going. Otherwise, you'll simply have to style the input with a button background that has both ends. You can always use an image button for each form which can be defined in the form settings. <a href="http://grab.by/grabs/93dc49cfada3ff729abc27e5c86e6b4c.png" rel="nofollow">screenshot</a> Rami Taher on "Styling the submit button" https://legacy.forums.gravityhelp.com/topic/styling-the-submit-button-1#post-7365 Tue, 13 Jul 2010 15:22:28 +0000 Rami Taher 7365@https://legacy.forums.gravityhelp.com/ I want to use my theme styling for the button in the form, the problem I'm facing is that in my theme CSS, for the image to appear correctly, I have to include the button text within submit for it to display correctly. Otherwise, the button's right border is chopped off. This is how my CSS looks like for the button styling in the theme: <code>.button { color:#5c5c5c; text-decoration:none; text-transform:uppercase; font-weight:700; display:block; background:url(../img/bg_button.png) no-repeat 0 0; height:75px; width:290px }</code> I need one of two possible solutions: 1. How to include the tag into the submit button text OR 2. How to get the CSS to display properly without the need for the element. Thx in advance!