How to Change the Name Attribute of a Hidden Field

Introduction

Do you have a need to change the name attribute of a hidden field in your form? By default, WPForms assigns a name to each field in your form that uses a standard format such as wpforms[fields][1]. This allows each field in your form to remain unique to that specific field ID in your form.

For example, in this form, we added a Hidden Field and the default name assigned is wpforms[fields][25].

If you would have a need to change this name so that you can use JavaScript or CSS to target these specific fields, you can easily change this with a small PHP filter and we’ll show you how!

Creating the form

We’re going to begin by creating the form and adding our fields. If you need help with how to create a form, check out this helpful documentation.

For this purpose of this documentation, we’re wanting to change the name on the Hidden Field so we’ll include adding one of these fields to our form for internal use.

Adding the snippet

Now it’s time to add the snippet to your site. If you need any assistance with how and where to add snippets to your site, please review this useful guide for further details.

/**
 * Custom function to change the name attribute of hidden fields in any form.
 *
 * @link   https://wpforms.com/developers/how-to-change-the-name-attribute-of-a-hidden-field/
 */

function wpf_field_properties_hidden( $properties, $field, $form_data ) {
  
    // Optional, you can limit to specific forms. Below, we restrict output to only the form #3658.
    if ( absint( $form_data[ 'id' ] ) !== 3658 ) {
        return;
    }
 
    // Look for the name attribute and set the name attribute to custom_name_hidden_field
    $properties[ 'inputs' ][ 'primary' ][ 'attr' ][ 'name' ] = 'custom_name_hidden_field';

    return $properties;
}
add_filter( 'wpforms_field_properties_hidden', 'wpf_field_properties_hidden', 10, 3 );

In this snippet, it will look at any Hidden Field inside the form 3658 and update the name attribute to be custom_name_hidden_field.

You’ll need to update this form ID to match your own, or you can remove it completely to have it applied to all of these types of fields for all your forms.

Now when you inspect the mark-up on the page, you’ll see the name has changed.

And that’s all you need to successfully change this attribute. Would you like to also change the sublabels on the Password field? Take a look at our tutorial on How to Change the Password Field Sublabels.

Related

Filter Reference: wpforms_field_properties

FAQ

Q: Can I use this for other field types?

A: Absolutely! The wpforms_field_properties filter is applied to an array for specific form field properties. Using this filter will change every form field.

For example, if you only wanted to change the name attribute for the Email field, you would use wpforms_field_properties_email instead of wpforms_field_properties_hidden in the snippet above.