Resumo de IA
Você já se perguntou se poderia permitir que os usuários selecionassem uma imagem em seu formulário do 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 se traduz em uma experiência de usuário MUITO melhor.
E sabe de uma coisa? Adicionar imagens a botões de rádio em um formulário do WordPress é, na verdade, bem fácil de fazer, como vou mostrar neste artigo.
Como Adicionar uma Imagem ao Lado dos Botões de Rádio em Formulários do WordPress
O WPForms torna super simples adicionar imagens ou ícones aos seus botões de rádio de Múltipla Escolha ou aos seus campos de Caixa de Seleção. Aqui estão os passos que você precisará seguir:
Se você prefere instruções escritas, continue lendo abaixo.
Passo 1: Crie um Formulário Simples no WordPress
A primeira coisa que você precisará 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 instalar o WPForms com sucesso em seu site, você pode começar a criar seu formulário abrindo seu painel do WordPress e navegando até WPForms » Adicionar Novo.
Depois disso, você pode começar dando um nome ao seu formulário e, em seguida, escolhendo um modelo. Para este exemplo, usarei o modelo Formulário de Contato Simples, que é um dos mais de 2.100 modelos de formulários do WordPress disponíveis.
Assim que você selecionar um modelo, ele será carregado dentro do construtor de formulários.
Você também pode ver nosso tutorial sobre como criar um formulário de contato simples como exemplo para começar.
Passo 2: Personalize seu Formulário do WordPress
O modelo Formulário de Contato Simples vem com os seguintes campos de formulário padrão:
- Nome
- Comentário ou Mensagem
Em nosso exemplo, adicionaremos um campo de formulário de Múltipla Escolha ao nosso formulário de contato simples e alteraremos o rótulo e as escolhas para perguntar por que o usuário está nos contatando.
Você 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. Você também pode clicar em um campo de formulário e arrastá-lo para reorganizar a ordem dos campos em seu formulário de contato.
Você pode adicionar imagens ao lado dos campos de formulário Múltipla Escolha e Múltiplos Itens, que são botões de rádio, bem como dos campos de formulário 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: Adicione 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 Múltipla Escolha e, em seguida, ative o alternador Usar escolhas de imagem.
Após ativar as Escolhas de Imagem, você pode fazer o upload de uma imagem para cada escolha em seu campo.
Para adicionar uma imagem, clique no bot ildeo Fazer upload de imagem. Isso abrir ilde{a> sua Biblioteca de m ildeidia> do WordPress para que voc ildee> possa fazer upload de uma nova imagem para o WordPress ou escolher entre as existentes.
Adicionar ilde{I>cones> ilde{A>s> Escolhas de Bot ildeo>es> de R ildea-dio>
Dependendo do seu formul ildea-rio>, pode fazer mais sentido usar ilde{I>cones> do que imagens. Voc ildee> pode ativar facilmente esta op ilde{a-c} ilde{a-o> da mesma forma que fez com as imagens, selecionando Usar ilde{I>cones> no painel Op ilde{c} ilde{o}es> de Campo.
O WPForms usa uma extensa biblioteca de ilde{I>cones> prontos, ent ildeao> voc ildee> n ildeao> precisa fazer upload deles. Voc ildee> pode simplesmente selecionar o ilde{i>cone> que precisa entre as op ilde{c} ilde{o}es> dispon ilde{i-veis>.
Para mais detalhes, veja nosso guia sobre usar ilde{I>cones> no WPForms.
Passo 4: Personalize suas Escolhas de Imagem
O WPForms torna a personaliza ilde{a-c} ilde{a-o> das suas escolhas de imagem super simples gra ilde{c}as> ilde{a>s> op ilde{c} ilde{o}es> de personaliza ilde{a-c} ilde{a-o> integradas. Primeiro, escolha seu Estilo de Escolha de Imagem preferido.
O estilo Moderno exibe as imagens selecionadas em uma caixa sombreada e adiciona uma marca de verifica ilde{a-c} ilde{a-o> verde ao centro. O estilo Cl ildea-ssico> exibe as imagens selecionadas com uma borda grossa e cinza.
A op ilde{c} ilde{a-o> Nenhuma n ildeao> adicionar ildea> nenhum estilo especial; em vez disso, voc ildee> ver ildea> bot ildeo>es> de r ildea-dio> tradicionais ao lado de cada imagem para os visitantes do site escolherem. Em seguida, voc ildee> pode ver mais op ilde{c} ilde{o}es> clicando na aba Avan ilde{c}ado.
Importante, certifique-se de selecionar seu Layout de Escolha preferido. Voc ildee> pode escolher entre 1, 2 ou 3 colunas.
Voc ildee> tamb ilde{e-m}> tem a op ilde{c} ilde{a-o> de escolher Em linha, que coloca o m ildea-ximo> de op ilde{c} ilde{o}es> poss ilde{i-vel> em cada linha antes de adicionar outra. Em linha ilde{e> o Layout de Escolha padr ilde{a-o}> para todos os formul ildea-rios> do WordPress que exibem escolhas de imagem.
Voc ildee> tamb ilde{e-m}> pode selecionar a op ilde{c} ilde{a-o> Embaralhar Escolhas se quiser randomizar a ordem das escolhas de imagem toda vez que um novo usu ildea-rio> visitar seu site.
Passo 5: Ative o Relatório de Pesquisa
Se voc ildee> quiser ver quantas pessoas escolheram cada op ilde{c} ilde{a-o> de imagem que voc ildee> oferece, pode ativar o relat ilde{o-rio> de pesquisas para seus formul ildea-rios> instalando e ativando o complemento Pesquisas e Enquetes.
Para fazer isso, v ildea> para WPForms ilde{»> Addons e encontre o rotulado Addon de Pesquisas e Enquetes. Clique em Instalar Addon e depois em Ativar.
O WPForms permite coletar resultados de pesquisas para os seguintes campos de formul ildea-rio>:
- Texto de Linha Única
- Texto de Parágrafo
- Dropdown
- Caixas de seleção
- Múltipla Escolha
- Avaliação
- Escala Likert
- Net Promoter Score (NPS)
Para ativar o relat ilde{o-rio> de pesquisas para todos os campos compat ilde{i-veis> em um formul ildea-rio>, v ildea> para Configura ilde{c} ilde{o}es> ilde{»> Pesquisas e Enquetes no construtor de formul ildea-rios> e selecione a op ilde{c} ilde{a-o> Ativar Relat ilde{o-rio> de Pesquisas.
Se voc ildee> quiser coletar dados apenas para um campo espec ilde{i-fico>, abra seu painel de Op ilde{c} ilde{o}es> de Campo e clique na aba Avan ilde{c}ada. Em seguida, ative Ativar Relat ilde{o-rio> de Pesquisas.
Assim que as pessoas come ilde{c}arem> a preencher seu formul ildea-rio>, completo com imagens ao lado dos bot ildeo>es> de r ildea-dio>, voc ildee> poder ildea> gerar relat ilde{o-rios> de pesquisas no painel do WordPress para ver os resultados.
Para gerar um relatrio de pesquisa, acesse WPForms b Todos os Formulrios e passe o mouse sobre seu formulrio para exibir as op75es. Em seguida, clique em Resultados da Pesquisa.
Com o WPForms, seus dados agora são gerados automaticamente em relatórios bonitos e fáceis de entender para o cérebro humano.
Adicionando Imagens ao Lado de Campos de Rádio – FAQs
Reuni algumas perguntas comuns que nossa equipe recebeu recentemente sobre campos de rádio e imagens. Leia estas se tiver dúvidas adicionais sobre este tópico.
Por que devo adicionar imagens ao lado de botões de rádio em formulários do WordPress?
Imagens funcionam maravilhosamente como auxílios visuais em formulários do WordPress; elas são muito mais facilmente perceptíveis e atraem imediatamente os olhos do visitante.
Como resultado, formulários que possuem elementos visuais são mais fáceis de preencher porque levam menos tempo para serem lidos e compreendidos, levando a um maior engajamento do usuário e a uma melhor experiência geral.
Preciso de alguma experiência em codificação para adicionar imagens ao meu formulário?
Se você estiver usando um plugin amigável como o WPForms, não precisará 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 Biblioteca de Mídia do WordPress. Qualquer um pode fazer!
Adicionar imagens vai deixar meu site mais lento?
Embora adicionar imagens afete a velocidade de carregamento da página, muito disso depende do seu site em particular. Se você for cuidadoso com a quantidade de imagens que está adicionando e garantir que todas estejam 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, você pode personalizar a aparência dos botões de rádio e das imagens no WPForms. Por exemplo, você 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 permite que você escolha entre os estilos Moderno e Clássico para as opções de campo de rádio, que exibem imagens em estilos ligeiramente diferentes.
Imagens ao lado de botões de rádio afetam a acessibilidade?
Imagens que acompanham botões de rádio podem afetar a acessibilidade se você ignorar algumas considerações, como o contraste de cores entre seu fundo e as imagens.
Recomendo adicionar textos alternativos descritivos às suas imagens e fazer uma verificação básica para garantir que as imagens sejam imediatamente visíveis com alto contraste.
Se você se esforça para ver a imagem claramente, é um sinal de que precisa de mais cores contrastantes para garantir acessibilidade ideal.
Em seguida, Ganhe Mais Dinheiro Online
E aí está! Agora você sabe como adicionar uma imagem ao lado de botões de rádio em formulários do WordPress.
Se você estiver interessado em ganhar dinheiro online, pode conferir nosso tutorial sobre como criar um formulário de pedido simples no WordPress e adicionar imagens ao lado de cada item que você tem para vender.
Crie seu formulário WordPress agora
Pronto para criar seu formulário? Comece hoje mesmo com o plugin de criação de formulários WordPress mais fácil. WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.
Se este artigo ajudou você, por favor, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.
imagem de rádio não é exibida em campos de pagamento... está funcionando bem em "campos padrão", mas não funciona em campos de pagamento.
alguma ideia do porquê??
Olá Raju,
Desculpe por isso! Sim, isso é intencionalmente impedido no momento por causa de como nossas integrações de pagamento lidam com esses rótulos (o HTML causará problemas quando esses dados forem enviados para Stripe ou PayPal). Isso está no radar da nossa equipe, e nossos desenvolvedores estão trabalhando em uma solução. Não tenho uma previsão de quando isso estará pronto, mas esperamos resolver em breve!
Caso ajude, imagens ainda podem ser adicionadas a cada opção de item com algum CSS personalizado. Isso requer alguma estilização CSS específica do formulário, mas se você estiver disposto a entrar em contato com nossa equipe de suporte, podemos ajudá-lo a realizar isso 🙂
A opção "Image Choices to WPForms" é uma funcionalidade básica do formulário?
Meu site contém várias galerias de imagens que não mudam para um usuário. Há entre 5 e 30 imagens em um formulário e 50 formulários (galerias). Quero que o usuário selecione uma imagem em um formulário e depois vá 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 usuário em um relatório. Isso pode ser feito com o WPForms? Com apenas pequenas adições de código?
Olá Richard,
Peço desculpas, mas não tenho certeza se entendi exatamente o que você está querendo fazer. Quando tiver um tempo, você poderia entrar em contato com nosso suporte com mais detalhes?
Obrigado! 🙂
Este é um ótimo recurso, no entanto, tanto o estilo moderno quanto o clássico são muito mal projetados. No clássico, a moldura cinza é muito difícil de ver e, no moderno, o visto está na imagem e muitas vezes difícil de ver, ele mostra um ícone de visto preto em muitos telefones, o que o torna ainda mais difícil de ver e o negrito do texto move os campos às vezes quando eles estão no celular...
Apenas mantenha simples e crie uma moldura COLORIDA em negrito que não altere a largura dos campos.
Olá Martin – Obrigado pelo feedback e sugestões! Anotei em nosso rastreador para que a equipe de desenvolvimento possa considerá-lo enquanto trabalha em nosso roteiro para futuras atualizações. Enquanto isso, se desejar, você pode entrar em contato com nossa equipe de suporte para obter ajuda e eles poderão auxiliá-lo com algum código CSS personalizado para que fique como você precisa.
Se você tiver uma licença WPForms, terá acesso ao nosso suporte por e-mail, portanto, envie um ticket de suporte. Caso contrário, oferecemos suporte complementar limitado no fórum de suporte do WPForms Lite no WordPress.org.
Obrigado 🙂
Olá,
Usei a escolha de imagem junto com caixas de seleção. Funciona bem no modo desktop e tablet, mas não no celular. Toda a seção de caixas de seleção com todas as imagens e caixas de seleção desaparece do ponto de interrupção de 600px para baixo. Tenho algum CSS personalizado, pensei que pudesse ser meu CSS que de alguma forma causou os problemas e os removi, mas sem sorte.
Eu uso a versão gratuita do WPFrom.
Alguma ideia?
Oi Daniel,
Nesse caso, recomendo que você use a classe CSS para celular, como mostrado neste guia
Espero que ajude! 🙂