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.