Como Adicionar Escolhas de Imagem em Formulários WordPress (Aumente o Engajamento)

Adicionar escolhas de imagem aos seus formulários do WordPress é uma ótima maneira de aumentar o engajamento do usuário e melhorar a experiência geral.

Em vez de usar opções de texto padrão, as escolhas de imagem permitem que os usuários interajam com seus formulários de uma maneira mais visual e envolvente. Isso pode ser particularmente útil para pesquisas, questionários, seleções de produtos e qualquer formulário onde você queira tornar o processo de tomada de decisão mais intuitivo.

Ao longo dos anos, criamos inúmeros formulários no WordPress, o que nos deu insights valiosos sobre o que torna os formulários envolventes e o que faz com que os usuários os abandonem.

Neste artigo, mostraremos como adicionar facilmente escolhas de imagem em formulários do WordPress para aumentar o engajamento do usuário.

Como adicionar facilmente escolhas de imagem em um formulário WordPress

Por Que Usar Escolhas de Imagem em Seus Formulários do WordPress?

Escolhas de imagem são fotos, ilustrações, gráficos ou ícones entre os quais seus usuários podem escolher ao preencher um formulário em seu site WordPress.

Aqui está um exemplo de um formulário usando escolhas de imagem em vez de opções de texto regulares. A primeira escolha, Morangos, foi selecionada:

Um exemplo de escolhas de imagem em uso em um formulário: mostra imagens coloridas para 6 opções de frutas

As escolhas de imagem podem tornar seus formulários mais polidos, profissionais e visualmente atraentes, o que pode ajudar os usuários a decidir mais rapidamente.

Por exemplo, se você gerencia um site de restaurante que oferece entrega, então você vai querer ter um formulário de pedido em seu site. Agora você pode usar imagens de seus diferentes pratos para ajudar potenciais clientes a escolher o que desejam.

Além disso, as escolhas de imagem podem facilitar para um público com dificuldades de leitura ou alguém que não seja fluente em seu idioma preencher seu formulário, melhorando a experiência do usuário.

Dito isso, vamos ver como adicionar facilmente escolhas de imagem em formulários do WordPress.

Como Adicionar Escolhas de Imagem aos Seus Formulários do WordPress

Você pode facilmente adicionar escolhas de imagem aos seus formulários do WordPress com o WPForms para aumentar o engajamento.

É o melhor plugin construtor de formulários do WordPress do mercado e permite que você crie formulários facilmente usando um simples construtor de formulários de arrastar e soltar.

Temos usado este plugin em vários de nossos sites e sempre tivemos excelentes resultados porque ele é super fácil de usar e escalável. Para saber mais sobre nossa experiência, veja nossa análise do WPForms.

Primeiro, você precisará instalar e ativar o plugin WPForms. Para instruções detalhadas, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Observação: Você também pode usar o WPForms Lite, que é totalmente gratuito para adicionar escolhas de imagem ao seu formulário. No entanto, usaremos a versão pro, pois ela tem mais recursos.

Após a ativação do plugin, acesse a página WPForms » Adicionar Formulário no seu painel do WordPress para criar um novo formulário.

Isso o levará à página ‘Selecionar um Modelo’, onde você pode começar digitando um nome para o seu formulário.

Depois disso, clique no botão ‘Usar Modelo’ em um modelo pré-fabricado de sua escolha. Para este tutorial, usaremos o modelo ‘Formulário de Contato Simples’.

Um modelo de contato WPForms

Isso iniciará a interface do construtor de formulários WPForms, onde você verá uma prévia do formulário no lado direito da tela e uma coluna com os campos do formulário no canto esquerdo.

Agora você pode editar qualquer campo do formulário de sua escolha clicando nele, movê-lo para cima e para baixo ou excluí-lo.

Para instruções mais detalhadas, você pode consultar nosso tutorial sobre como criar um formulário de contato no WordPress.

O formulário padrão criado usando o modelo de Formulário de Contato do WPForms

Em seguida, você precisa adicionar o campo Múltipla escolha da coluna esquerda à prévia do formulário para poder criar escolhas de imagem para os clientes.

