Resumo de IA
Gostaria de adicionar opções de ícones aos seus formulários? Utilizar ícones nos campos de Múltipla Escolha, Caixas de Seleção, Múltiplos Itens e Itens de Caixa de Seleção é uma forma simples de melhorar o apelo visual e a experiência do utilizador do seu formulário.
Este tutorial mostrar-lhe-á como adicionar escolhas de ícones a campos existentes ou novos no WPForms.
Antes de começar, você precisará garantir que o WPForms esteja instalado e ativado no 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 aceder ao construtor de formulários.
Configurar o Seu Formulário
Assim que abrir o construtor de formulários, poderá adicionar escolhas de ícones a qualquer um dos seguintes tipos de campo:
- Escolha múltipla
- Caixas de seleção
- Itens Múltiplos
- Itens de Caixa de Seleção
Para o nosso exemplo, criaremos um formulário de contacto simples que permite aos utilizadores escolher o seu método de contacto preferido, incluindo chamada 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-o e soltando-o na área de pré-visualização do formulário.
Em seguida, alteraremos os rótulos das nossas escolhas para incluir o seguinte: Chamada Telefónica, Mensagem de Texto e E-mail.
Nota: Pretende adicionar uma longa lista de escolhas ao seu formulário? Consulte o nosso guia para adicionar escolhas em massa para saber como adicionar várias escolhas de ícones ao seu formulário de uma só vez, em vez de criar cada escolha individualmente.
Ativar Escolhas de Ícones
Assim que esta configuração básica estiver pronta, ativaremos as escolhas de ícones ativando a opção Utilizar escolhas de ícones.
Se for a primeira vez que configura escolhas de ícones, verá uma sobreposição com uma mensagem a pedir para descarregar uma biblioteca de ícones. Descarregar a biblioteca de ícones é um passo obrigatório que lhe concede acesso a mais de 2.000 ícones para usar nos seus formulários.
Para prosseguir com o download, clique no botão Continuar.
Nota: O WPForms utiliza a versão mais recente da biblioteca de ícones Font Awesome para escolhas de ícones.
Em seguida, verá outra sobreposição a notificá-lo que o download está em curso. Para evitar qualquer interrupção durante a instalação, certifique-se de que não fecha nem recarrega a janela do navegador.
Assim que a biblioteca de ícones for instalada com sucesso, clique no botão OK para guardar o seu formulário e recarregar o construtor de formulários.
Selecionar Ícones
Agora que ativámos as escolhas de ícones, ícones predefinidos foram adicionados ao nosso formulário. Selecionaremos novos ícones para substituir os predefinidos clicando em cada ícone no lado esquerdo do construtor de formulários.
Em seguida, aparecerá a janela modal do Seletor de Ícones. Aqui pode navegar ou pesquisar o ícone perfeito para usar no seu formulário.
Vamos procurar 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 o selecionar como a nossa primeira escolha de ícone.
Após selecionar um ícone do Seletor de Ícones, ele aparecerá no construtor de formulários.
Prossiga e selecione outros ícones para usar nas opções restantes do seu formulário repetindo este processo.
Personalizar Escolhas de Ícones
Depois de selecionar os ícones que deseja usar no 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.
Nota: As personalizações são aplicadas a todas as escolhas de ícones dentro do mesmo campo do formulário.
Cor do Ícone
Por padrão, a cor do ícone está definida como azul. Você pode facilmente selecionar sua 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 escolhas de ícones para o campo em questão.
Nota: Se estiver a usar escolhas de ícones com o complemento Formulários Conversacionais, tenha em atenção que o esquema de cores que selecionar para o seu formulário conversacional substituirá a cor do ícone.
Tamanho do Ícone
Existem 3 opções de tamanho para as escolhas de ícones, 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 escolhas de ícones para o campo em questão.
Estilo da Escolha de Ícone
Existem 4 opções para estilizar as escolhas de ícones, incluindo Padrão, Moderno, Clássico e Nenhum. Para alterar o estilo do ícone, clique no menu suspenso Estilo da Escolha de Ícone e selecione o estilo preferido.
O estilo de escolha de ícone selecionado será aplicado a todas as escolhas de ícones para o campo em questão.
Vamos analisar 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 escolha fora da borda.
Moderno
O estilo Moderno adiciona uma borda arredondada, exibe o rótulo da escolha 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 escolha é exibido dentro da borda da escolha selecionada.
Nenhum
Se 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.
Selecionar um Layout de Escolha
Para selecionar um layout de como as escolhas de ícones são exibidas no seu formulário, abra a aba Avançado dentro do 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.
Prossiga 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 perguntas mais frequentes que recebemos sobre a utilização de escolhas de ícones.
Porque é que os ícones não estão a ser exibidos no meu formulário?
Se as escolhas de ícones que adicionou ao seu formulário não estiverem a ser exibidas, é provável que haja um problema com a pasta que contém a biblioteca de ícones. Para resolver este problema, basta abrir o seu formulário no construtor de formulários e seguir as instruções para reinstalar a biblioteca de ícones.
Porque é que os ícones não são exibidos nas entradas, notificações por e-mail, entradas impressas, etc.?
Os ícones são usados para realçar a aparência de um formulário e fornecer pistas visuais aos utilizadores, tornando mais fácil para eles preencherem o formulário rapidamente. No entanto, não devem ser considerados 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 nas entradas e notificações por e-mail para comunicar eficazmente as informações enviadas através do seu formulário.
É tudo! Agora sabe como adicionar escolhas de ícones ao seu formulário.
Em seguida, gostaria de adicionar conteúdo extra aos seus formulários? Certifique-se de consultar o nosso guia sobre como usar o campo de Conteúdo para aprender a adicionar títulos, listas, multimédia e muito mais aos seus formulários.