Resumo de IA
Gostaria de adicionar opções de imagem aos seus formulários? O WPForms facilita a adição de imagens aos seus campos de Múltipla Escolha, Caixas de Seleção, Múltiplos Itens e Itens de Caixa de Seleção para que os seus utilizadores possam ver a opção ou item que listou.
Este tutorial mostrar-lhe-á como adicionar escolhas de imagem a campos existentes ou novos no WPForms.
Configurar Escolhas de Imagem
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.
Assim que o construtor de formulários estiver aberto, poderá adicionar escolhas de imagem a qualquer um dos seguintes tipos de campo:
- Escolha múltipla
- Caixas de seleção
- Itens Múltiplos
- Itens de Caixa de Seleção
Adicionalmente, pode adicionar imagens a campos novos e existentes destes tipos de campo.
Para o nosso exemplo, queremos mostrar imagens para opções de itens num formulário de encomenda. Para fazer isto, primeiro adicionaremos um campo de Itens Múltiplos ao nosso formulário.
Agora que adicionámos o nosso campo, o próximo passo é alterar o rótulo do campo e adicionar texto para as opções disponíveis. Como estamos a usar um campo de Itens Múltiplos, também precisamos de adicionar preços para cada item.
Assim que esta configuração básica estiver pronta, selecionaremos a opção Usar escolhas de imagem.
Assim que esta opção for ativada, um botão Carregar Imagem será adicionado a cada opção. Além disso, uma imagem de marcador será exibida para cada opção na área de pré-visualização.
Adicionar Imagens
Para adicionar uma imagem a uma opção, clique no botão Carregar Imagem.
Isto abrirá a Biblioteca de Média do WordPress. A partir daqui, pode selecionar um ficheiro que já foi adicionado ao seu site ou carregar uma nova imagem. Assim que tiver escolhido a imagem que gostaria de usar, clique no botão Usar Imagem.
Para este exemplo, já editámos todas as imagens para terem 150 por 150 píxeis de tamanho. Isto ajudará as nossas opções de imagem a parecerem mais uniformes e profissionais.
É assim que as nossas escolhas de imagem aparecerão aos nossos utilizadores:
Personalizar Opções de Imagem
O WPForms também inclui várias opções integradas para personalizar as suas escolhas de imagem. Para ver estas opções, abra o separador Avançadas nas Opções de Campo.
Para além de quaisquer outras opções de personalização disponíveis para o campo que está a usar, duas opções são adicionadas quando a opção Usar escolhas de imagem é selecionada: Estilo da Escolha de Imagem e Layout da Escolha.
Estilo da Escolha de Imagem
Existem três opções disponíveis para o estilo de escolha de imagem: Moderno, Clássico e Nenhum.
Iremos analisar cada uma destas opções abaixo:
Estilo Moderno
A opção Moderno exibirá quaisquer opções selecionadas dentro de uma caixa sombreada e também adicionará um visto verde e branco ao centro da opção selecionada.
Estilo Clássico
A opção Clássico simplesmente adicionará uma borda espessa cinza escura em torno de quaisquer opções selecionadas.
Nenhum
Se preferir não adicionar nenhum estilo especial, selecione a opção Nenhum. Esta opção exibirá caixas de seleção ou botões de rádio regulares ao lado do texto para cada opção.
Layout das Escolhas
Para qualquer campo onde as escolhas de imagem são permitidas, terá várias opções de layout. Isto determinará quantas colunas são usadas para exibir as escolhas dentro deste campo.
As opções de Layout das Escolhas incluem Uma Coluna, Duas Colunas, Três Colunas e Em Linha.
Por defeito, a opção Em Linha será selecionada quando a opção Adicionar escolhas de imagem estiver ativada. Isto colocará automaticamente o máximo de escolhas possível em cada linha.
É tudo! Agora pode adicionar imagens a quaisquer campos de Escolha Múltipla, Caixas de Seleção, Múltiplos Itens e Itens de Caixa de Seleção nos seus formulários. Se usou um campo Múltiplos Itens e planeia aceitar pagamentos, não se esqueça de configurar uma integração com Stripe, PayPal, Authorize.Net, ou Square.
Em seguida, gostaria de testar os seus formulários antes de os adicionar ao seu site? Certifique-se de consultar a nossa lista de verificação pré-lançamento para obter todas as nossas dicas e recomendações antes de lançar um formulário.