Description
This filter is executed when the form is displayed and can be used to completely change the form button tag (i.e. <input type="submit">).
Usage
The following would apply your function to all forms:
add_filter( 'gform_submit_button', 'your_function_name', 10, 2 );
To target a specific form, append the form id to the hook name (format: gform_submit_button_FORMID):
add_filter( 'gform_submit_button_5', 'your_function_name', 10, 2 );
Parameters
- $button_input string
The string containing the
<input>tag to be filtered. - $form Form Object
The form currently being processed.
Examples
1. Change input to button
This example changes all the next, previous, and submit buttons, so they use button elements from a single function while maintaining attributes such as onclick from the original inputs.
Note: If you don’t retain the attributes from the original inputs, the buttons might not function, or the form might not be submitted using the form scripts, so the duplicate submission prevention feature might not be used.
This approach works with WordPress 6.6 and greater:
/**
* Filters the next, previous and submit buttons.
* Replaces the form's <input> buttons with <button> while maintaining attributes from original <input>.
*
* @param string $button Contains the <input> tag to be filtered.
* @param array $form Contains all the properties of the current form.
*
* @return string The filtered button.
*/
add_filter( 'gform_next_button', 'input_to_button', 10, 2 );
add_filter( 'gform_previous_button', 'input_to_button', 10, 2 );
add_filter( 'gform_submit_button', 'input_to_button', 10, 2 );
function input_to_button( $button, $form ) {
$fragment = WP_HTML_Processor::create_fragment( $button );
$fragment->next_token();
$attributes = array( 'id', 'type', 'class', 'onclick' );
$new_attributes = array();
foreach ( $attributes as $attribute ) {
$value = $fragment->get_attribute( $attribute );
if ( ! empty( $value ) ) {
$new_attributes[] = sprintf( '%s="%s"', $attribute, esc_attr( $value ) );
}
}
return sprintf( '<button %s>%s</button>', implode( ' ', $new_attributes ), esc_html( $fragment->get_attribute( 'value' ) ) );
}
The following approach works with all versions of WordPress, but is slower:
/**
* Filters the next, previous and submit buttons.
* Replaces the form's <input> buttons with <button> while maintaining attributes from original <input>.
*
* @param string $button Contains the <input> tag to be filtered.
* @param array $form Contains all the properties of the current form.
*
* @return string The filtered button.
*/
add_filter( 'gform_next_button', 'input_to_button', 10, 2 );
add_filter( 'gform_previous_button', 'input_to_button', 10, 2 );
add_filter( 'gform_submit_button', 'input_to_button', 10, 2 );
function input_to_button( $button, $form ) {
$dom = new DOMDocument();
$dom->loadHTML( '<?xml encoding="utf-8" ?>' . $button );
$input = $dom->getElementsByTagName( 'input' )->item(0);
$new_button = $dom->createElement( 'button' );
$new_button->appendChild( $dom->createTextNode( $input->getAttribute( 'value' ) ) );
$input->removeAttribute( 'value' );
foreach( $input->attributes as $attribute ) {
$new_button->setAttribute( $attribute->name, $attribute->value );
}
$input->parentNode->replaceChild( $new_button, $input );
return $dom->saveHtml( $new_button );
}
2. Add text after the button
This example shows how you can add content after the submit button.
add_filter( 'gform_submit_button_36', 'add_paragraph_below_submit', 10, 2 );
function add_paragraph_below_submit( $button, $form ) {
// Return without changes for the admin back-end.
if ( is_admin() ){
return $button;
}
return $button .= "<p>your <a href='http://yourlink.com'>text</a> goes here</p>";
}
3. Remove the button
This example shows how to remove the submit button for a specific form.
add_filter( 'gform_submit_button_10', '__return_empty_string' );
4. Append a JavaScript action to the button
Adds an onclick action to the submit button.
This approach works with WordPress 6.6 and greater.
add_filter( 'gform_submit_button', 'add_onclick', 10, 2 );
function add_onclick( $button, $form ) {
$fragment = WP_HTML_Processor::create_fragment( $button );
$fragment->next_token();
$onclick = trim( (string) $fragment->get_attribute( 'onclick' ) );
if ( ! empty( $onclick ) && substr( $onclick, -1 ) !== ';' ) {
$onclick .= ';';
}
$onclick .= " addAdditionalAction('Additional Action');";
$fragment->set_attribute( 'onclick', $onclick );
return $fragment->get_updated_html();
}
The following approach will work with all versions of WordPress.
add_filter( 'gform_submit_button', 'add_onclick', 10, 2 );
function add_onclick( $button, $form ) {
$dom = new DOMDocument();
$dom->loadHTML( '<?xml encoding="utf-8" ?>' . $button );
$input = $dom->getElementsByTagName( 'input' )->item(0);
$onclick = $input->getAttribute( 'onclick' );
$onclick .= " addAdditionalAction('Additional Action');"; // Here's the JS function we're calling on click.
$input->setAttribute( 'onclick', $onclick );
return $dom->saveHtml( $input );
}
5. Append custom CSS classes to the button
Adds two custom CSS classes to the submit button.
This approach works with WordPress 6.6 and greater:
add_filter( 'gform_submit_button', 'add_custom_css_classes', 10, 2 );
function add_custom_css_classes( $button, $form ) {
$fragment = WP_HTML_Processor::create_fragment( $button );
$fragment->next_token();
$fragment->add_class( 'my-custom-class' );
$fragment->add_class( 'another-one' );
return $fragment->get_updated_html();
}
The following approach works with all versions of WordPress.
add_filter( 'gform_submit_button', 'add_custom_css_classes', 10, 2 );
function add_custom_css_classes( $button, $form ) {
$dom = new DOMDocument();
$dom->loadHTML( '<?xml encoding="utf-8" ?>' . $button );
$input = $dom->getElementsByTagName( 'input' )->item(0);
$classes = $input->getAttribute( 'class' );
$classes .= " my-custom-class another-one";
$input->setAttribute( 'class', $classes );
return $dom->saveHtml( $input );
}
6. Change the button text after clicking it
The following example changes the button text once clicked to confirm to the user the form is being sent.
This approach works with WordPress 6.6 and greater:
add_filter( 'gform_submit_button', 'gf_change_submit_button_text', 10, 2 );
function gf_change_submit_button_text( $button, $form ) {
$fragment = WP_HTML_Processor::create_fragment( $button );
$fragment->next_token();
$onclick = trim( (string) $fragment->get_attribute( 'onclick' ) );
if ( ! empty( $onclick ) && substr( $onclick, - 1 ) !== ';' ) {
$onclick .= ';';
}
$onclick .= " this.value='Sending...';";
$fragment->set_attribute( 'onclick', $onclick );
return $fragment->get_updated_html();
}
The following approach works with all versions of WordPress:
add_filter( 'gform_submit_button', 'gf_change_submit_button_text', 10, 2 );
function gf_change_submit_button_text( $button, $form ) {
$dom = new DOMDocument();
$dom->loadHTML( '<xml encoding="utf-8" ?>' . $button );
$input = $dom->getElementsByTagName( 'input' )->item(0);
$onclick = $input->getAttribute( 'onclick' );
$onclick .= " this.value='Sending...'"; // Change button text when clicked.
$input->setAttribute( 'onclick', $onclick );
return $dom->saveHtml( $input );
}
Placement
This code can be used in the functions.php file of the active theme, a custom functions plugin, a custom add-on, or with a code snippets plugin.
See also the PHP section in this article: Where Do I Put This Code?
Source Code
This filter is located in GFFormDisplay::gform_footer() in form_display.php.