How to Change the Required Field Indicator

Overview

Do you want to change the required field indicator on your WPForms? If you’d like to use a different string of text or even a symbol, you can easily do this with PHP. This article will show you how to use PHP to change this text for the required fields of your form.

When a field is marked as required in WPForms, by default, a red asterisk will be displayed at the end of the field label as you can see in this screenshot below.

The required field indicator is by default a red asterisk

Implementation Options

Simply add the code snippet below to your site.

Single Language

/**
 * Modify the required field indicator
 *
 * @link https://wpforms.com/developers/how-to-change-required-field-indicator/
 *
 */
function wpf_dev_required_indicator( $text ) {
	return ' <span class="wpforms-required-label">(Required)</span>';
}
add_filter( 'wpforms_get_field_required_label', 'wpf_dev_required_indicator' );

The required field is now showing the text rather than the asterisk

Multi-Lingual

If you’re running a multi-language site and need to make any text snippets you add are translatable with a plugin such as WPML or Polylang, please use the code snippet shown below.

/**
 * Modify the required field indicator for multi-lingual sites
 *
 * @link https://wpforms.com/developers/how-to-change-required-field-indicator/
 *
 */
function wpf_dev_required_indicator( $text ) {
	return ' <span class="wpforms-required-label">' . __('(Required)', 'wpforms') . '</span>';
}
add_filter( 'wpforms_get_field_required_label', 'wpf_dev_required_indicator' );

And that’s it! You’ve successfully changed the look of your required fields! Would you like to style the placeholder text on your form fields? Take a look at our article on How to Style Placeholder Text for Form Fields.

Filter Reference: wpforms_get_field_required_label

FAQ

Q: How do I just change the color of the asterisk symbol?

A: To do this, just add this CSS to your site.

.wpforms-form .wpforms-required-label {
color: #1e73be !important;
}

Just remember to change the #1e73be to match your own color choice.