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.

In this snippet, it will look at any Hidden Field inside the form 1000 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: Yes, but avoid changing the name attribute for required fields like Email. WPForms relies on its default structure (wpforms[fields][{$field_id}]) for validation and submission. Overriding this can cause errors like validation failures or data-server-error.

Instead, use a custom data-* attribute. For example:

function wpf_field_properties_email( $properties, $field, $form_data ) {
  
    // Optional: Limit to a specific form ID
    if ( absint( $form_data[ 'id' ] ) !== 1000) {
        return $properties;
    }

    // Add a custom data attribute instead of modifying the name
    $properties['inputs']['primary']['attr']['data-custom-name'] = 'custom_name_email_field';

    return $properties;
}
add_filter( 'wpforms_field_properties_email', 'wpf_field_properties_email', 10, 3 );