Gravity Forms Tweaks: Button Styles and Read-Only Fields

Gravity Forms is a powerful WordPress plugin that comes packed with features and provides a large library of add-ons that can be used to further extend its functionality. While there are a number of options for building forms with WordPress, Gravity Forms stands out as one of the best.

In the past, we’ve shared useful tips and tricks, integrations and how to set registration limits in Gravity Forms.

Let’s review some additional tweaks and code that can be used to further extend the functionality and update the appearance of your Gravity Forms.

Adding CSS Classes to Your Gravity Forms Buttons

Gravity Forms has its own built in styles, but you probably want the fields and buttons to conform to your brand. The easiest way to do that is to extend your WordPress theme’s styles to your forms – and specifically your buttons.

Let’s assume that you have styles for your buttons, and they use the CSS class “button-class”. In order to extend these styles to the form buttons, use this code to add the CSS class to the form submit button:

add_filter( 'gform_next_button', 'dgtlnk_gf_add_class_to_button', 10, 2 );
add_filter( 'gform_previous_button', 'dgtlnk_gf_add_class_to_button', 10, 2 );
add_filter( 'gform_submit_button', 'dgtlnk_gf_add_class_to_button', 10, 2 );
function dgtlnk_gf_add_class_to_button( $button, $form ) {
     $fragment = WP_HTML_Processor::create_fragment( $button );
     $fragment->next_token();
     $fragment->add_class( 'button-class' ); 
     return $fragment->get_updated_html();
}

We’re using the gform_submit_button filter to add the CSS “button-class“ class to the submit button, while the gform_previous_button and gform_next_button filters are added to style the “Previous” and “Next” buttons on a multi-page form.

Replace Older Inputs with Buttons and Add CSS

If you are using a version of Gravity Forms prior to 3.0, then the button’s HTML will also have to be updated – as Gravity Forms began  using <button> elements instead of <input> elements.

This code adds both the “button-class” class while swapping out the <input> element for a <button> element.

add_filter( 'gform_next_button', 'dgtlnk_gf_input_to_button', 10, 2 );
add_filter( 'gform_previous_button', 'dgtlnk_gf_input_to_button', 10, 2 );
add_filter( 'gform_submit_button', 'dgtlnk_gf_input_to_button', 10, 2 );
function dgtlnk_gf_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 ) {
        if ($attribute->name == 'class') {
            $attribute->value .= ' button-class';
        }
        $new_button->setAttribute( $attribute->name, $attribute->value );
    }
    $input->parentNode->replaceChild( $new_button, $input );
    return $dom->saveHtml( $new_button );
}

Disable Forms Fields to Prevent Changes

There may be times when you want to display a form field with a default value, but do not want the user to be able to make any changes to it.

When that happens, you would normally add a “readonly” or “disabled” attribute to the field. But Gravity Forms doesn’t have a setting for that out of the box, so we’ll need to build it.

To add those attributes, we’ll add a custom CSS class to the field that needs to be disabled, and then use the gform/post_render JavaScript event to disable the field.

First, we’ll add a CSS class called dgtlnk_readonly to our field, using the Gravity Forms interface.

Next, let’s add the following code in our JavaScript file.

document.addEventListener('gform/postRender', (event) => {
            const formId = event.detail.formId,
            form = gform.utils.getNode(`#gform_${formId}`, document, true);
            const textareas = Array.from(gform.utils.getNodes('.dgtlnk_readonly textarea', false, form, true));        
            textareas.forEach(textarea => {
                textarea.readOnly = true;
                textarea.disabled = true;
            });
            const inputs = Array.from(gform.utils.getNodes('.dgtlnk_readonly input', false, form, true)); 
            inputs.forEach(input => {
                input.readOnly = true;
                input.disabled = true;
            });
        });

During the gform/post_render event, this will add the disabled and readonly attributes to <input> and <textarea> fields that have our CSS class assigned to them.

Because of its extensive functionality and extendability, Gravity Forms remains one of the most popular WordPress form plugins.

If you have any questions or would like to implement functionality that the plugin does not provide out of the box, reach out to us and we would be more than happy to assist.