Ollie Murphy

<p>Gravity Forms already lets you customize the Submit Button under its Form Settings for each form; you can change the button’s text and you can select whether the button should be an <code><input></code> or an <code><img></code> element. However, you can’t add html as part of the button text and you’re restricted to using either an input or image element for the button. With this plugin you can choose to use a <code><button></code> tag element instead, which also lets you embed HTML inside it. Moreover, this plugin also lets you conveniently change the CSS classes of the submit button.</p>
<p>There are plenty of use cases for adding HTML into the submit button text. For instance, if your button text is multiple words long and you’d like to bold or italicize some of them by wrapping certain words in strong or em tags.</p>
<p>Likewise, there are many reasons to change the button’s default CSS class. For example, GravityForms automatically adds the ‘button’ class, but, if you’re using the Twitter Bootstrap framework, ‘btn’ would actually be more helpful.</p>
<p><strong>Gravity Forms requires at least: 1.9.12.16</strong></p>
<p><strong>Gravity Forms tested up to: 1.9.15.11</strong><br />
After activating the plugin, please navigate to the form settings of the form that you wish to customize. Scroll down to the ‘form button’ section where, in addition to ‘text’ and ‘image’, you’ll also be given ‘button’ as an input type option. Selecting the ‘button’ option will change the submit button’s markup to a <code><button></code> element. You will also be able to embed html in the ‘HTML Button Text’ field.</p>
<p>In the same ‘form button’ section under form settings, there’s an input called ‘Submit Button CSS Classes’. This is where you can change the CSS classes being currently used by the submit button.</p>
<p>Currently you are only able to customize the submit buttons on a per form basis within the form settings and not globally.</p>
<h4>Please note that Gravity Forms must be installed and activated for the plugin to work.</h4>


Customize Submit Button for Gravity Forms

I'm able to add classes to submit button independently without using the filter. Without PHP notices or bugs so far.



Does exactly what I need

Lets you customize the submit button in Gravity Forms by switching it to a button element and changing its CSS classes

WP Gear Pro

Manny Rodrigues

<p>This WordPress plugin for Gravity Forms will allow you to quickly and conveniently select from a fully updated list of CSS Ready Classes available under your form fields’ Appearance tab. This plugin is a modified version of <a href="https://wordpress.org/plugins/gravity-forms-css-ready-selector/" rel="ugc">Brad’s Gravity Forms CSS Ready Class Selector WordPress plugin</a>. Special thanks to <a href="https://profiles.wordpress.org/bradvin/" rel="nofollow ugc">Brad Vincent</a> for the original code and <a href="https://github.com/mkormendy" rel="nofollow ugc">Mike Kormendy</a> for the cleaned up version! <a href="https://endurtech.com/css-ready-classes-plugin/" rel="nofollow ugc">Visit the new and improved plugin web site</a> for more details.</p>
<p>This plugin, as of v2.5, will also HIDE ALL Gravity Forms backend tooltips when managing your forms. Those tooltips are helpful to the uninitiated but quickly become a pest to those of us who are initiated. To restore tooltip function simply disable this plugin. In a future release I will look into embedding this feature into the main Gravity Forms Settings area so that it can be toggled. If anyone wants to help me achieve this please <a href="https://endurtech.com/contact/" rel="nofollow ugc">get in touch with me</a>.</p>
<p>This plugin, as of v2.7.6, will also HIDE ALL Gravity Forms “Required Field Notification” message which appears at the top of every form. That notification is helpful to the uninitiated but quickly become a pest to those of us who are initiated. To restore the notification message at the top of each form simply disable this plugin. In a future release I will look into embedding this feature into the main Gravity Forms Settings area so that it can be toggled. If anyone wants to help me achieve this please <a href="https://endurtech.com/contact/" rel="nofollow ugc">get in touch with me</a>.</p>
<p><a href="https://endurtech.com/give-thanks/" rel="nofollow ugc">Donate now</a> to ensure future improvements to this plugin by <a href="https://endurtech.com/send-a-tip-using-the-brave-browser/" rel="nofollow ugc">sending me a tip using Brave</a> or by <a href="https://endurtech.com/give-thanks/" rel="nofollow ugc">sending me a one-time donation</a>.</p>
<h3>Features</h3>
<ul>
<li>Conveniently accessible with a link next to the “Custom CSS Class” field under a fields’ “Appearance” tab.</li>
<li>Clean and simple popup / modal window listing a fully updated list of Gravity Forms CSS Ready Classes.</li>
<li>Click to clear all previously submitted CSS Ready Classes from the “Custom CSS Class” field.</li>
<li>You are able to add more than one CSS Ready Class, when done just click away or the close button.</li>
<li>Double click any CSS Ready Class to add it and auto-close the popup / modal window.</li>
<li>Hover over any CSS Ready Class to obtain a description of the class.</li>
<li>Hides ALL Gravity Form backend tooltips when managing your forms (as of v2.5).</li>
<li>Hides ALL Gravity Form frontend notification message regarding required fields (as of 2.7.6).</li>
</ul>


CSS Ready Classes for Gravity Forms

Conveniently select Gravity Form CSS Ready Classes from your form fields Appearance tab.

Customize Submit Button for Gravity Forms vs CSS Ready Classes for Gravity Forms