Gravity Forms Submit Button Customizer Premium Add-on Setup Guide

Submit Button Customizer gives you full control of the buttons of a Gravity Forms form. For every form you choose the text and icon of the submit button, its size, width and colours; a loading state that shows a spinner and stops double submits; the next and previous buttons of every page; button text that follows the live total, a choice or a feed that is about to run; and a sticky submit bar for phones. Everything lives in one panel in Form Settings, so there is no custom CSS to write and no editor trick to keep alive.

What You Get

• Your own button text per form, with 14 bundled icons shown before or after the text.
• Size, full width or left, centre and right alignment, background, text, hover and border colours, and the corner radius.
• A loading state with a spinner and your wording, announced to screen readers, with the button locked until the answer arrives.
• Next and previous button text for all pages or one page, a style for each, and a switch to hide Previous on chosen pages.
• Text that follows the form: Pay {total}, a different text for a choice, and a text for each payment or add-on feed.
• A sticky submit bar for small screens, and a contrast check for your colours.
• No outside requests. The add-on does not contact any service.

Requirements

• Gravity Forms 2.9 or newer (tested with 2.9 and 3.1), WordPress 6.5 or newer and PHP 7.4 or newer.
• Works with the Orbital theme and with the legacy markup. Forms that use AJAX and forms that reload the page are both supported.

Installation

1. Install and activate the add-on in the usual way.
2. Open Forms → Settings → Submit Button, enter your license key and activate it.
3. Open a form, then Settings → Submit Button, and switch on Customize the buttons of this form.

The Submit Button Panel

The panel has one block per topic. Nothing changes on a form until you switch on Customize the buttons of this form, so you can adopt it one form at a time.

The add-on rebuilds the button with the same id, the same data attributes and the same click handler Gravity Forms prints, so validation, AJAX, Save and Continue and other add-ons keep working.

Colours and Contrast

Choose Custom colours to see the colour fields. Under the fields a message tells you the contrast ratio of the text on the background. It follows the Web Content Accessibility Guidelines: 4.5 to 1 is the minimum for normal text, and the message turns into a warning below that, for the normal state and for the hover state. It updates while you pick colours. The warning never blocks saving, it only helps you choose.

Loading State

Switch on Show a loading state when the form is sent and write the text you want, for example Sending. When the visitor sends the form, the button shows a spinner and that text, the other buttons of the form are marked as busy, and a polite status message is read to screen readers. The button stays in the tab order, so keyboard focus is not lost.

While the form is busy, clicks, the Enter key and a second submit are ignored before Gravity Forms sees them, which prevents double entries from a double click or an impatient visitor. This works with AJAX forms and with forms that reload the page. If a custom script cancels the submission or the connection drops, the button is released after the number of seconds you set under Forms → Settings → Submit Button (60 by default). People who prefer reduced motion get a much slower spinner.

Next and Previous Buttons

For multi-page forms the panel lists one block per page. Set the next and previous text for all pages, then override single pages. A text set for one page wins over the text for all pages. The style of the next button can match the submit button, and the previous button can match it, be an outline, or look like a plain link. You can also hide Previous on any page, for example when an earlier page has already been sent for approval.

Text That Follows the Form

The submit button text can change while the visitor fills in the form. The simplest way is a token in the button text: Pay {total} shows the order total that Gravity Forms calculates and updates it whenever a price changes. The form needs a Total field. If you do not want to show it, give the Total field the CSS class gesb-hide-total in the form editor and it stays out of sight while the button still follows it.

For more control write rules in the Text that follows the form box, one per line, in the form condition arrow text. The first rule that matches wins. Conditions can test the total or a field by its ID (an input id such as 3.2 works too).

total > 0 => Pay {total}
total = 0 => Choose a package to pay
field:5 = Quote => Request a quote
field:7 contains vip => Book the VIP table
field:3 empty => Tell us your name first

A line that cannot be read is refused when you save, with its line number. A rule text may use {total} and {field:5} as well.

Text Per Feed

When the form has payment or add-on feeds, the panel lists each active feed with a text box: When the feed runs. If the feed has conditions, the add-on checks them live against what the visitor entered, and shows your text when the feed would run. For example, a card payment feed that only runs when Payment method is Card can turn the button into Pay by card, and a bank transfer feed into Get bank details. If several feeds match, the first one with a text wins. A feed without conditions always runs, so its text becomes the standard one. Rules come first, then feed texts, then the button text.

Sticky Submit Bar on Phones

Switch on Sticky submit bar on small screens to keep the buttons of the current page fixed at the bottom of the screen while the visitor scrolls a long form. You choose the screen width where it starts (640 pixels by default) and the colour of the bar. It respects the safe area of phones with a notch, and on wide screens nothing changes.

Themes and Compatibility

Accessibility

• The busy button gets aria-busy, is marked aria-disabled and stays focusable, and a polite status message says what is happening.
• Icons are decorative and hidden from screen readers; the text is always the name of the button.
• The spinner slows down for people who prefer reduced motion.
• The settings panel warns about low colour contrast for the normal and the hover state.

Developer Hooks

gesb_config changes the clean configuration of a form, gesb_button_options changes how one button is rebuilt (text, icon, classes), and gesb_front_data changes the data given to the front script.

// Never customize one form, whatever its settings say.
add_filter( 'gesb_config', function ( $cfg, $form ) {
    if ( 12 === (int) $form['id'] ) {
        $cfg['enabled'] = false;
    }
    return $cfg;
}, 10, 2 );

// Change how a button is rebuilt: here every submit button gets the check icon.
add_filter( 'gesb_button_options', function ( $opts, $kind, $form ) {
    if ( 'submit' === $kind ) {
        $opts['icon'] = 'check';
    }
    return $opts;
}, 10, 3 );

Troubleshooting

Frequently Asked Questions

Does it make requests to an outside service?

No. The add-on only changes markup, adds a small style and a small script on your own site.

Will it break my submit button logic or other add-ons?

No. The rebuilt button keeps the id, the data attributes and the click handler of Gravity Forms, and conditional logic of the submit button still hides and shows it.

Can I use my own icon?

The 14 bundled icons are built in. For another icon, use the text field and the gesb_button_options filter.

What happens when I deactivate it?

Your forms return to the buttons they had before. The settings stay saved in the forms.