Comment ajouter un champ filtrable à un formulaire pour un usage interne

Introduction

Souhaitez-vous ajouter un champ filtrable à votre formulaire qui est réservé à un usage interne uniquement ? 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 qu'elle puisse être filtrée des rapports ultérieurement.

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 pour que nos utilisateurs puissent les remplir.

Cependant, nous voulons également ajouter un champ dans lequel nous pourrons plus tard placer notre indicateur 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.

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

Ajout d'une classe CSS au champ filtrable

Étant donné que nous voulons que ce champ soit uniquement interne et que nous ne voulons pas qu'il s'affiche sur le formulaire pour nos visiteurs, nous allons ajouter une classe CSS à ce champ que nous pourrons utiliser pour masquer ce champ avec CSS dans une étape ultérieure.

Pour ajouter une classe CSS au champ, ouvrez l'onglet Avancé du champ dans le constructeur de formulaire et ajoutez wpforms-field-hidden aux Classes CSS.

Ce nom de classe CSS est une classe par défaut dans WPForms, le CSS est déjà en place. Une fois que vous ajoutez la classe, le CSS pour display:none; sur le champ sera automatiquement appliqué.

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

Création de la vue des colonnes

Pour cette étape, nous allons modifier la vue des colonnes de notre écran d'entrées. Pour plus d'informations sur la façon de procéder, veuillez consulter cette documentation.

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

Maintenant, lorsque vous visualisez l'écran des entrées, vous verrez toutes vos entrées pour ce formulaire, y compris le champ interne qui a été ajouté ci-dessus.

Filtrage des entrées

Maintenant, lorsque vous êtes sur l'écran Entrées de votre formulaire, vous pouvez facilement filtrer ces entrées.

Souhaitez-vous également utiliser CSS pour changer la couleur de votre bouton de soumission ? Consultez notre tutoriel sur Comment changer la couleur du bouton de soumission.