Já alguma vez pensou que poderia permitir aos utilizadores selecionar uma imagem no seu formulário WordPress em vez de apenas texto?
Sejamos realistas. Todos nós somos naturalmente atraídos por elementos interactivos e visuais. Um formulário só de texto simples é funcionalmente bom, mas um formulário com imagens selecionáveis traduz-se numa experiência de utilizador MUITO melhor.
E sabes que mais? Adicionar imagens a botões de rádio num formulário do WordPress é, na verdade, muito fácil de fazer, como vou mostrar neste artigo.
Pode adicionar imagens ao seu campo de rádio com o WPForms Lite, totalmente gratuito. Mas se quiser desbloquear funcionalidades adicionais para tornar os seus formulários mais interactivos, actualize para o WPForms Pro vale a pena!
Como Adicionar uma Imagem Junto aos Botões de Rádio nos 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 caixas de seleção. Aqui estão os passos que você precisa seguir:
Se preferir instruções escritas, continue a ler abaixo.
Neste artigo
Passo 1: Criar um formulário WordPress simples
A primeira coisa que você precisa fazer é instalar e ativar o plugin WPForms. Para obter mais detalhes, consulte este guia passo a passo sobre como instalar um plugin no WordPress.
Depois de instalar com sucesso o WPForms no seu site, pode começar a criar o seu formulário abrindo o seu painel de controlo do 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, vou utilizar o modelo Simple Contact Form, que é um dos mais de 2.000 modelos de formulários WordPress disponíveis.
Assim que selecionar um modelo, este será carregado no criador 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 de formulário de contacto simples é fornecido com os seguintes campos de formulário predefinidos:
- Nome
- Correio eletrónico
- Comentário ou mensagem
No nosso exemplo, vamos adicionar um campo de formulário de escolha múltipla ao nosso formulário de contacto simples e alterar a etiqueta e as opções para perguntar por que razão o utilizador nos está a contactar.
Pode adicionar campos adicionais ao seu formulário arrastando-os do painel da esquerda para o painel da direita.
Em seguida, clique no campo para efetuar 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 junto aos campos de formulário Escolha múltipla e Itens múltiplos, que são botões de rádio, bem como aos campos de formulário Caixas de verificação e Itens de caixa de verificação.
A diferença entre um botão de rádio e uma caixa de verificação é que os botões de rádio apenas permitem que os visitantes do sítio seleccionem uma opção, enquanto as pessoas podem escolher mais do que uma opção de uma lista de caixas de verificação.
Agora é altura de adicionar as imagens junto a cada botão de opção.
Passo 3: Adicionar imagens aos botões de rádio
Para adicionar uma imagem aos botões de opção do formulário, abra as Opções de Campo do campo Múltiplas Escolhas e active a opção Utilizar opções de imagem.
Depois de ativar as opções de imagem, pode carregar uma imagem para cada opção 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 existentes.
Nota: As imagens não serão cortadas ou redimensionadas quando as adicionar ao seu formulário. Para obter melhores resultados, recomendamos que todas as opções de imagem tenham o mesmo tamanho e sejam de 250×250 pixéis ou mais pequenas.
Adicionar opções de ícones a botões de rádio
Dependendo do formulário, pode fazer mais sentido utilizar escolhas de ícones do que escolhas de imagens. Pode ativar facilmente esta opção da mesma forma que fez com as opções de imagem, selecionando Utilizar opções de ícones no painel Opções de campo.
O WPForms utiliza uma extensa biblioteca de ícones prontos a utilizar, pelo que não tem de os carregar. Pode simplesmente selecionar o ícone de que necessita a partir das opções disponíveis.
Para obter mais detalhes, consulte nosso guia sobre como usar opções de ícones no WPForms.
Passo 4: Personalizar as suas opções de imagem
O WPForms torna a personalização das suas escolhas de imagem muito simples graças às opções de personalização incorporadas.
Em primeiro lugar, selecione o seu estilo de escolha de imagem preferido.
O estilo Moderno apresenta as imagens selecionadas numa caixa sombreada e adiciona uma marca de verificação verde ao centro.
O estilo clássico apresenta as imagens selecionadas com um rebordo cinzento espesso. A opção Nenhum não adicionará qualquer estilo especial; em vez disso, verá botões de rádio tradicionais junto a cada imagem para os visitantes do sítio escolherem.
Em seguida, pode ver mais opções clicando no separador Avançadas.
É importante certificar-se de que seleciona o esquema de escolha preferido. Pode escolher entre 1, 2 ou 3 colunas.
Também tem a opção de escolher Inline, que coloca o maior número possível de opções em cada linha antes de adicionar outra. Inline é o layout de escolha padrão para todos os formulários do WordPress que exibem opções de imagem.
Também pode selecionar a opção Aleatorizar escolhas se pretender aleatorizar a ordem das escolhas de imagens sempre que um novo utilizador visitar o seu sítio Web.
Passo 5: Ativar o relatório de inquérito
Se quiser ver quantas pessoas escolhem cada opção de imagem que oferece, pode ativar o relatório de inquéritos para os seus formulários instalando e activando o suplemento Inquéritos e sondagens.
Para o fazer, vá a WPForms " Addons e encontre o Addon Surveys and Polls.
Clique em Instalar Addon e depois em Ativar.
O WPForms permite recolher resultados de inquéritos para os seguintes campos de formulário:
- Texto de uma linha
- Texto do parágrafo
- Menu suspenso
- Caixas de verificação
- Escolha múltipla
- Classificação
- Escala de Likert
- Pontuação do promotor líquido (NPS)
Para ativar o relatório de inquérito para todos os campos compatíveis de um formulário, vá a Definições " Inquéritos e sondagens no criador de formulários e selecione a opção Ativar relatório de inquérito.
Se só quiser recolher dados de um determinado campo, abra o painel Opções de campo e clique no separador Avançadas . Em seguida, active a opção Ativar relatório de inquérito.
Quando as pessoas começarem a preencher o formulário, com imagens junto aos botões de opção, poderá gerar relatórios de inquérito no painel de controlo do WordPress para ver os resultados.
Para gerar um relatório de inquérito, aceda a WPForms " Todos os formulários e passe o rato sobre o seu formulário para visualizar as opções. Em seguida, clique em Resultados do inquérito.
Depois de clicar nesse botão, verá os resultados do seu formulário:
Adicionar imagens junto a campos de rádio - FAQs
Reuni algumas perguntas comuns que a nossa equipa tem recebido ultimamente sobre campos de rádio e imagens. Leia-as se tiver mais perguntas sobre este tema.
Porque é que devo adicionar imagens junto aos botões de opção nos formulários do WordPress?
As imagens funcionam maravilhosamente como ajudas visuais nos formulários WordPress; são muito mais facilmente perceptíveis e chamam imediatamente a atenção do visitante. Consequentemente, os formulários com elementos visuais são mais fáceis de preencher porque demoram menos tempo a ser lidos e compreendidos, o que leva a um maior envolvimento do utilizador e a uma melhor experiência geral.
Preciso de alguma experiência de programação para adicionar imagens ao meu formulário?
Se estiver a utilizar um plugin de fácil utilização 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 Galeria de Mídia do WordPress. Qualquer um pode fazer isso!
A adição de imagens tornará o meu sítio Web mais lento?
Embora a adição de imagens afecte a velocidade de carregamento da página, muito disso depende do seu site em particular. Se tiver cuidado com a quantidade de imagens que está a adicionar e garantir que estão todas optimizadas, não haverá impacto negativo na velocidade da página.
Posso personalizar o aspeto dos botões de opção e das imagens?
Sim, pode personalizar o aspeto dos botões de rádio e das imagens no WPForms. Por exemplo, pode escolher entre diferentes layouts de campo, como disposições em linha, 1 coluna, 2 colunas e 3 colunas.
Além disso, o WPForms também lhe permite escolher entre os estilos Moderno e Clássico para as escolhas dos campos de rádio, que apresentam imagens com estilos ligeiramente diferentes.
As imagens junto aos botões de opção afectam 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 fundo e as imagens.
Recomendo que adicione textos alternativos descritivos às suas imagens e que efectue uma verificação visual básica para garantir que as imagens são imediatamente visíveis com um contraste elevado. Se for necessário um esforço para ver a imagem claramente, é sinal de que precisa de cores mais contrastantes para garantir a acessibilidade ideal.
A seguir, ganhar mais dinheiro em linha
E já está! Agora já sabe como adicionar uma imagem junto aos botões de rádio nos formulários do WordPress.
Se estiver interessado em ganhar dinheiro online, pode consultar o nosso tutorial sobre como criar um formulário de encomenda simples no WordPress e adicionar imagens ao lado de cada artigo que tem para venda.
Crie o seu formulário WordPress agora
Então, de que está à espera? Comece a usar o mais poderoso plugin de formulários do WordPress hoje mesmo.
E não se esqueça, se gostou deste artigo, siga-nos no Facebook e no Twitter.
A imagem de rádio não é apresentada nos campos de pagamento... funciona bem nos "campos padrão" mas não funciona nos campos de pagamento.
Alguma ideia do porquê?
Olá Raju,
Desculpe! Sim, atualmente isto é impedido intencionalmente devido à forma como as nossas integrações de pagamento tratam estas etiquetas (o HTML causará problemas quando esses dados forem enviados para o Stripe ou o PayPal). No entanto, isto está no radar da nossa equipa e os nossos programadores estão a trabalhar numa forma de contornar esta situação. Não tenho um prazo de entrega, mas esperamos resolver o problema em breve!
Caso ajude, as imagens 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 apoio, podemos ajudá-lo a conseguir isto 🙂
A opção "Image Choices to WPForms" é uma capacidade básica de formulário?
O meu sítio contém várias galerias de imagens imutáveis para um utilizador. Há entre 5 e 30 imagens num formulário e 50 formulários (galerias). Pretendo que o utilizador selecione uma imagem num formulário e passe para o formulário seguinte, selecione uma imagem e assim sucessivamente. Cada seleção de imagem corresponde a um parágrafo de texto que pretendo fornecer ao utilizador num relatório. Isto pode ser feito com o WPForms? Apenas com pequenas adições de código?
Olá, Richard,
Peço desculpa, mas não tenho a certeza de ter percebido exatamente o que pretende fazer. Quando tiver oportunidade, pode contactar o nosso suporte com mais pormenores?
Obrigado! 🙂
Esta é uma excelente funcionalidade, mas tanto o estilo moderno como o clássico estão muito mal concebidos. No estilo clássico, a moldura cinzenta é muito difícil de ver e, no estilo moderno, o visto está na imagem e é muitas vezes difícil de ver, aparece um ícone de visto preto em muitos telemóveis, o que torna ainda mais difícil de ver, e o facto de o texto ficar a negrito faz com que os campos se desloquem por vezes quando estão no telemóvel...
Basta manter a simplicidade e criar uma moldura COLORIDA a negrito que não altere a largura dos campos
Olá Martin - Obrigado pelos comentários e sugestões! Anotei-o no nosso tracker para que a equipa de desenvolvimento o possa considerar enquanto trabalha no nosso roteiro para futuras actualizações. Entretanto, se desejar, pode contactar a nossa equipa de suporte para obter ajuda e eles podem ajudá-lo com algum código CSS personalizado para que fique com o aspeto que precisa.
Se você tem uma licença WPForms, você tem acesso ao nosso suporte por e-mail, então por favor envie um ticket de suporte. Caso contrário, oferecemos suporte gratuito limitado no fórum de suporte do WPForms Lite WordPress.org.
Obrigado 🙂
Olá,
Utilizei a opção de imagem juntamente com caixas de verificação. Funciona bem no ambiente de trabalho e no modo tablet, mas não no telemóvel. Toda a secção da caixa de verificação, com todas as imagens e caixas de verificação, desaparece do ponto de interrupção 600px abaixo. Tenho algumas CSS personalizadas, pensei que poderia ser a minha CSS que de alguma forma causou os problemas e removi-as, mas sem sorte.
Utilizo a versão gratuita do WPFrom.
Alguma ideia?
Olá Daniel,
Nesse caso, recomendo que utilize a classe CSS para telemóvel, tal como indicado neste guia
Espero que isto ajude! 🙂