Vamos colocá-lo logo acima da caixa ‘Comentário ou Mensagem’.

Observação: As escolhas de imagem também funcionam com o campo de Caixas de Seleção. Use-o se quiser que seu usuário possa escolher mais de uma opção.

Adicionando um campo de múltipla escolha ao seu formulário

Depois disso, clique no campo Múltipla Escolha para editá-lo. Isso abrirá as opções do campo no lado esquerdo da sua tela.

Agora você notará que este campo permite adicionar opções de texto por padrão.

Editando o campo de múltipla escolha para o seu formulário

No entanto, você pode facilmente mudar isso alternando o interruptor ‘Usar Escolhas de Imagem’.

Ao fazer isso, um botão ‘Carregar Imagem’ aparecerá sob cada campo de múltipla escolha.

Alternar o interruptor Escolha de Imagem

Em seguida, você pode digitar o que quiser para o rótulo de texto do campo e, em seguida, clicar no botão ‘Carregar Imagem’.

Agora você pode carregar uma imagem do seu computador ou selecionar uma da biblioteca de mídia do WordPress.

Carregando imagens para as diferentes escolhas em seu formulário

Recomendamos o uso de imagens .jpg ou .png que não sejam maiores que 250px por 250px.

Lembre-se de que suas imagens ficarão melhores em seu formulário se todas tiverem o mesmo tamanho.

Importante: O WPForms não redimensionará suas imagens. Você precisará garantir que elas tenham o tamanho desejado antes de carregá-las. Alternativamente, você pode editar suas imagens no WordPress antes de adicioná-las ao seu formulário.

Se você tiver mais de 3 opções para incluir, basta clicar no botão (+) para adicionar uma nova escolha. Você também pode usar o botão (-) para remover uma escolha.

Clique no botão - para remover um campo de múltipla escolha

Alterando Como Suas Escolhas de Imagem São Exibidas em Seu Formulário

O WPForms facilita a alteração do layout e outras configurações para o seu campo de escolhas de imagem.

Para fazer isso, vá para a aba ‘Avançado’ na coluna da esquerda.

Agora você pode alternar o interruptor ‘Aleatorizar Escolhas’ se quiser exibir suas escolhas de imagem aleatoriamente em vez de em uma ordem específica.

Isso é útil se você estiver criando uma pesquisa e quiser eliminar o viés de primeira escolha nos resultados.

Alternar o interruptor Aleatorizar Escolha

Se desejar, você também pode alterar a forma como suas opções são dispostas usando o menu suspenso 'Layout da Opção'.

O padrão é 'Em Linha', com suas opções aparecendo lado a lado até quebrarem para uma nova linha.

Você pode optar por exibir suas opções em um número de colunas em vez disso. Se você quiser uma lista vertical, basta escolher 'Uma Coluna' no menu suspenso.

Há também a opção aqui de 'Ocultar Rótulo' para suas opções de imagem. Isso significa que não haverá texto abaixo das imagens. Em alguns casos, isso pode fazer sentido.

Por exemplo, você pode estar pedindo às pessoas para votar em qual novo design de logotipo elas preferem.

Certifique-se de inserir um rótulo relevante e útil sempre que possível, no entanto. Isso será exibido como texto alternativo para suas imagens, tornando seu site mais acessível para usuários com deficiência visual.

Selecionar layout da escolha

Depois de fazer isso, volte para a guia 'Geral' na coluna da esquerda e role para baixo até a seção 'Estilo da Opção de Imagem'.

A partir daqui, você pode escolher como deseja estilizar suas imagens no menu suspenso.

Escolher estilo de escolha de imagem

O estilo padrão é Moderno, onde um tique aparecerá para a imagem selecionada.

No entanto, você pode escolher o estilo Clássico em vez disso, que se parece com isto quando uma opção é selecionada:

As escolhas de imagem com o estilo Clássico aplicado (borda mais grossa, sem sombra, sem texto em negrito, sem marca de seleção)

Alternativamente, você também pode escolher 'Nenhum' para o estilo.

Neste caso, suas imagens serão simplesmente imagens regulares sem borda ou outro estilo. Os rótulos serão exibidos com botões de rádio.

