gform_submit_button

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.

/**
* 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 object $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.

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.

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.

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.