Comment changer l'indicateur de champ obligatoire

Vous souhaitez modifier l'indicateur de champ obligatoire sur vos WPForms ? Si vous souhaitez utiliser une chaîne de texte différente ou même un symbole, vous pouvez facilement le faire avec PHP. Cet article vous montrera comment utiliser PHP pour modifier ce texte pour les champs obligatoires de votre formulaire.

Lorsqu'un champ est marqué comme obligatoire dans WPForms, par défaut, un astérisque rouge s'affiche à la fin de l'étiquette du champ, comme vous pouvez le voir dans la capture d'écran ci-dessous.

Création de votre formulaire

Pour commencer, nous allons créer un nouveau formulaire et ajouter nos champs. Au moins un de ces champs devra être défini comme champ obligatoire.

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

Personnalisation de l'indicateur de champ obligatoire

Ensuite, nous allons 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.

/**
 * 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)', 'wpforms' ) . '</span>';
}

add_filter( 'wpforms_get_field_required_label', 'wpf_dev_required_indicator', 10, 1 );

Vous changerez simplement le texte (Obligatoire) pour qu'il corresponde au texte que vous souhaitez afficher.

Et voilà ! Vous avez modifié avec succès l'apparence de vos champs obligatoires ! Souhaitez-vous styliser le texte d'espace réservé sur vos champs de formulaire ? Consultez notre article sur Comment styliser le texte d'espace réservé pour les champs de formulaire.

Filtre de référence

wpforms_get_field_required_label

FAQ

Q : Comment puis-je simplement changer la couleur du symbole astérisque ?

R : Pour ce faire, ajoutez simplement ce CSS à votre site.

Si vous avez besoin d'aide pour ajouter du CSS à votre site, veuillez consulter ce tutoriel.

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

Q: Pourquoi le snippet ne fonctionne-t-il pas pour moi ?

R : Si vous avez vidé le cache de votre site et que vous ne voyez toujours aucun changement, essayez de changer la priorité de votre fonction. Dans un extrait de code, la priorité fait référence à l'ordre dans lequel les tâches ou les lignes de code doivent être exécutées. Tout comme dans une liste de tâches, certaines tâches sont plus importantes et doivent être effectuées avant d'autres. Ainsi, dans cet extrait de code particulier, notre priorité est définie sur 10. Si vous remarquez que le changement ne prend pas effet, essayez de changer ce nombre pour un nombre plus élevé pour voir si cela aide.

Dans cet exemple, nous définissons le numéro de priorité sur 20.

/**
 * 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)', 'wpforms' ) . '</span>';
}

add_filter( 'wpforms_get_field_required_label', 'wpf_dev_required_indicator', 20, 1 );