Resumo de IA
A maioria dos formulários WordPress são de texto simples, o que funciona bem para um formulário de contato básico. Mas um pouco de polimento visual pode fazer uma grande diferença, seja o seu logotipo no topo, uma foto do produto ou escolhas de resposta baseadas em imagem que são mais fáceis de digitalizar do que opções simples.
Adicionar uma imagem a um formulário WordPress é mais fácil do que você imagina, e você não precisará escrever nenhum código. Vou guiá-lo por todo o processo passo a passo, desde a instalação do plugin até a inserção da sua imagem e a publicação do formulário finalizado.
Crie o seu formulário de imagem WordPress agora! :)
Como Adicionar uma Imagem ao WordPress
O processo para adicionar imagens ao WordPress varia dependendo de onde exatamente está a inserir uma imagem. Neste tutorial, vamos mostrar-lhe alguns dos cenários mais comuns para carregar imagens no WordPress.
Passo 1: Instalar o Plugin WPForms Pro
WPForms é o plugin de formulários mais fácil para iniciantes no WordPress, com mais de 2.100 modelos de formulários e um construtor de arrastar e soltar, para que possa começar com um modelo pronto em vez de uma página em branco.
O que mais gosto no WPForms para isto é o campo Conteúdo. Ele fornece um pequeno editor visual diretamente no construtor de formulários, para que possa carregar uma imagem, adicionar um título ou inserir um logótipo sem sair da página ou tocar em qualquer HTML.
O campo Conteúdo é uma funcionalidade paga, pelo que precisará de uma licença WPForms Pro para o utilizar, que também desbloqueia a biblioteca completa de modelos, juntamente com pagamentos, inquéritos e os outros add-ons que provavelmente desejará à medida que os seus formulários crescem.
Para começar, adquira a licença WPForms Pro. Assim que a tiver comprado, instale e ative o plugin no seu site. Se nunca adicionou um plugin antes, o nosso guia sobre instalar o WPForms irá guiá-lo.
Atualize para WPForms Pro Agora!
Passo 2: Crie o seu formulário
Com o WPForms ativo, é hora de construir o formulário que conterá a sua imagem. No seu painel WordPress, vá para WPForms » Adicionar Novo para abrir o construtor de formulários.
Na tela de configuração, dê um nome ao seu formulário e escolha um modelo para começar. Usarei o modelo Formulário de Contacto Simples, então passe o rato sobre ele e clique em Usar Modelo.
O modelo carrega no construtor com todos os campos padrão já no lugar, prontos para você personalizar.
Passo 3: Insira uma imagem no seu formulário
Para adicionar a sua imagem, usará o campo Conteúdo, que permite colocar imagens, títulos e texto formatado em qualquer lugar do seu formulário. Se quiser um resumo completo do que ele pode fazer, a documentação do campo Conteúdo cobre isso.
Encontre o campo Conteúdo no painel esquerdo e arraste-o para o seu formulário. Estou a adicionar um logótipo no topo, então vou soltar o campo acima dos outros campos.
Clique no campo que acabou de adicionar para abrir as suas Opções de Campo à esquerda, onde encontrará um pequeno editor visual para adicionar conteúdo.
Logo acima do editor, clique no botão Adicionar Média.
Em seguida, clique em Selecionar Ficheiros para carregar uma imagem do seu computador, ou escolha uma que já esteja na sua Biblioteca de Média.
Assim que a sua imagem for carregada, pode preencher detalhes como o texto alternativo e o título. Quando estiver pronto, clique em Inserir no Formulário na parte inferior.
A imagem é adicionada ao campo, embora não apareça na pré-visualização do formulário imediatamente. Clique no botão Atualizar Pré-visualização abaixo do editor para que ela apareça.
Veja como o formulário fica depois de a imagem estar no lugar e a pré-visualização ter sido atualizada.
Se quiser mais controlo sobre a aparência do seu conteúdo, clique no botão Expandir Editor no canto inferior direito.
A partir daí, pode alterar o alinhamento, adicionar uma lista com marcadores e formatar o texto da mesma forma que faria numa publicação.
Quando tudo parecer correto, clique em Guardar no canto superior direito do construtor. Este mesmo campo de Conteúdo é o que usaria para adicionar uma imagem de cabeçalho ou logótipo, pelo que cobre a maioria dos retoques visuais de que um formulário necessita.
Passo 4: Publique o seu formulário
Com a sua imagem no lugar, o último passo é colocar o formulário no seu site. O WPForms tem um assistente de incorporação integrado que trata disso em alguns cliques.
Comece por clicar no botão Incorporar no topo do construtor de formulários.
Uma janela aparece a perguntar para onde gostaria que o formulário fosse. Clicarei em Criar Nova Página para o colocar numa página nova.
Dê um nome à nova página e, em seguida, clique em Vamos Lá.
O WPForms coloca-o no editor do WordPress com o seu formulário já incorporado. Quando estiver satisfeito com ele, clique em Publicar para o colocar online.
O seu formulário está agora online, com a sua imagem a aparecer exatamente onde a colocou.
Mais formas de adicionar imagens aos seus formulários
O campo de Conteúdo cobre a maioria das situações, mas o WPForms oferece-lhe algumas outras formas de trabalhar com imagens. Estas são opcionais, por isso use a que melhor se adequa ao que está a construir.
Adicionar escolhas de imagem a campos de formulário
Isto funciona com campos como Múltipla Escolha, Caixas de Verificação e Múltiplos Itens, e é uma funcionalidade gratuita, pelo que pode experimentá-la mesmo na versão WPForms Lite.
Pode ver a lista completa de campos suportados no guia de escolhas de imagem. Para ativá-lo, abra as Opções do Campo do campo e ative o interruptor Usar Escolhas de Imagem.
Receberá então um botão Carregar Imagem para cada escolha. Clique nele para adicionar uma imagem a essa opção.
Repita isto para o resto das suas escolhas, e uma lista simples transforma-se num conjunto de opções visuais em que os seus visitantes podem tocar.
Se preferir usar ícones em vez das suas próprias imagens, ative o interruptor Usar Escolhas de Ícone em vez disso e escolha na biblioteca de ícones incorporada.
Para um exemplo específico, veja como adicionar uma imagem ao lado de botões de rádio nos seus formulários.
Adicionar imagens com código HTML
Se preferir trabalhar com código, ou se quiser inserir uma imagem que já esteja alojada online, o campo HTML é outra opção. Precisará do URL da imagem para este.
Se a sua imagem ainda não estiver online, carregue-a primeiro. Vá a Media » Adicionar Novo Ficheiro de Média no seu painel.
Clique em Selecionar Ficheiros e escolha a imagem do seu computador.
Assim que terminar o carregamento, clique em Copiar URL para a Área de Transferência para obter a ligação.
Agora abra o formulário que deseja editar, ou crie um novo. Para editar um formulário existente, vá a WPForms » Todos os Formulários.
Selecione o formulário que deseja na página Visão Geral dos Formulários.
No construtor, arraste o campo HTML para o seu formulário.
Clique no campo para abrir as suas Opções do Campo à esquerda.
Pode adicionar um Rótulo para o ajudar a identificar o campo mais tarde, embora não seja exibido no front-end. Para exibir a sua imagem, arraste-a para uma tag de imagem na caixa Código. O formato é <img src="[URL do ficheiro da sua imagem]">, com o seu próprio URL em vez do marcador.
Ao contrário do campo Conteúdo, o campo HTML não terá pré-visualização dentro do construtor. Para verificar o seu trabalho, clique no botão Pré-visualizar no topo para ver o formulário completo.
A partir daí, publique o formulário da mesma forma que lhe mostrei anteriormente.
FAQs sobre como adicionar imagens a formulários WordPress
Adicionar imagens aos seus formulários levanta algumas questões comuns. Aqui ficam respostas rápidas às que ouço com mais frequência.
É possível adicionar uma imagem a um formulário WordPress gratuitamente?
Sim, em parte. As opções de imagem para campos selecionáveis funcionam no plugin gratuito WPForms Lite. O campo Conteúdo, que é a forma mais fácil de adicionar um logótipo ou uma imagem autónoma, é uma funcionalidade paga que começa no plano Basic.
Como posso permitir que os visitantes carreguem as suas próprias imagens para o meu formulário?
Esse é um campo diferente chamado Carregamento de Ficheiros, que permite às pessoas anexar imagens ou documentos quando enviam. Pode ver como funciona na página de funcionalidades de carregamentos de ficheiros.
Como adiciono um logótipo ao meu formulário?
Use o campo Conteúdo no topo do seu formulário e carregue o seu logótipo como imagem. Para um tutorial focado apenas nisto, siga o nosso guia sobre como adicionar uma imagem de cabeçalho ou logótipo a um formulário WordPress.
Em seguida, permita que os visitantes enviem as suas próprias imagens
Agora que pode adicionar imagens aos seus formulários, pode querer inverter a situação e permitir que os seus visitantes carreguem as suas próprias imagens para o WordPress através de um formulário. É igualmente simples de configurar.
Quer continuar a refinar a aparência dos seus formulários? Dê uma vista de olhos ao nosso guia sobre estilização do WPForms usando o editor de blocos, que lhe mostra como desenhar os seus formulários sem qualquer código.
Crie o seu formulário de imagem 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.
Olá.
Quando quero colocar uma imagem no meu formulário, ela não se adapta ao tamanho do formulário, é sempre demasiado grande.
Como posso torná-la mais "responsiva"?
Obrigado!
Olá Guillaume - Peço desculpa pelo problema! Para tornar as imagens responsivas, pode adicionar tamanhos de imagem em % e ajustar o tamanho, como
No entanto, para garantir que respondemos à sua pergunta da forma mais completa possível, poderia contactar a nossa equipa de suporte com mais alguns detalhes sobre o que pretende fazer?
Obrigado! :)
Como é que os utilizadores podem enviar a sua imagem no formulário? do seu computador ou usando a webcam
Olá Sohaib - Boa pergunta! Pode primeiro armazenar a imagem no armazenamento do seu computador (inclui as capturadas com webcam) e depois seguir as instruções do Passo 2, referindo-se a este mesmo artigo.
Espero que isto ajude! 🙂
Como é que os meus CLIENTES podem publicar as suas imagens no meu site através de um formulário que criei, digamos para vender um carro ou equipamento?
Olá Carl! A forma mais fácil de permitir que os seus clientes criem os seus próprios anúncios seria através do nosso complemento de Submissão de Posts, especialmente com o nosso recentemente lançado editor de Campo de Texto Rico :)
Com estes dois combinados, os seus utilizadores poderão praticamente desenhar o seu anúncio como quiserem, enviar o formulário, e ele será adicionado diretamente ao seu site (ou pendente da sua aprovação).
Espero que isto ajude a esclarecer :) Se tiver mais alguma questão sobre isto, por favor contacte-nos se tiver uma subscrição ativa. Se não tiver, não hesite em colocar-nos algumas questões nos nossos fóruns de suporte.
Como posso alterar o logótipo de pesquisa do formulário do widget?
Olá Cory! Peço desculpa, mas não tenho a certeza se percebi a que te referes.
Quando tiveres oportunidade, contacta a nossa equipa aqui se tiveres uma subscrição ativa.
Se não tiveres, não hesites em contactar os nossos fóruns de suporte.
Obrigado!
Adicionei a imagem no meu formulário usando HTML, mas não carrega a imagem no email.
Adicionei algumas imagens no cabeçalho para poder imprimir a entrada do formulário juntamente com os logótipos no topo, mas sem sucesso.
Olá Aman!
Obrigado por nos contactares!
A razão pela qual não passamos campos HTML, campos de Divisor de Secção ou descrições (os dois últimos são essencialmente campos HTML) é que estas áreas permitem HTML completo, o que significa que será comum conterem coisas que irão quebrar as notificações por email ou causar problemas de entrega.
No entanto, temos um filtro que te permitirá incluir campos não de entrada nos teus emails. Aqui está o nosso tutorial com todos os detalhes, mais o código de que precisas: https://wpforms.com/developers/include-page-break-section-divider-and-html-fields-in-notifications/.
Temos também um tutorial útil com detalhes sobre como adicionar código personalizado como este ao teu site: https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ (para uma opção especialmente fácil, recomendo a opção do plugin Code Snippets).
Ou, se preferires evitar PHP, podes considerar modificar o corpo das tuas notificações para incluir o texto de que precisas. Poderias fazer isto construindo o conteúdo da notificação de uma forma mais personalizada usando texto normal, HTML e Smart Tags.
Esta opção provavelmente oferece o maior controlo, pois podes escolher exatamente quais os detalhes que gostarias de incluir na tua notificação.
Peço desculpa se isto não é exatamente o que procuravas, mas espero que uma destas ideias possa funcionar para ti. Podes, por favor, dizer-me se tens mais alguma questão?
Obrigado!
Posso fazer com que um utilizador use a câmara do seu dispositivo para tirar uma foto e carregá-la num único passo, em vez de primeiro tirar uma foto, guardá-la no seu desktop e depois carregar a foto. Idealmente, gostaria que o utilizador carregasse uma foto de uma biblioteca se tiver uma foto existente, mas se preferir, pode simplesmente tirar uma foto da câmara e carregá-la. Existe alguma forma de fazer isto no WPForms?
Olá Anil! O campo de Upload de Ficheiro, quando acedido por um dispositivo móvel, pode fornecer a opção para os utilizadores carregarem uma imagem diretamente da sua câmara. No entanto, depende se esse dispositivo móvel foi configurado para permitir que o navegador aceda à sua câmara. Se não for, a opção não estará disponível.
Espero que isto ajude a esclarecer :) Se tiver mais alguma questão sobre isto, por favor contacte-nos se tiver uma subscrição ativa. Se não tiver, não hesite em colocar-nos algumas questões nos nossos fóruns de suporte.
Olá,
O WPForms trata os dados de registo do utilizador da mesma forma que o WooCommerce? Se um utilizador finalizar a compra na minha loja de comércio eletrónico e registar uma conta, os seus dados são duplicados, uma vez no WooCommerce e outra vez no registo do WPForms?
Olá Ann, o nosso suplemento de Registo de Utilizador não fornece uma interface para gerir ou editar utilizadores existentes e foca-se unicamente no processo de criação de conta. No entanto, não temos qualquer integração com o WooCommerce.
Dito isto, para garantir que respondemos à sua pergunta da forma mais completa possível e evitar qualquer confusão, poderia contactar a nossa equipa?
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.
O WPForms suporta media gib? Ou a incorporação de um código curto de um plugin de visualização 3D?
Olá Melissa – Teríamos todo o gosto em ajudar! Quando tiver oportunidade, envie-nos uma mensagem de suporte para que possamos ajudá-lo.
Se tiver uma licença WPForms, tem acesso ao nosso suporte por e-mail, por isso, por favor, envie um ticket de suporte.
Caso contrário, fornecemos suporte complementar limitado no fórum de suporte do WPForms Lite no WordPress.org.
Obrigado 🙂
Como adiciono uma imagem num botão de envio do wpforms no WordPress?
Até agora, só mostra como adicionar ícones. Mas tenho uma imagem personalizada que gostaria de adicionar.
Olá Aser – Para adicionar uma imagem ao botão de envio, pode considerar usar o seguinte CSS:
.wpforms-submit-container .wpforms-submit { background-image: url('URL_da_imagem'); background-size: cover; padding-left: 40px; }E caso ajude, aqui fica um tutorial detalhado sobre como adicionar CSS personalizado como este ao seu site.
O meu código é algo como isto:
.wpforms-submit-container .wpforms-submit { background-image: url(‘https://lhamosplane.world/wp-content/uploads/2023/07/th-1787430678.B.png’); background-size: cover; padding-left: 40px; }
No entanto, o URL não é captado, o que significa que a imagem não está a ser exibida. Não tenho a certeza se compreende o que pretendo, mas quero que uma imagem .png seja visível ao lado do texto "Enviar" dentro do botão de envio, à esquerda.
Encontrei este código do seu tutorial que exibe ícones Fantastique e faz quase o que pretendo, mas não consigo adicionar um URL da minha imagem de eleição.
.wpforms-form button[type=submit]:hover { background-color: #ac2428 !important; }
.wpforms-form button[type=submit]:before { content: ‘\f1d8’; /* Unicode para ícone, certifique-se de manter as aspas e a barra invertida */ margin-right: 10px !important; /* Distância entre o ícone e o texto do botão */ }
Olá Aser – Teríamos todo o gosto em ajudar! Quando tiver oportunidade, envie-nos uma mensagem de suporte para que possamos ajudá-lo.
Se tiver uma licença WPForms, tem acesso ao nosso suporte por e-mail, por isso, por favor, envie um ticket de suporte.
Caso contrário, fornecemos suporte complementar limitado no fórum de suporte do WPForms Lite no WordPress.org.
Obrigado 🙂
Como alinhar uma imagem à esquerda de um formulário?
Olá JM – Se pretende exibir uma imagem à esquerda e campos à direita, pode considerar usar o campo de layout.
Olá, tenho uma questão para saber se posso comprar o seu módulo para fazer o formulário de que preciso. A primeira linha contém 6 botões de rádio acima dos quais está uma imagem (portanto, 6 imagens), mas que não são “rótulos”. Quando se clica numa imagem, abre-se um popup a exibir a imagem maior e texto explicativo. É possível fazer isto com o WP-Forms? Agradeço desde já.
Olá Françoise – Teríamos todo o gosto em ajudar! Quando tiver oportunidade, por favor, envie um pedido de suporte para que possamos ajudá-lo.