Comment modifier les sous-libellés du champ Mot de passe

Vous cherchez à personnaliser les sous-libellés associés à vos champs Mot de passe ? Avec quelques lignes de code PHP, vous pouvez facilement adapter ces libellés pour mieux correspondre à vos besoins.

Les champs de mot de passe incluent généralement des sous-libellés en dessous, surtout lorsque l'option Activer la confirmation du mot de passe est activée. Cette fonctionnalité garantit que les utilisateurs confirment leur mot de passe en le saisissant deux fois. Cependant, les sous-libellés par défaut ne correspondent pas toujours parfaitement à votre message ou à votre image de marque souhaités.

Dans ce tutoriel, nous vous montrerons comment utiliser PHP pour modifier le texte de ces sous-libellés.

Création du formulaire

Tout d'abord, nous allons créer notre formulaire et ajouter nos champs. Nous ajouterons également le champ de formulaire Mot de passe et activerons l'option Activer la confirmation du mot de passe.

Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation.

Modification des sous-libellés du mot de passe

Afin de modifier le texte qui apparaît sous le champ de formulaire Mot de passe, nous devrons ajouter cet extrait de code à notre site.

Si vous avez besoin d'aide pour ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.

/**
 * Change the sublabels for the Password field.
 *
 * @link https://wpforms.com/developers/how-to-change-the-password-field-sublabels/
 */

function wpf_dev_password_field_properties( $properties, $field, $form_data ) {
      
    // Change sublabel values on the primary password field
    $properties[ 'inputs' ][ 'primary' ][ 'sublabel' ][ 'value' ] = __( 'Please enter a password that you will use to sign on to your account.', 'your-text-domain' );
	
	// Change the sublabel values on the secondary password field
    $properties[ 'inputs' ][ 'secondary' ][ 'sublabel' ][ 'value' ] = __( 'Please re-enter that password again just for confirmation.', 'your-text-domain' );
  
    return $properties;
}
add_filter( 'wpforms_field_properties_password' , 'wpf_dev_password_field_properties', 10, 3 );

Et c'est tout ce dont vous avez besoin pour modifier les sous-libellés. Souhaitez-vous connecter automatiquement les utilisateurs après qu'ils aient terminé le processus d'inscription ? Jetez un œil à notre tutoriel sur Comment connecter automatiquement les utilisateurs après l'inscription.

Filtre de référence

wpforms_field_properties

FAQ

Q : Puis-je modifier cela pour un seul formulaire ?

R : Absolument, si vous souhaitez uniquement modifier ces sous-libellés pour un formulaire particulier, utilisez cet extrait de code à la place et n'oubliez pas de mettre à jour l'ID du formulaire 123 pour qu'il corresponde à votre propre ID de formulaire. Si vous avez besoin d'aide pour trouver votre ID de formulaire, veuillez consulter ce guide utile.

/**
 * Change the sublabels for the Password field.
 *
 * @link https://wpforms.com/developers/how-to-change-the-password-field-sublabels/
 */

function wpf_dev_password_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 on the primary password field
    $properties[ 'inputs' ][ 'primary' ][ 'sublabel' ][ 'value' ] = __( 'Please enter a password that you will use to sign on to your account.', 'your-text-domain' );
	
	// Change the sublabel values on the secondary password field
    $properties[ 'inputs' ][ 'secondary' ][ 'sublabel' ][ 'value' ] = __( 'Please re-enter that password again just for confirmation.', 'your-text-domain' );
  
    return $properties;
}
add_filter( 'wpforms_field_properties_password' , 'wpf_dev_password_field_properties', 10, 3 );

Comme vous pouvez le voir dans l'extrait de code, tout ce que nous avons à faire est d'ajouter la vérification de l'ID du formulaire avec if ( absint( $form_data[ 'id' ] ) !== 123 ) { return $properties; } , le reste de l'extrait de code reste identique à l'exemple avec tous les formulaires.