Introduction
Would you like to change sublabels for the Email field on your forms? You can easily change this with a small PHP snippet.
In WPForms when you enable the Email Confirmation box on the Email form field, sublabels are automatically added below the Email fields with default text. In this tutorial, we’ll show you the basics of how you can change the sublabels using a PHP code snippet.
Creating the form
First, we’ll create a new form and add our form fields. When adding the Email field, be sure to toggle the Enable Email Confirmation.
If you need any help in creating your form, please review this documentation.
Adding the snippet
It’s now time to add the snippet to your site.
If you’re not sure where or how to add snippets to your site, please review this tutorial.
/**
* Customize email field properties.
*
* @link https://wpforms.com/developers/how-to-change-sublabels-for-the-email-field/
*/
function wpf_dev_email_field_properties( $properties, $field, $form_data ) {
// Change sublabel values
$properties[ 'inputs' ][ 'primary' ][ 'sublabel' ][ 'value' ] = __( 'Enter Your Email', 'plugin-domain' );
$properties[ 'inputs' ][ 'secondary' ][ 'sublabel' ][ 'value' ] = __( 'To confirm, re-enter your email address here', 'plugin-domain' );
return $properties;
}
add_filter( 'wpforms_field_properties_email' , 'wpf_dev_email_field_properties', 10, 3 );
And that’s all you need to change the sublabels on the Email field! Would you like to change the sublabels for the Name field as well? Take a look at our article on How to Change Sublabels for the Name Field.
Related
Filter Reference: wpforms_field_properties
FAQ
Q: Can I change these for only one form?
A: Absolutely, if you only wish to change these sublabels for a particular form, use this snippet instead and remember to update the form ID 123 to match your own form ID. If you need help finding your form ID, please review this helpful guide.
/**
* Customize email field properties.
*
* @link https://wpforms.com/developers/how-to-change-sublabels-for-the-email-field/
*/
function wpf_dev_email_field_properties( $properties, $field, $form_data ) {
// Only process this snippet on the form ID 123
if ( absint( $form_data[ 'id' ] ) !== 123 ) {
return $properties;
}
// Change sublabel values
$properties[ 'inputs' ][ 'primary' ][ 'sublabel' ][ 'value' ] = __( 'Enter Your Email', 'plugin-domain' );
$properties[ 'inputs' ][ 'secondary' ][ 'sublabel' ][ 'value' ] = __( 'To confirm, re-enter your email address here', 'plugin-domain' );
return $properties;
}
add_filter( 'wpforms_field_properties_email' , 'wpf_dev_email_field_properties', 10, 3 );
As you can see in the snippet, all we need to do is add in the check for the form ID with if ( absint( $form_data[ 'id' ] ) !== 123 ) { return $properties; } , the rest of the snippet remains the exact same as the example with all forms.