gform_next_button

Description

The “gform_next_button” filter allows the markup for the next button to be changed, giving the user control over how it looks.

Usage

Apply to all forms.

add_filter( 'gform_next_button', 'my_next_button_markup', 10, 2 );

Apply to a specific form.

add_filter( 'gform_next_button_10', 'my_next_button_markup', 10, 2 );

Parameters

  • $next_button string

    The default markup for the next button.

  • $form Form Object

    The current form.

Examples

Change input to button

This example changes the default input type to use the button element with an included span, popular for implementing the Sliding Door CSS technique.

add_filter( 'gform_next_button', 'form_next_button', 10, 2 );
function form_next_button( $button, $form ) {
    return "<button class='button gform_next_button' id='gform_next_button_{$form['id']}'><span>Next</span></button>";
}

Note: The above is just a quick example showing how to use the filter. Using the above code will prevent the form submitting as the onclick attribute is missing.

Here’s another example which would change all the next, previous, and submit buttons so they use button elements from a single function while maintaining attributes such as onclick from original inputs.

/**
 * Filters the next, previous and submit buttons.
 * Replaces the forms <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( $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 );
}

Append a JavaScript action to the button

Adds an onclick action to the submit button.

add_filter( 'gform_next_button', 'add_onclick', 10, 2 );
function add_onclick( $button, $form ) {
    $dom = new DOMDocument();
    $dom->loadHTML( $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 );
}

Source Code

This filter is located in GFFormDisplay::get_field() form_display.php.