### [Como adicionar um campo filtrável a um formulário para uso interno](https://wpforms.com/developers/how-to-add-a-filterable-field-to-a-form-for-internal-use/)

**Publicado:** 4 de novembro de 2020
**Autor:** Equipe Editorial

**Trecho:** Este tutorial mostrará como adicionar um campo filtrável interno aos seus formulários usando um pouco de CSS. 

**Conteúdo:**

## Introdução

Você gostaria de adicionar um campo filtrável ao seu formulário que seja apenas para uso interno? Ser capaz de filtrar suas entradas de forma rápida e fácil pode economizar muito tempo, mas talvez você não queira que esse campo seja exibido no seu formulário. Neste tutorial, vamos mostrar exatamente como é fácil fazer isso.

No nosso exemplo, vamos criar um formulário de geração de leads. Assim que o número de telefone for verificado, queremos poder adicionar uma marcação à entrada para que ela possa ser filtrada dos relatórios posteriormente.

## Criando o formulário de geração de leads

Nosso primeiro passo será criar nosso formulário e adicionar os campos relevantes para que nossos usuários preencham.

No entanto, também queremos adicionar um campo no qual poderemos colocar nossa marcação posteriormente, caso o número de telefone tenha sido verificado. Para isso, vamos adicionar um campo de formulário do tipo **Texto de Linha Única**.

![Adicione um campo de texto ao seu formulário que você poderá usar posteriormente para filtrar seus resultados](https://wpforms.com/wp-content/uploads/2020/11/wpforms-add-single-line-text-field.jpg)

Se precisar de ajuda para criar seu formulário, [consulte esta documentação](https://wpforms.com/docs/creating-first-form/ "Como criar seu primeiro formulário").

## Adicionando uma classe CSS ao campo filtrável

Como queremos que este campo seja apenas interno e não queremos que ele seja exibido no formulário para nossos visitantes, vamos adicionar uma classe CSS a este campo que poderemos usar para ocultá-lo com CSS em uma etapa posterior.

Para adicionar uma classe CSS ao campo, abra a guia **Avançado** do campo no construtor de formulários e adicione `wpforms-field-hidden` às **Classes CSS**.

![Adicione sua classe CSS ao campo do formulário para que possamos ocultar esse campo do nosso formulário](https://wpforms.com/wp-content/uploads/2020/11/wpforms-add-css-class-to-hide-field.jpg)

Este nome de classe CSS é uma classe padrão no WPForms; o CSS já está configurado. Depois de adicionar a classe, o CSS para **display:none;** no campo será aplicado automaticamente.

Quando nossos usuários visitarem o site, eles não poderão ver o campo filtrável de uso interno.

![O campo não será exibido para nenhum visitante quando eles preencherem o formulário](https://wpforms.com/wp-content/uploads/2020/11/wpforms-frontend-form.jpg)

## Criando a visualização de colunas

Nesta etapa, vamos alterar a visualização de colunas da nossa tela de entrada. Para mais informações sobre como fazer isso, [consulte esta documentação](https://wpforms.com/docs/how-to-customize-the-columns-for-form-entries/ "Como personalizar as colunas para entradas de formulário").

Queremos que nosso campo interno seja exibido quando você visualizar a tela de entradas.

![altere sua visualização de colunas para que você possa ver seu campo interno ao visualizar a lista de entradas](https://wpforms.com/wp-content/uploads/2020/11/wpforms-setup-entry-columns.jpg)

Agora, ao visualizar a tela de entradas, você verá todas as entradas deste formulário, incluindo o campo interno adicionado acima.

![agora você pode ver seu campo interno quando a página de entradas deste formulário é carregada](https://wpforms.com/wp-content/uploads/2020/11/display-internal-field.jpg)

## Filtrando as entradas

Agora, quando você estiver na tela **Entradas** do seu formulário, poderá filtrar facilmente essas entradas.

![Você acabou de adicionar com sucesso um campo interno filtrável ao seu formulário.](https://wpforms.com/wp-content/uploads/2020/11/wpforms-filter-results.jpg)

Para obter mais informações sobre como pesquisar e filtrar entradas, [consulte esta documentação](https://wpforms.com/docs/how-to-search-and-filter-form-entries/ "Como pesquisar e filtrar entradas de formulário").

Gostaria de usar CSS para alterar a cor do seu botão de envio? Acesse nosso tutorial sobre [Como alterar a cor do botão de envio](https://wpforms.com/developers/how-to-change-the-submit-button-color/ "Como alterar a cor do botão de envio").

**Categorias:** Tutoriais

**Tags:** CSS

---