Como Adicionar um Campo Filtrável a um Formulário para Uso Interno

Introdução

Gostaria de adicionar um campo filtrável ao seu formulário que seja apenas para uso interno? Poder filtrar suas entradas de forma rápida e fácil pode economizar muito tempo, mas você pode não querer que esse campo seja exibido em seu formulário. Neste tutorial, mostraremos exatamente o quão fácil é conseguir isso.

Em nosso exemplo, criaremos 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 de 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 a ele para que nossos usuários o preencham.

No entanto, também queremos adicionar um campo onde poderemos colocar nossa marcação posteriormente se o número de telefone tiver sido verificado. Para fazer isso, adicionaremos um campo de formulário de Texto de Linha Única.

Se precisar de ajuda para criar seu formulário, por favor, revise esta documentação.

Adicionando uma classe CSS ao campo filtrável

Como queremos que este campo seja apenas para uso interno e não queremos que ele seja exibido no formulário para nossos visitantes, adicionaremos uma classe CSS a este campo que podemos usar para ocultar este campo 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.

Este nome de classe CSS é uma classe padrão no WPForms, o CSS já está no lugar. Assim que você 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.

Criando a visualização de colunas

Para esta etapa, alteraremos a visualização das colunas para nossa tela de entrada. Para mais informações sobre como fazer isso, consulte esta documentação.

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

Agora, ao visualizar a tela de entradas, você verá todas as suas entradas para este formulário, incluindo o campo interno que foi adicionado acima.

Filtrando as entradas

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

Gostaria também 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.