As escolhas de imagem sem estilo

Assim que estiver satisfeito com seu formulário, basta clicar no botão ‘Salvar’ na parte superior da tela.

Adicionando Seu Formulário ao Seu Site

Você pode adicionar seu formulário a qualquer post ou página em seu site com apenas alguns cliques. Vamos criar uma nova página para o nosso.

Primeiro, visite a tela Páginas » Adicionar Nova na barra lateral de administração do WordPress e clique no botão ‘Adicionar Bloco’ (+) no canto superior esquerdo da tela.

Isso abrirá o menu de blocos, de onde você deve encontrar e adicionar o bloco WPForms à página.

Selecione um formulário no menu suspenso no bloco WPForms

Depois disso, selecione o formulário que você acabou de criar no menu suspenso dentro do próprio bloco.

Finalmente, clique no botão ‘Publicar’ ou ‘Atualizar’ para salvar as configurações do seu formulário.

Agora, visite seu site para ver as opções de imagem em seu formulário WordPress.

Prévia para adicionar escolhas de imagem em formulários do WordPress

Se você quiser fazer mais alterações em seu formulário, poderá fazê-lo facilmente visitando a página WPForms » Todos os Formulários no painel do WordPress.

Uma vez lá, clique em seu formulário para abri-lo no construtor de formulários.

Após fazer suas alterações, basta clicar no botão ‘Salvar’ para salvar suas alterações. Seu formulário será atualizado automaticamente em sua página também.

Editar formulário de escolha de imagem

Bônus: Aceite Imagens Com Seus Formulários WordPress

Além de oferecer opções de imagem, você também pode aceitar imagens de diferentes usuários com um formulário WordPress.

Isso pode ser útil se você for um fotógrafo procurando contratar alguém ou se estiver realizando um concurso de fotografia.

Além disso, aceitar conteúdo gerado pelo usuário pode até ajudar a aumentar o engajamento do usuário em seu site.

Você pode facilmente criar um formulário de upload de arquivos no WordPress com o WPForms, pois ele é o melhor plugin de upload de arquivos do mercado.

Ele vem com um modelo de Formulário de Upload de Arquivo pré-fabricado que você pode usar para aceitar qualquer tipo de documento, incluindo jpeg, png, gif, pdf, ppt e muito mais.

Para aceitar imagens, você só precisa clicar no campo ‘Upload de Arquivo’ para abrir suas configurações na coluna da esquerda. Depois disso, você deve inserir os tipos de arquivo de imagem que deseja aceitar na opção ‘Extensões de Arquivo Permitidas’.

Digite o tipo de extensão do arquivo

Assim que estiver satisfeito, não se esqueça de clicar no botão ‘Salvar’ para armazenar suas configurações.

Você pode então adicionar o formulário ao seu site com o bloco fácil de usar do WPForms. Para instruções mais detalhadas, veja nosso tutorial sobre como criar um formulário de upload de arquivo no WordPress.

Tutorial em Vídeo

Se você prefere instruções visuais, então pode conferir nosso tutorial em vídeo.

Inscreva-se no WPBeginner

Esperamos que este artigo tenha ajudado você a aprender como adicionar escolhas de imagem em formulários do WordPress. Você também pode querer ver nosso guia para iniciantes sobre como criar uma enquete interativa no seu site WordPress e nossa comparação dos melhores plugins de calculadora para WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Aviso: Nosso conteúdo é apoiado pelos leitores. Isso significa que, se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Veja como o WPBeginner é financiado, por que isso importa e como você pode nos apoiar. Aqui está nosso processo editorial.

O Kit de Ferramentas Definitivo para WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Interações do Leitor

3 CommentsLeave a Reply

  1. Isso é empolgante, eu nunca pensei que seria tão fácil de configurar assim, o WPForms é realmente um bom plugin para ter para formulários e todas as questões relacionadas a entrada. Eu gosto de como ele funciona com a escolha de imagem.

  2. Oi,
    Tenho uma pergunta: como você permite fazer múltiplas escolhas.
    O que preciso fazer se quiser que alguém escolha 2 ou 3 frutas?
    Obrigado!

Deixe uma resposta