Resumo de IA
A maioria dos formulários do WordPress são 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 opções 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 do 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 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 você está inserindo uma imagem. Neste tutorial, mostraremos alguns dos cenários mais comuns para fazer upload de imagens no WordPress.
Passo 1: Instale 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 você possa começar com um modelo pronto em vez de uma página em branco.
O que eu mais gosto no WPForms para isso é o campo Conteúdo. Ele oferece um pequeno editor visual diretamente no construtor de formulários, para que você possa carregar uma imagem, adicionar um título ou inserir um logotipo sem sair da página ou tocar em qualquer HTML.
O campo Conteúdo é um recurso pago, portanto, você precisará de uma licença WPForms Pro para usá-lo, que também desbloqueia a biblioteca completa de modelos, juntamente com pagamentos, pesquisas e os outros add-ons que você provavelmente desejará à medida que seus formulários crescerem.
Para começar, adquira a licença WPForms Pro. Depois de comprá-la, instale e ative o plugin em seu site. Se você nunca adicionou um plugin antes, nosso guia sobre como instalar o WPForms o guiará pelo processo.
Atualize para o WPForms Pro Agora!
Passo 2: Crie Seu Formulário
Com o WPForms ativo, é hora de construir o formulário que conterá sua imagem. No painel do 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 Contato Simples, então passe o mouse 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 em Seu Formulário
Para adicionar sua imagem, você usará o campo Conteúdo, que permite colocar imagens, títulos e texto formatado em qualquer lugar do seu formulário. Se você quiser saber tudo o 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 adicionando um logotipo no topo, então soltarei o campo acima dos outros campos.
Clique no campo que você acabou de adicionar para abrir suas Opções de Campo à esquerda, onde você 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 Arquivos para carregar uma imagem do seu computador ou escolha uma que já esteja na sua Biblioteca de Mídia.
Depois que sua imagem for carregada, você 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 fazê-la aparecer.
Veja como o formulário fica depois que a imagem é colocada e a pré-visualização é atualizada.
Se você quiser mais controle sobre a aparência do seu conteúdo, clique no botão Expandir Editor no canto inferior direito.
A partir daí, você pode alterar o alinhamento, adicionar uma lista com marcadores e formatar o texto da mesma forma que faria em uma postagem.
Quando tudo parecer correto, clique em Salvar no canto superior direito do construtor. Este mesmo campo de Conteúdo é o que você usaria para adicionar uma imagem de cabeçalho ou logotipo, portanto, ele cobre a maioria dos retoques visuais que um formulário precisa.
Passo 4: Publique Seu Formulário
Com sua imagem no lugar, o último passo é colocar o formulário em seu site. O WPForms tem um assistente de incorporação integrado que cuida disso em alguns cliques.
Comece clicando no botão Incorporar no topo do construtor de formulários.
Uma janela aparece perguntando para onde você gostaria que o formulário fosse. Clicarei em Criar Nova Página para colocá-lo em uma página nova.
Dê um nome à nova página e clique em Vamos Lá.
O WPForms o leva ao editor do WordPress com seu formulário já incorporado. Quando estiver satisfeito com ele, clique em Publicar para colocá-lo no ar.
Seu formulário agora está no ar, com sua imagem aparecendo exatamente onde você a colocou.
Mais Maneiras de Adicionar Imagens aos Seus Formulários
O campo de Conteúdo cobre a maioria das situações, mas o WPForms oferece algumas outras maneiras de trabalhar com imagens. Estas são opcionais, portanto, use a que melhor se adapta ao que você está construindo.
Adicionar Escolhas de Imagem aos Campos do Formulário
Isso funciona com campos como Múltipla Escolha, Caixas de Seleção e Múltiplos Itens, e é um recurso gratuito, então você pode experimentá-lo mesmo no WPForms Lite.
Você 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 a opção Usar Escolhas de Imagem.
Em seguida, você receberá um botão Carregar Imagem para cada escolha. Clique nele para adicionar uma imagem a essa opção.
Repita isso para o restante de suas escolhas, e uma lista simples se transforma em um conjunto de opções visuais que seus visitantes podem tocar.
Se você preferir usar ícones em vez de suas próprias imagens, ative a opção Usar Escolhas de Ícone e escolha na biblioteca de ícones integrada.
Para um exemplo específico, veja como adicionar uma imagem ao lado de botões de rádio em seus formulários.
Adicionar Imagens com Código HTML
Se você preferir trabalhar com código, ou quiser inserir uma imagem que já esteja hospedada online, o campo HTML é outra opção. Você precisará da URL da imagem para este.
Se sua imagem ainda não estiver online, carregue-a primeiro. Vá para Mídia » Adicionar Novo Arquivo de Mídia em seu painel.
Clique em Selecionar Arquivos e escolha a imagem do seu computador.
Assim que o upload for concluído, clique em Copiar URL para a Área de Transferência para obter o link.
Agora abra o formulário que deseja editar ou crie um novo. Para editar um formulário existente, vá para WPForms » Todos os Formulários.
Selecione o formulário desejado 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 suas Opções do Campo à esquerda.
Você pode adicionar um Rótulo para ajudar a identificar o campo mais tarde, embora ele não apareça no front-end. Para exibir sua imagem, solte-a em uma tag de imagem na caixa Código. O formato é como <img src="[URL do arquivo da sua imagem]">, com seu próprio URL no lugar do placeholder.
Ao contrário do campo Conteúdo, o campo HTML não terá pré-visualização dentro do construtor. Para verificar seu trabalho, clique no botão Visualizar no topo para ver o formulário inteiro.
A partir daí, publique o formulário da mesma forma que mostrei anteriormente.
Perguntas Frequentes Sobre Adicionar Imagens a Formulários do WordPress
Adicionar imagens aos seus formulários levanta algumas perguntas comuns. Aqui estão respostas rápidas para as que ouço com mais frequência.
É possível adicionar uma imagem a um formulário do 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 maneira mais fácil de adicionar um logotipo ou uma imagem autônoma, é um recurso pago que começa no plano Basic.
Como faço para permitir que os visitantes enviem suas próprias imagens para o meu formulário?
Esse é um campo diferente chamado Upload de Arquivo, que permite que as pessoas anexem imagens ou documentos ao enviar. Você pode ver como funciona na página de recursos de uploads de arquivos.
Como adiciono um logotipo ao meu formulário?
Use o campo Conteúdo no topo do seu formulário e carregue seu logotipo como imagem. Para um tutorial focado apenas nisso, siga nosso guia sobre como adicionar uma imagem de cabeçalho ou logotipo a um formulário do WordPress.
Em seguida, Permita que os Visitantes Enviem Suas Próprias Imagens
Agora que você pode adicionar imagens aos seus formulários, talvez queira inverter a situação e permitir que seus visitantes enviem suas próprias imagens para o WordPress através de um formulário. É igualmente simples de configurar.
Quer continuar refinando a aparência dos seus formulários? Dê uma olhada em nosso guia sobre estilização do WPForms usando o editor de blocos, que mostra como projetar seus formulários sem nenhum código.
Crie Seu Formulário de Imagem 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.
Olá.
Quando quero colocar uma imagem no meu formulário, ela não se adapta ao tamanho do formulário, é sempre muito grande.
Como posso torná-la mais "responsiva"?
Obrigado!
Olá Guillaume - Peço desculpas pelo problema! Para tornar as imagens responsivas, você pode adicionar tamanhos de imagem em % e ajustar o tamanho, como
No entanto, para garantir que respondamos à sua pergunta da forma mais completa possível, você poderia entrar em contato com nossa equipe de suporte com mais alguns detalhes sobre o que você deseja fazer?
Obrigado! 🙂
Como os usuários podem enviar sua imagem no formulário? do computador deles ou usando a webcam
Olá Sohaib - Boa pergunta! Você pode primeiro armazenar a imagem no armazenamento do seu computador (inclui as capturadas usando webcam) e depois seguir as instruções do Passo 2, referindo-se a este mesmo artigo.
Espero que ajude! 🙂
Como meus CLIENTES podem postar suas fotos no meu site através de um formulário que criei, digamos para vender um carro ou equipamento?
Olá Carl! A maneira mais fácil de permitir que seus clientes criem seus próprios anúncios seria através do nosso addon Post Submissions, especialmente com nosso recém-lançado editor de campo de texto rico :)
Com esses dois combinados, seus usuários poderão projetar seu anúncio como quiserem, enviar o formulário e ele será adicionado diretamente ao seu site (ou aguardando sua aprovação).
Espero que isso ajude a esclarecer 🙂 Se você tiver mais alguma dúvida sobre isso, por favor entre em contato conosco se tiver uma assinatura ativa. Se não tiver, não hesite em nos fazer algumas perguntas em nossos fóruns de suporte.
Como posso alterar o logotipo de pesquisa do formulário do widget?
Olá Cory! Peço desculpas, mas não tenho certeza se entendi a que você está se referindo.
Quando tiver um tempo, você poderia entrar em contato com nossa equipe aqui se tiver uma assinatura ativa.
Se você não o fizer, não hesite em entrar em contato em nossos fóruns de suporte.
Obrigado!
Eu adicionei a imagem em meu formulário usando HTML, mas ele não busca a imagem no e-mail.
Adicionei algumas imagens no cabeçalho para que eu possa imprimir a entrada do formulário junto com os logotipos no topo, mas não tive sucesso.
Olá, Aman!
Obrigado por entrar em contato conosco!
O motivo pelo qual não passamos campos HTML, campos de Divisor de Seção ou descrições (os dois últimos são essencialmente campos HTML) é que essas áreas permitem HTML completo, o que significa que será comum que elas contenham coisas que quebrarão as notificações por e-mail ou causarão problemas de entrega.
No entanto, temos um filtro que permitirá incluir campos não de entrada em seus e-mails. Aqui está nosso tutorial com todos os detalhes, mais o código que você precisaria: https://wpforms.com/developers/include-page-break-section-divider-and-html-fields-in-notifications/.
Também temos um tutorial útil com detalhes sobre como adicionar código personalizado como este ao seu 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 você preferir evitar PHP, pode considerar modificar o corpo de suas notificações para incluir o texto que você precisa. Você pode fazer isso construindo o conteúdo da notificação de uma maneira mais personalizada usando texto normal, HTML e Smart Tags.
Esta opção provavelmente oferece o maior controle, pois você pode escolher exatamente quais detalhes deseja incluir em sua notificação.
Peço desculpas se isso não for exatamente o que você estava procurando, mas espero que uma dessas ideias possa funcionar para você. Você poderia me informar se tiver mais alguma dúvida?
Obrigado!
Posso fazer com que um usuário use a câmera do dispositivo para tirar uma foto e carregá-la em uma etapa, em vez de primeiro tirar uma foto, salvá-la no desktop e depois carregar a foto. Idealmente, eu gostaria que o usuário carregasse uma foto de uma biblioteca se ele já tiver uma foto existente, mas se ele preferir, pode simplesmente tirar uma foto da câmera e carregá-la. Existe uma maneira de fazer isso no WPForms?
Olá, Anil! O campo de Upload de Arquivo, quando acessado por um dispositivo móvel, pode oferecer a opção para os usuários fazerem upload de uma imagem diretamente de sua câmera. No entanto, depende se esse dispositivo móvel foi configurado para permitir que o navegador acesse sua câmera. Se não for, a opção não estará disponível.
Espero que isso ajude a esclarecer 🙂 Se você tiver mais alguma dúvida sobre isso, por favor entre em contato conosco se tiver uma assinatura ativa. Se não tiver, não hesite em nos fazer algumas perguntas em nossos fóruns de suporte.
Olá,
O WP-Forms lida com os dados de registro do usuário da mesma forma que o WooCommerce? Se um usuário finalizar a compra em minha loja de comércio eletrônico e registrar uma conta, os dados dela serão duplicados, uma vez no WooCommerce e outra no registro do WP Forms?
Oi Ann, nosso add-on de Registro de Usuário não fornece uma interface para gerenciar ou editar usuários existentes e foca apenas no processo de criação de conta. No entanto, não suportamos nenhuma integração com o WooCommerce.
Dito isso, para garantir que respondamos à sua pergunta da forma mais completa possível e evitar qualquer confusão, você poderia entrar em contato com nossa equipe?
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.
O WPForms suporta mídia gib? Ou a incorporação de um shortcode de um plugin de visualização 3D?
Oi Melissa – Teríamos o maior prazer em ajudar! Quando tiver um tempo, por favor, entre em contato conosco no suporte para que possamos ajudar.
Se você tiver uma licença WPForms, terá acesso ao nosso suporte por e-mail, então por favor envie um ticket de suporte.
Caso contrário, oferecemos suporte complementar limitado no fórum de suporte do WPForms Lite no WordPress.org.
Obrigado 🙂
Como adicionar uma imagem no botão de envio do wpforms no WordPress?
Até agora, você só mostra como adicionar ícones. Mas eu tenho uma imagem personalizada que gostaria de adicionar.
Oi Aser – Para adicionar uma imagem ao botão de envio, você 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 está um tutorial detalhado sobre como adicionar CSS personalizado como este ao seu site.
Meu código se parece com 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, a URL não está sendo capturada, o que significa que a imagem não está sendo exibida. Não tenho certeza se você entende o que eu quero, 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 eu quero, mas não consigo adicionar uma URL para a imagem de minha escolha.
.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 */ }
Oi Aser – Teríamos o maior prazer em ajudar! Quando tiver um tempo, por favor, entre em contato conosco no suporte para que possamos ajudar.
Se você tiver uma licença WPForms, terá acesso ao nosso suporte por e-mail, então por favor envie um ticket de suporte.
Caso contrário, oferecemos suporte complementar limitado no fórum de suporte do WPForms Lite no WordPress.org.
Obrigado 🙂
Como alinhar uma imagem à esquerda de um formulário?
Oi JM – Se você deseja exibir uma imagem à esquerda e os campos à direita – você pode considerar usar o campo de layout.
Olá, tenho uma pergunta para saber se posso comprar seu módulo para fazer o formulário que preciso. A primeira linha contém 6 botões de rádio acima dos quais há uma imagem (portanto, 6 imagens), mas que não são "rótulos". Ao clicar em uma imagem, um pop-up se abre exibindo a imagem maior e um texto explicativo. É possível fazer isso com o WP-Forms? Agradeço desde já.
Oi Françoise – Teríamos o maior prazer em ajudar! Quando tiver um tempo, por favor, envie um ticket de suporte para que possamos ajudar.