Resumo de IA
Gostaria de adicionar opções de ícone aos seus formulários? Usar ícones nos campos de Múltipla Escolha, Caixas de Seleção, Múltiplos Itens e Itens de Caixa de Seleção é uma maneira simples de aprimorar o apelo visual e a experiência do usuário do seu formulário.
Este tutorial mostrará como adicionar escolhas de ícone a campos existentes ou novos no WPForms.
Antes de começar, você precisará garantir que o WPForms esteja instalado e ativado em seu site WordPress e que você tenha verificado sua licença. Em seguida, você pode criar um novo formulário ou editar um existente para acessar o construtor de formulários.
Configurando Seu Formulário
Depois de abrir o construtor de formulários, você poderá adicionar escolhas de ícone a qualquer um dos seguintes tipos de campo:
- Múltipla Escolha
- Caixas de seleção
- Itens Múltiplos
- Itens de Caixa de Seleção
Para nosso exemplo, criaremos um formulário de contato simples que permite aos usuários escolher seu método de contato preferido, incluindo ligação telefônica, mensagem de texto ou e-mail.
Para começar, adicionaremos um campo de Múltipla Escolha ao nosso formulário clicando nele ou arrastando e soltando-o na área de visualização do formulário.
Em seguida, alteraremos os rótulos de nossas escolhas para incluir o seguinte: Ligação Telefônica, Mensagem de Texto e E-mail.
Observação: Deseja adicionar uma longa lista de opções ao seu formulário? Confira nosso guia para adicionar opções em massa para saber como adicionar várias opções de ícone ao seu formulário de uma vez, em vez de criar cada opção individualmente.
Habilitando Escolhas de Ícone
Assim que essa configuração básica estiver pronta, habilitaremos as escolhas de ícone ativando a opção Usar escolhas de ícone.
Se for a primeira vez que você configura escolhas de ícone, verá uma sobreposição com uma mensagem pedindo para baixar uma biblioteca de ícones. Baixar a biblioteca de ícones é uma etapa obrigatória que lhe dá acesso a mais de 2.000 ícones para usar em seus formulários.
Para prosseguir com o download, clique no botão Continuar.
Observação: O WPForms usa a versão mais recente da biblioteca de ícones Font Awesome para escolhas de ícone.
Em seguida, você verá outra sobreposição notificando que o download está em andamento. Para evitar qualquer interrupção durante a instalação, certifique-se de não fechar ou recarregar a janela do navegador.
Assim que a biblioteca de ícones for instalada com sucesso, clique no botão OK para salvar seu formulário e recarregar o construtor de formulários.
Selecionando Ícones
Agora que habilitamos as escolhas de ícone, ícones padrão são adicionados ao nosso formulário. Selecionaremos novos ícones para substituir os padrão clicando em cada ícone no lado esquerdo do construtor de formulários.
Em seguida, a modal Seletor de Ícones aparecerá. Aqui você pode navegar ou pesquisar o ícone perfeito para usar em seu formulário.
Vamos pesquisar um ícone de telefone digitando "telefone" na barra de pesquisa.
Os resultados da pesquisa exibirão todos os ícones que contêm "telefone" no nome do ícone. Vamos clicar no ícone de telefone para selecioná-lo como nossa primeira escolha de ícone.
Após selecionar um ícone do Seletor de Ícones, ele aparecerá no construtor de formulários.
Vá em frente e selecione outros ícones para usar nas opções restantes do seu formulário repetindo este processo.
Personalizando Escolhas de Ícone
Depois de selecionar os ícones que você deseja usar em seu formulário, é hora de personalizar a aparência deles. O WPForms facilita a personalização da cor, tamanho e estilo do ícone, diretamente do construtor de formulários. Abordaremos cada uma dessas opções abaixo.
Observação: As personalizações são aplicadas a todas as opções de ícone dentro do mesmo campo do formulário.
Cor do Ícone
Por padrão, a cor do ícone é definida como azul. Você pode selecionar facilmente a cor de ícone preferida clicando na opção Cor do Ícone e usando a ferramenta de seleção de cores.
A cor selecionada será aplicada a todas as opções de ícone para o campo em questão.
Observação: Se você estiver usando opções de ícone com o addon Formulários Conversacionais, observe que o esquema de cores que você selecionar para seu formulário conversacional substituirá a cor do ícone.
Tamanho do Ícone
Existem 3 opções de tamanho para as opções de ícone, incluindo Pequeno, Médio e Grande. Para alterar o tamanho, clique no menu suspenso Tamanho do Ícone e selecione o tamanho preferido.
Veja como as opções de tamanho se comparam no frontend:
O tamanho selecionado será aplicado a todas as opções de ícone para o campo em questão.
Estilo da Opção de Ícone
Existem 4 opções para estilizar as opções de ícone, incluindo Padrão, Moderno, Clássico e Nenhum. Para alterar o estilo do ícone, clique no menu suspenso Estilo da Opção de Ícone e selecione o estilo preferido.
O estilo de opção de ícone selecionado será aplicado a todas as opções de ícone para o campo em questão.
Vamos detalhar cada uma das opções de estilo disponíveis abaixo:
Padrão
O estilo Padrão adiciona uma borda arredondada, inclui uma caixa de seleção ou botão de rádio visível, tem um fundo e borda coloridos quando selecionado e exibe o rótulo da opção fora da borda.
Moderno
O estilo Moderno adiciona uma borda arredondada, exibe o rótulo da opção dentro da borda e tem uma sombra de caixa e borda colorida quando selecionado.
Clássico
O estilo Clássico adiciona uma borda quadrada e colorida quando selecionado. O rótulo da opção é exibido dentro da borda da opção selecionada.
Nenhum
Se você não quiser incluir nenhum estilo especial, selecione a opção Nenhum. Esta opção exibe uma caixa de seleção ou botão de rádio em uma única linha abaixo do ícone.
Selecionando um Layout de Opções
Para selecionar um layout de como as opções de ícone são exibidas em seu formulário, abra a aba Avançado no painel Opções de Campo.
Você pode escolher entre as seguintes 4 opções de layout para exibir as escolhas: Uma Coluna, Duas Colunas, Três Colunas e Em Linha. O layout que você selecionar determinará o número de colunas usadas para exibir as escolhas.
Vá em frente e clique no menu suspenso Layout da Escolha e selecione o layout preferido.
Veja como o formulário ficará no frontend do site:
Perguntas Frequentes
Abaixo estão algumas das principais perguntas que recebemos sobre o uso de opções de ícone.
Por que os ícones não estão sendo exibidos em meu formulário?
Se as opções de ícone que você adicionou ao seu formulário não estiverem sendo exibidas, provavelmente há um problema com a pasta que contém a biblioteca de ícones. Para corrigir esse problema, basta abrir seu formulário no construtor de formulários e seguir as instruções para reinstalar a biblioteca de ícones.
Por que os ícones não são exibidos em entradas, notificações por e-mail, entradas impressas, etc.?
Ícones são usados para aprimorar a aparência de um formulário e fornecer dicas visuais aos usuários, facilitando a conclusão rápida do formulário. No entanto, eles não devem ser usados como substitutos de rótulos ou descrições, pois a interpretação do significado de um ícone pode variar. Apenas o valor de um ícone selecionado é incluído em entradas e notificações por e-mail para comunicar efetivamente as informações enviadas através do seu formulário.
É isso! Agora você sabe como adicionar opções de ícone ao seu formulário.
Em seguida, você gostaria de adicionar conteúdo extra aos seus formulários? Certifique-se de conferir nosso guia sobre como usar o campo de Conteúdo para aprender a adicionar títulos, listas, mídia e muito mais aos seus formulários.