How to Change Sublabels for the Name Field

Introduction

Would you like to change sublabels on your form Name fields? You can change the sublabels that appear below the name on your form.

In WPForms, the Name field can be displayed in three formats:

  • Simple (displays a single field, so no sublabels)
  • First Last
  • First Middle Last

In this tutorial, we’ll show you the basics of how you can change the sublabels using a PHP code snippet.

Creating the form

We’ll start by creating our form and adding the field which will include the Name field.

If you need help in creating your form, please check out this documentation.

Select format for Name field in WPForms

Adding the snippet

To change the sublabels on the address field, we’ll need to add this snippet to our site.

If you need any assistance in how and where to add snippets to your site, please check out this tutorial.

/**
 * Customize name field properties.
 *
 * @link   https://wpforms.com/developers/how-to-change-sublabels-for-the-name-field/
 */

function wpf_dev_name_field_properties( $properties, $field, $form_data ) {
	
	// Change sublabel values
	$properties[ 'inputs' ][ 'first' ][ 'sublabel' ][ 'value' ] = __( 'First Name', 'plugin-domain' );
	$properties[ 'inputs' ][ 'middle' ][ 'sublabel' ][ 'value' ] = __( 'Middle Initial', 'plugin-domain' );
	$properties[ 'inputs' ][ 'last' ][ 'sublabel' ][ 'value' ] = __( 'Last Name', 'plugin-domain' );

	return $properties;
}

add_filter( 'wpforms_field_properties_name' , 'wpf_dev_name_field_properties', 10, 3 );

This snippet will change all sublabels for all forms.

using this snippet you can now change sublabels on the name field

And that’s it! You’ve successfully changed the sublabels on the Name field! Would you like to change the required field symbol on the required fields? Take a look at our article on How to Change Required Field Indicator.

Filter Reference: wpforms_field_properties