Resumo de IA
Já se perguntou se poderia permitir que os utilizadores selecionassem uma imagem no seu formulário WordPress em vez de apenas texto?
Vamos encarar. Todos nós somos naturalmente atraídos por elementos interativos e visuais. Um formulário apenas com texto é funcionalmente bom, mas um formulário com imagens selecionáveis traduz-se numa experiência de utilizador MUITO melhor.
E sabe que mais? Adicionar imagens a botões de rádio num formulário WordPress é, na verdade, bastante fácil de fazer, como lhe vou mostrar neste artigo.
Como Adicionar uma Imagem ao Lado dos Botões de Rádio em Formulários WordPress
O WPForms torna super simples adicionar imagens ou ícones aos seus botões de rádio de Escolha Múltipla ou aos seus campos de Caixas de Seleção. Aqui estão os passos que terá de seguir:
Se preferir instruções escritas, continue a ler abaixo.
Passo 1: Criar um Formulário WordPress Simples
A primeira coisa que precisará de fazer é instalar e ativar o plugin WPForms. Para mais detalhes, consulte este guia passo a passo sobre como instalar um plugin no WordPress.
Depois de ter instalado com sucesso o WPForms no seu site, pode começar a criar o seu formulário abrindo o seu painel WordPress e navegando para WPForms » Adicionar Novo.
Depois disso, pode começar por dar um nome ao seu formulário e depois escolher um modelo. Para este exemplo, usarei o modelo Formulário de Contacto Simples, que é um dos mais de 2.100 modelos de formulários WordPress disponíveis.
Assim que selecionar um modelo, ele será carregado dentro do construtor de formulários.
Também pode ver o nosso tutorial sobre como criar um formulário de contacto simples como exemplo para começar.
Passo 2: Personalizar o Seu Formulário WordPress
O modelo Formulário de Contacto Simples vem com os seguintes campos de formulário padrão:
- Nome
- Comentário ou Mensagem
No nosso exemplo, adicionaremos um campo de formulário de Escolha Múltipla ao nosso formulário de contacto simples e alteraremos o rótulo e as escolhas para perguntar por que o utilizador nos está a contactar.
Pode adicionar campos adicionais ao seu formulário arrastando-os do painel esquerdo para o painel direito.
Em seguida, clique no campo para fazer quaisquer alterações. Também pode clicar num campo de formulário e arrastá-lo para reorganizar a ordem dos campos no seu formulário de contacto.
Pode adicionar imagens ao lado dos campos de formulário de Escolha Múltipla e Itens Múltiplos, que são botões de rádio, bem como dos campos de formulário de Caixas de Seleção e Itens de Caixa de Seleção.
Agora é hora de adicionar as imagens ao lado de cada botão de rádio.
Passo 3: Adicionar Imagens aos Botões de Rádio
Para adicionar uma imagem aos botões de rádio do seu formulário, abra as Opções de Campo para o seu campo de Escolhas Múltiplas e, em seguida, ative o alternador Usar escolhas de imagem.
Após ativar as Escolhas de Imagem, pode carregar uma imagem para cada escolha no seu campo.
Para adicionar uma imagem, clique no botão Carregar Imagem. Isto abrirá a sua Biblioteca de Média do WordPress para que possa carregar uma nova imagem para o WordPress ou escolher entre as suas existentes.
Adicionar Ícones às Escolhas de Botões de Rádio
Dependendo do seu formulário, pode fazer mais sentido usar escolhas de ícones em vez de escolhas de imagens. Pode facilmente ativar esta opção da mesma forma que fez com as escolhas de imagens, selecionando Usar escolhas de ícones no painel Opções de Campo.
O WPForms utiliza uma extensa biblioteca de ícones prontos a usar, pelo que não precisa de os carregar. Pode simplesmente selecionar o ícone de que necessita entre as opções disponíveis.
Para mais detalhes, consulte o nosso guia sobre como usar escolhas de ícones no WPForms.
Passo 4: Personalizar as Suas Escolhas de Imagem
O WPForms torna a personalização das suas escolhas de imagem super simples graças às opções de personalização integradas. Primeiro, escolha o seu Estilo de Escolha de Imagem preferido.
O estilo Moderno exibe as imagens selecionadas numa caixa sombreada e adiciona um visto verde ao centro. O estilo Clássico exibe as imagens selecionadas com uma borda grossa e cinzenta.
A opção Nenhuma não adicionará qualquer estilo especial; em vez disso, verá botões de rádio tradicionais ao lado de cada imagem para os visitantes do site escolherem. Depois, pode ver mais opções clicando no separador Avançado.
Importante, certifique-se de que seleciona o seu Layout de Escolha preferido. Pode escolher entre 1, 2 ou 3 colunas.
Também tem a opção de escolher Em Linha, que coloca o máximo de opções possível em cada linha antes de adicionar outra. Em Linha é o Layout de Escolha padrão para todos os formulários WordPress que exibem escolhas de imagem.
Também pode selecionar a opção Aleatorizar Escolhas se quiser aleatorizar a ordem das escolhas de imagem sempre que um novo utilizador visitar o seu website.
Passo 5: Ativar Relatórios de Inquérito
Se quiser ver quantas pessoas escolhem cada opção de imagem que oferece, pode ativar a geração de relatórios de inquérito para os seus formulários instalando e ativando o complemento Inquéritos e Sondagens.
Para fazer isto, vá a WPForms » Addons e encontre o que está rotulado Addon de Inquéritos e Sondagens. Clique em Instalar Addon e depois em Ativar.
O WPForms permite-lhe recolher resultados de inquéritos para os seguintes campos de formulário:
- Texto de Linha Única
- Texto de Parágrafo
- Menu suspenso
- Caixas de seleção
- Escolha múltipla
- Classificação
- Escala Likert
- Net Promoter Score (NPS)
Para ativar a geração de relatórios de inquérito para todos os campos compatíveis num formulário, vá a Definições » Inquéritos e Sondagens no construtor de formulários e selecione a opção Ativar Geração de Relatórios de Inquérito.
Se quiser recolher dados apenas para um campo específico, abra o seu painel Opções de Campo e clique no separador Avançado. Em seguida, ative Ativar Geração de Relatórios de Inquérito.
Assim que as pessoas começarem a preencher o seu formulário, completo com imagens ao lado dos botões de rádio, poderá gerar relatórios de inquérito no painel de administração do WordPress para ver os resultados.
Para gerar um relatório de inquérito, vá a WPForms » Todos os Formulários e passe o rato sobre o seu formulário para exibir as opções. Em seguida, clique em Resultados do Inquérito.
Com o WPForms, os seus dados são agora gerados automaticamente em relatórios bonitos que são fáceis de compreender para o cérebro humano.
Adicionar Imagens ao Lado de Campos de Rádio – FAQs
Reuni algumas perguntas comuns que a nossa equipa tem recebido ultimamente sobre campos de rádio e imagens. Leia estas se tiver perguntas adicionais sobre este tópico.
Porquê adicionar imagens ao lado de botões de rádio em formulários WordPress?
As imagens funcionam maravilhosamente como auxílios visuais em formulários WordPress; são muito mais facilmente notadas e atraem imediatamente os olhos do visitante.
Como resultado, os formulários que têm elementos visuais são mais fáceis de preencher porque demoram menos tempo a ler e a compreender, levando a um maior envolvimento do utilizador e a uma melhor experiência geral.
Preciso de alguma experiência de codificação para adicionar imagens ao meu formulário?
Se estiver a usar um plugin fácil de usar como o WPForms, não precisa de uma única linha de código para adicionar imagens aos seus formulários.
Adicionar imagens ao seu formulário com o WPForms é como fazer upload de imagens para a sua Galeria de Média do WordPress. Qualquer pessoa pode fazê-lo!
Adicionar imagens vai abrandar o meu website?
Embora adicionar imagens afete a velocidade de carregamento da página, muito disso depende do seu website em particular. Se for cuidadoso com a quantidade de imagens que está a adicionar e garantir que todas estão otimizadas, não haverá impacto negativo na velocidade da sua página.
Posso personalizar a aparência dos botões de rádio e das imagens?
Sim, pode personalizar a aparência dos botões de rádio e das imagens no WPForms. Por exemplo, pode escolher entre diferentes layouts de campo, como arranjos em linha, 1 coluna, 2 colunas e 3 colunas.
Além disso, o WPForms também lhe permite escolher entre estilos Moderno e Clássico para as opções de campo de rádio, que exibem imagens em estilos ligeiramente diferentes.
As imagens ao lado dos botões de rádio afetam a acessibilidade?
As imagens que acompanham os botões de rádio podem afetar a acessibilidade se ignorar algumas considerações, como o contraste de cores entre o seu fundo e as imagens.
Recomendo adicionar textos alternativos descritivos às suas imagens e fazer uma verificação visual básica para garantir que as imagens são imediatamente visíveis com alto contraste.
Se lhe custar ver a imagem claramente, é um sinal de que precisa de mais cores contrastantes para garantir uma acessibilidade ideal.
A seguir, Ganhe Mais Dinheiro Online
E é tudo! Agora sabe como adicionar uma imagem ao lado de botões de rádio em formulários WordPress.
Se estiver interessado em ganhar dinheiro online, pode consultar o nosso tutorial sobre como criar um formulário de pedido simples no WordPress e adicionar imagens ao lado de cada item que tem para venda.
Crie o Seu Formulário WordPress Agora
Pronto para construir o seu formulário? Comece hoje com o plugin construtor de formulários WordPress mais fácil. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.
Se este artigo o ajudou, por favor siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.
a imagem do rádio não é exibida nos campos de pagamento... funciona bem nos "campos padrão", mas não funciona nos campos de pagamento.
alguma ideia do porquê??
Olá Raju,
Lamentamos por isso! Sim, isto está atualmente impedido intencionalmente devido à forma como as nossas integrações de pagamento lidam com estes rótulos (o HTML causará problemas quando esses dados forem enviados para o Stripe ou PayPal). Isto está no radar da nossa equipa, e os nossos programadores estão a trabalhar numa solução. Não tenho uma ETA para isso, mas esperamos resolvê-lo em breve!
Caso ajude, as imagens ainda podem ser adicionadas a cada opção de item com algum CSS personalizado. Isto requer algum estilo CSS específico do formulário, mas se estiver disposto a entrar em contacto com a nossa equipa de suporte, podemos ajudá-lo a conseguir isto 🙂
O "Image Choices to WPForms" é uma capacidade básica do formulário?
O meu site contém várias galerias de imagens que não mudam para um utilizador. Existem entre 5 e 30 imagens num formulário e 50 formulários (galerias). Quero que o utilizador selecione uma imagem num formulário e depois passe para o próximo formulário; selecione uma imagem e assim por diante. Cada seleção de imagem corresponde a um parágrafo de texto que quero fornecer ao utilizador num relatório. Isto pode ser feito com o WPForms? Com apenas pequenas adições de código?
Olá Richard,
Peço desculpa, mas não tenho a certeza se percebi exatamente o que pretende fazer. Quando tiver oportunidade, poderia entrar em contacto com o nosso suporte com mais alguns detalhes?
Obrigado! :)
Esta é uma ótima funcionalidade, no entanto, tanto o estilo moderno como o clássico são muito mal concebidos. No clássico, a moldura cinzenta é muito difícil de ver e, no moderno, a marca está na imagem e muitas vezes difícil de ver, mostra um ícone de marca preto em muitos telemóveis, o que torna ainda mais difícil de ver e o negrito do texto move os campos às vezes quando estão em dispositivos móveis…
Simplesmente mantenha-o simples e crie uma moldura COLORIDA a negrito que não altere a largura dos campos.
Olá Martin – Obrigado pelo feedback e sugestões! Anotei-os no nosso rastreador para que a equipa de desenvolvimento os possa considerar ao trabalhar no nosso roteiro para futuras atualizações, entretanto, se desejar, pode contactar a nossa equipa de suporte para obter ajuda e eles poderão ajudá-lo com algum código CSS personalizado para que fique como pretende.
Se tiver uma licença WPForms, terá acesso ao nosso suporte por e-mail, por isso, por favor, envie um pedido de suporte. Caso contrário, fornecemos suporte complementar limitado no fórum de suporte WPForms Lite WordPress.org.
Obrigado 🙂
Olá,
Usei a escolha de imagem em conjunto com caixas de seleção. Funciona bem em modo desktop e tablet, mas não em mobile. Toda a secção de caixas de seleção com todas as imagens e caixas de seleção desaparece a partir do ponto de interrupção de 600px para baixo. Tenho algum CSS personalizado, pensei que pudesse ser o meu CSS que de alguma forma causou os problemas e removi-os, mas sem sorte.
Uso a versão gratuita do WPFrom.
Alguma ideia?
Olá Daniel,
Nesse caso, recomendo que utilize a classe CSS para mobile, como mostrado neste guia
Espero que isto ajude! 🙂