How to Change Sublabels for the Name Field

Overview

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 this tutorial, we’ll show you the basics of how you can change the sublabels using a PHP code snippet.

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

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

Select format for Name field in WPForms

When showing more than one subfield, sublabels will be displayed to show the user what they should enter for each.

Name field in WPForms with sublabels

Implementation Options

If you wanted to modify the text that shows under the name fields when using First Last or First Middle Last, you can easily do this by adding some PHP code to your site.

1) Single Language

The code below can be used to modify the default First, Middle, and Last subfield labels. Just replace the text between each set of single quotes with the new text you’d like to display.

/**
 * Customize name field properties.
 *
 * @link   https://wpforms.com/developers/how-to-change-sublabels-for-the-name-field/
 *
 * @param  array $properties
 * @param  array $field
 * @param  array $form_data
 * @return array
 */
function wpf_dev_name_field_properties( $properties, $field, $form_data ) {
	
	// Change sublabel values
	$properties['inputs']['first']['sublabel']['value'] = 'First Name';
	$properties['inputs']['middle']['sublabel']['value'] = 'Middle Initial';
	$properties['inputs']['last']['sublabel']['value'] = 'Last Name';

	return $properties;
}
add_filter( 'wpforms_field_properties_name' , 'wpf_dev_name_field_properties', 10, 3 );

2) Multi-Lingual

/**
 * Customize name field properties.
 *
 * @link   https://wpforms.com/developers/how-to-change-sublabels-for-the-name-field/
 *
 * @param  array $properties
 * @param  array $field
 * @param  array $form_data
 * @return array
 */
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 );

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.