Gravity Forms Default Value and Caching

I’m a big fan of the Gravity Forms Form builder WordPress plugin. I came across an interesting issue on a project and I wanted to make some notes as a warning for others (and myself) in the future.

The Gravity Forms form was setup to capture the HTTP User Agent in a form field.

This results in the following hidden HTML input tag being added to the page, where the User Agent of the browser I’m using to visit the page is Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

<input name="input_2" id="input_3_2" type="text" value="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36" class="medium" aria-invalid="false">

Now, when the form is submitted, I have the HTTP User Agent as one of my entries*.

* Gravity Forms captures HTTP User Agent by Default

Gravity Forms already captures HTTP User Agent as part of the form meta data. In this particular project, we wanted the HTTP User Agent captured as a separate field.

Caching

The problem arises when you add full page caching. When the page with the form is stored in cache, it records all of the default values in that cached page. This includes my field with the User Agent.

If I’m the first person to visit the page after the cache has been cleared, the cached version of the page will include my User Agent. When the next visitor, from another computer (with possibly another HTTP User Agent), submits the form, they will still have my HTTP User Agent address in this field. This bleeding over of information will occur with any default values set in the form.

In general, avoid using default values on Gravity Forms fields.

If you absolutely must use a default value, either populate the default value using JavaScript or add a caching exception to the page with the the form.

A Better Way to Capture Value on the Server

As mentioned, populating the default value with JavaScript or turning off page caching on the form page, will allow you to capture the values you need. In my opinion, an even better approach is to capture the value on submission with something like the following.

// Note: This filter ONLY applies to form 12 due to the "_12" on the hook name.
add_action( 'gform_pre_submission_12', 'fe_add_user_agent_to_gf' );
function fe_add_user_agent_to_gf( $form ) {
        // Truncate user agent to 256 characters.
        $user_agent = substr( $_SERVER['HTTP_USER_AGENT'], 0, 256 );
        $_POST['input_2'] = sanitize_text_field( $user_agent );
}

Sal Ferrarello (@salcode)

Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.