### [Comment ajouter un champ filtrable à un formulaire à usage interne](https://wpforms.com/developers/how-to-add-a-filterable-field-to-a-form-for-internal-use/)

**Publié le :** 4 novembre 2020
**Auteur :** Équipe éditoriale

**Extrait :** Ce tutoriel vous montrera comment ajouter un champ filtrable interne à vos formulaires à l'aide d'un peu de CSS. 

**Contenu :**

## Introduction

Souhaitez-vous ajouter à votre formulaire un champ filtrable destiné uniquement à un usage interne ? La possibilité de filtrer rapidement et facilement vos entrées peut vous faire gagner beaucoup de temps, mais vous ne souhaitez peut-être pas que ce champ s'affiche sur votre formulaire. Dans ce tutoriel, nous allons vous montrer à quel point il est facile d'y parvenir.

Dans notre exemple, nous allons créer un formulaire de génération de prospects. Une fois le numéro de téléphone vérifié, nous voulons pouvoir ajouter un indicateur à l'entrée afin de pouvoir la filtrer ultérieurement dans les rapports.

## Création du formulaire de génération de prospects

Notre première étape consistera à créer notre formulaire et à y ajouter les champs pertinents que nos utilisateurs devront remplir.

Cependant, nous souhaitons également ajouter un champ dans lequel nous pourrons placer notre indicateur ultérieurement si le numéro de téléphone a été vérifié. Pour ce faire, nous allons ajouter un champ de formulaire **Texte sur une seule ligne**.

![Ajoutez à votre formulaire un champ de texte que vous pourrez utiliser ultérieurement pour filtrer vos résultats](https://wpforms.com/wp-content/uploads/2020/11/wpforms-add-single-line-text-field.jpg)

Si vous avez besoin d'aide pour créer votre formulaire, [veuillez consulter cette documentation](https://wpforms.com/docs/creating-first-form/ « Comment créer votre premier formulaire »).

## Ajouter une classe CSS au champ filtrable

Comme nous voulons que ce champ soit réservé à un usage interne et que nous ne souhaitons pas qu’il s’affiche sur le formulaire pour nos visiteurs, nous allons ajouter une classe CSS à ce champ afin de pouvoir le masquer à l’aide de CSS lors d’une étape ultérieure.

Pour ajouter une classe CSS au champ, ouvrez l’onglet **Avancé** du champ dans le générateur de formulaires et ajoutez `wpforms-field-hidden` aux **Classes CSS**.

![Ajoutez votre classe CSS au champ du formulaire afin que nous puissions masquer ce champ de notre formulaire](https://wpforms.com/wp-content/uploads/2020/11/wpforms-add-css-class-to-hide-field.jpg)

Ce nom de classe CSS est une classe par défaut dans WPForms, le CSS est déjà en place. Une fois la classe ajoutée, le CSS **display:none;** sera automatiquement appliqué au champ.

Lorsque nos utilisateurs visiteront le site, ils ne pourront pas voir le champ filtrable à usage interne.

![Le champ ne s'affichera pour aucun visiteur lorsqu'ils rempliront le formulaire](https://wpforms.com/wp-content/uploads/2020/11/wpforms-frontend-form.jpg)

## Création de la vue en colonnes

Pour cette étape, nous allons modifier la vue en colonnes de notre écran de saisie. Pour plus d'informations sur la manière de procéder, [veuillez consulter cette documentation](https://wpforms.com/docs/how-to-customize-the-columns-for-form-entries/ « Comment personnaliser les colonnes pour les entrées de formulaire »).

Nous voulons que notre champ interne s'affiche lorsque vous consultez l'écran des entrées.

![Modifiez l'affichage des colonnes afin de pouvoir voir votre champ interne lorsque vous consultez la liste des entrées](https://wpforms.com/wp-content/uploads/2020/11/wpforms-setup-entry-columns.jpg)

Désormais, lorsque vous affichez l'écran des entrées, vous verrez toutes vos entrées pour ce formulaire, y compris le champ interne ajouté ci-dessus.

![vous pouvez désormais voir votre champ interne lorsque la page des entrées de ce formulaire s'affiche](https://wpforms.com/wp-content/uploads/2020/11/display-internal-field.jpg)

## Filtrer les entrées

Désormais, lorsque vous vous trouvez sur l'écran **Entrées** de votre formulaire, vous pouvez facilement filtrer ces entrées.

![Vous avez désormais ajouté avec succès un champ interne filtrable à votre formulaire.](https://wpforms.com/wp-content/uploads/2020/11/wpforms-filter-results.jpg)

Pour plus d'informations sur la recherche et le filtrage des entrées, [vous pouvez consulter cette documentation](https://wpforms.com/docs/how-to-search-and-filter-form-entries/ « Comment rechercher et filtrer les entrées d'un formulaire »).

Souhaitez-vous également utiliser le CSS pour modifier la couleur de votre bouton de soumission ? Consultez notre tutoriel sur [Comment modifier la couleur du bouton de soumission](https://wpforms.com/developers/how-to-change-the-submit-button-color/ « Comment modifier la couleur du bouton de soumission »).

**Catégories :** Tutoriels

**Mots-clés :** CSS

---