Comment positionner la description du champ au-dessus du champ du formulaire

Aperçu

Souhaitez-vous positionner la description du champ au-dessus de vos champs de formulaire ? Ceci peut être facilement réalisé avec un petit extrait de code PHP ajouté à votre site. Ce tutoriel vous montrera comment changer la description de votre champ pour qu'elle apparaisse au-dessus de vos champs de formulaire.

Par défaut, WPForms placera toutes les descriptions de champ directement sous le champ de saisie du formulaire.

Configuration

Afin de déplacer ces descriptions au-dessus du champ de formulaire, vous devrez d'abord copier cet extrait sur votre site. Si vous avez besoin d'aide sur comment et où ajouter des extraits à votre site, consultez ce tutoriel.

/**
 * Move the field description above the form field.
 *
 * @link   https://wpforms.com/developers/how-to-position-the-field-description-above-the-form-field/
 */

function wpf_dev_field_properties( $properties, $field, $form_data ) {
    
    // Only process this snippet on form ID 225
    if ( absint( $form_data[ 'id' ] ) !== 225 ) {
        return $properties;
    } 
    
    {
        // Position the field description above the form field
        $properties[ 'description' ][ 'position' ] = 'before';
    }

    return $properties;
}
add_filter( 'wpforms_field_properties', 'wpf_dev_field_properties', 10, 3 );

Le code montré ci-dessus déplacera les descriptions au-dessus des champs de formulaire mais seulement si l'ID du formulaire est225. N'oubliez pas de changer l'ID du formulaire de 225 pour qu'il corresponde à votre propre ID de formulaire. Si vous avez besoin d'aide pour trouver votre ID de formulaire, veuillez consulter ce tutoriel.

Une fois que vous aurez ajouté cet extrait de code, vous verrez que les descriptions apparaîtront maintenant au-dessus des champs de formulaire.

Et voilà ! Vous avez maintenant déplacé avec succès les descriptions de champ sur votre formulaire pour qu'elles apparaissent au-dessus des champs de formulaire. Souhaitez-vous également apprendre à limiter le nombre de caractères pour le champ de texte de votre formulaire ? Jetez un œil à notre article sur Comment limiter le nombre de caractères pour un champ de texte.

Articles associés

Référence de filtre : wpforms_field_properties

FAQ

Q : J'ai ajouté l'extrait mais cela ne fonctionne toujours pas pour moi ?

R : Si vous avez ajouté l'extrait mais que vous ne voyez pas le changement, veuillez vider tout le cache du site et confirmer également que vous avez mis à jour l'extrait ci-dessus pour refléter l'ID du formulaire sur votre formulaire.

Q : Comment puis-je faire cela pour tous mes formulaires au lieu d'un seul ?

R : Si vous souhaitez cette fonctionnalité pour tous les formulaires, supprimez simplement l'appel à l'ID du formulaire. Ci-dessous un exemple de cet extrait.

/**
 * Move the field description above the form field.
 *
 * @link   https://wpforms.com/developers/how-to-position-the-field-description-above-the-form-field/
 */

function wpf_dev_field_properties( $properties, $field, $form_data ) {

        // Position the field description above the form field
        $properties[ 'description' ][ 'position' ] = 'before';

    return $properties;
}
add_filter( 'wpforms_field_properties', 'wpf_dev_field_properties', 10, 3 );