### [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:** Equipa Editorial

**Excerto:** Este tutorial irá mostrar-lhe como adicionar um campo filtrável interno aos seus formulários utilizando um pouco de CSS. 

**Conteúdo:**

## Introdução

Gostaria de adicionar um campo filtrável ao seu formulário que seja apenas para uso interno? A capacidade de filtrar rápida e facilmente as suas entradas pode poupar muito tempo, mas talvez não queira que este campo seja exibido no seu formulário. Neste tutorial, vamos mostrar-lhe exatamente como é fácil conseguir 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 à entrada para que possa ser filtrada dos relatórios mais tarde.

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

O nosso primeiro passo será criar o nosso formulário e adicionar os campos relevantes para que os nossos utilizadores o preencham.

No entanto, também queremos adicionar um campo onde possamos colocar a nossa marca mais tarde, caso o número de telefone tenha sido verificado. Para tal, vamos adicionar um campo de formulário **Texto de Linha Única**.

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

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

## Adicionar uma classe CSS ao campo filtrável

Uma vez que queremos que este campo seja apenas interno e não queremos que seja apresentado no formulário aos nossos visitantes, vamos adicionar uma classe CSS a este campo que poderemos utilizar para o ocultar com CSS numa etapa posterior.

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

![Adicione a sua classe CSS ao campo do formulário para que possamos ocultar este 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 predefinida no WPForms, o CSS já está implementado. Assim que adicionar a classe, o CSS para **display:none;** no campo será aplicado automaticamente.

Quando os nossos utilizadores visitarem o site, não conseguirão ver o campo filtrável de uso interno.

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

## Criar a visualização das colunas

Nesta etapa, vamos alterar a visualização das colunas no nosso ecrã de introdução de dados. Para mais informações sobre como fazer isto, [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 o nosso campo interno seja exibido quando visualiza o ecrã de entradas.

![altere a sua visualização de colunas para que possa ver o 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 o ecrã de entradas, verá todas as suas entradas para este formulário, incluindo o campo interno que foi adicionado acima.

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

## Filtrar as entradas

Agora, quando estiver no ecrã **Entradas** do seu formulário, pode filtrar facilmente estas entradas.

![Conseguiu agora 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 mais informações sobre como pesquisar e filtrar entradas, [pode consultar 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 também CSS para alterar a cor do seu botão de envio? Consulte o 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

**Etiquetas:** CSS

---