Resumo de IA
Você quer adicionar uma imagem ao seu site WordPress?
Imagens são uma parte essencial de todo conteúdo online. Elas melhoram o apelo visual do seu site e tornam seu conteúdo mais legível.
Neste tutorial, vou guiá-lo pelo processo de adicionar uma imagem a diferentes partes do seu site WordPress.
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.
Aqui estão as instruções escritas se você preferir ler junto.
Crie Seu Formulário de Imagem WordPress Agora
Cenário nº 1: Adicionando Imagem a um Post do WordPress
Se você está criando um novo post ou página no WordPress, as chances são de que você precisará adicionar algumas imagens para fazer seu conteúdo se destacar.
Para adicionar uma imagem ao seu post, você primeiro precisará ir ao editor de posts do WordPress navegando para Posts » Todos os Posts no menu de administração.
Isso o levará imediatamente ao editor Gutenberg do WordPress. Uma vez dentro do editor, simplesmente clique no botão ‘+‘ para abrir a lista de blocos disponíveis e, em seguida, selecione o bloco Imagem.
Quando o bloco Imagem for inserido na área de conteúdo, você verá as opções para fazer upload de uma nova imagem do seu computador, selecionar uma imagem já carregada da Biblioteca de Mídia ou inserir uma imagem de um URL.
Se você estiver adicionando uma nova imagem que ainda não existe na biblioteca, clique no botão Upload.
Em seguida, selecione a imagem que você deseja carregar do seu computador e ela deverá aparecer imediatamente em seu post.
É assim que é fácil adicionar uma imagem a um post de blog do WordPress!
O processo para inserir imagens em páginas é semelhante. Você só precisará seguir o mesmo processo após clicar na opção de menu Adicionar Nova Página na barra lateral de administração do seu WordPress.
Cenário nº 2: Adicionando Imagem a um Formulário do WordPress
Se você quiser adicionar uma imagem a um formulário do WordPress, primeiro precisará instalar um plugin de formulário com funcionalidade de upload de imagem fácil.
WPForms é um dos poucos plugins de formulário para WordPress que tornam incrivelmente fácil inserir uma imagem em qualquer lugar dentro do seu formulário.
Instalar WPForms
Se você ainda não tem o WPForms instalado em seu site, recomendamos obter a licença WPForms Pro.
Para obter ajuda com a instalação do plugin, você pode ver nosso guia de documentação sobre a instalação do WPForms.
Depois de instalar o plugin, passe para a próxima etapa, onde mostraremos como criar um formulário.
Criar um Novo Formulário
No seu painel do WordPress, vá para WPForms » Adicionar Novo.
Você verá a janela de configuração do formulário abrir em apenas alguns segundos. Aqui, você pode nomear seu formulário e escolher entre um modelo pré-fabricado para começar rapidamente.
Usaremos o Formulário de Contato Simples para este tutorial pairando o cursor sobre ele e clicando em Usar Modelo.
O modelo de formulário será carregado em sua tela com todos os campos necessários já adicionados.
Podemos personalizar este formulário para adicionar uma imagem com bastante facilidade, como mostrado na próxima etapa.
Inserir uma Imagem no Seu Formulário do WordPress
Para inserir uma imagem, você precisará adicionar o campo Conteúdo ao seu formulário. Simplesmente arraste e solte o campo Conteúdo do painel esquerdo para o direito.
Vamos adicionar um logotipo no topo do formulário, então colocaremos o campo Conteúdo no topo.
Depois de adicionar o campo, clique nele para abrir suas Opções de Campo no painel esquerdo, o que permite usar o editor visual para inserir conteúdo.
Em seguida, você terá que clicar no botão Adicionar Mídia logo acima do editor visual.
Agora, clique no botão Selecionar Arquivos.
Você pode selecionar qualquer arquivo de imagem para fazer upload e inserir em seu formulário. Assim que for carregado, você pode inserir detalhes como o texto alternativo e o título. Em seguida, clique no botão Inserir no Formulário na parte inferior.
Fazer isso inserirá a imagem dentro do seu formulário. A imagem não aparecerá imediatamente no formulário, embora você possa vê-la no editor à esquerda.
Você só precisará pressionar o botão Atualizar Visualização abaixo do editor visual para ver a imagem no formulário.
É assim que deve ficar depois de adicionar a imagem usando o campo Conteúdo e atualizar a visualização.
Você também pode acessar opções adicionais de formatação clicando no botão Expandir Editor no canto inferior direito do editor.
Por exemplo, você pode ajustar o alinhamento do seu conteúdo, adicionar uma lista com marcadores para texto e muito mais.
Excelente! Agora que você adicionou uma imagem ao seu formulário, prossiga e pressione o botão Salvar no canto superior direito do construtor de formulários.
Tudo o que resta agora é publicar este formulário em seu site para que seus visitantes possam acessá-lo.
Publicar Seu Formulário Online
O WPForms vem com um assistente de incorporação fácil que torna a publicação um processo rápido e simples.
Comece clicando no botão Incorporar na parte superior do construtor de formulários.
Em seguida, você verá uma janela modal aparecer, pedindo para escolher onde você deseja incorporar seu formulário. Selecionaremos Criar Nova Página para incorporar um formulário em uma nova página.
Depois disso, insira um nome para sua página e clique em Vamos Lá.
O assistente o levará ao editor do WordPress, onde você encontrará seu formulário incorporado.
Quando estiver pronto para prosseguir, pressione o botão Publicar no canto superior direito para publicar seu formulário.
E é isso! Você agora criou com sucesso um formulário com uma imagem adicionada a ele.
Há muito mais que você pode fazer com o WPForms quando se trata de adicionar gráficos. Vamos mostrar algumas dicas bônus a seguir.
Bônus: Mais Maneiras de Usar Imagens em Formulários do WordPress
A flexibilidade do WPForms torna muitas coisas interessantes possíveis quando se trata de adicionar mídia aos seus formulários.
Vamos mostrar algumas dicas que podem ajudar a tornar seus formulários ainda melhores, juntamente com métodos alternativos de inserção de imagens.
Adicionando Imagens a Campos Selecionados
No exemplo acima, mostramos como inserir uma imagem como um item de conteúdo em seu formulário.
Mas você sabia que também pode usar imagens para acompanhar itens selecionáveis em campos como Caixas de Seleção e Múltiplos Itens?
Para usar imagens nas opções de um campo de Múltiplos Itens, você pode clicar no botão de alternância Usar Escolhas de Imagem em suas Opções de Campo.
Após ativar as Escolhas de Imagem, você poderá carregar imagens para cada escolha em seu campo. Clique no botão Carregar Imagem para adicionar facilmente qualquer imagem.
Você pode repetir isso para cada escolha para transformar um formulário simples em algo mais visualmente envolvente.
Na verdade, você não está limitado apenas a carregar imagens personalizadas para as escolhas. O WPForms também oferece acesso a uma enorme biblioteca de ícones pré-carregados que você pode adicionar às suas escolhas.
Para usar ícones em suas escolhas, clique no botão de alternância Usar Escolhas de Ícone.
Experimente. É fácil de fazer e seus visitantes vão gostar mais de preencher seus formulários quando houver elementos visuais para chamar a atenção!
Adicionando Imagens com Código HTML
Anteriormente, mostramos como inserir rapidamente uma imagem em seu formulário WordPress usando o campo de Conteúdo.
No entanto, se você preferir trabalhar diretamente com código HTML, também pode inserir imagens usando um método um pouco mais técnico.
Para que isso funcione, é necessário que a imagem que você deseja adicionar ao seu formulário já esteja carregada em sua Biblioteca de Mídia e que você conheça o URL dela.
Se não, você pode carregar uma e obter o URL agora. No seu painel do WordPress, clique em Mídia » Adicionar Nova Mídia.
Isso abrirá a área de upload da Biblioteca de Mídia. Clique no botão Selecionar Arquivos para continuar.
Agora, escolha o arquivo que deseja carregar do seu computador. Quando o arquivo terminar de carregar, você poderá ver o URL dele.
Clique no botão Copiar URL para a Área de Transferência para obter o link.
Agora, abra um formulário existente ao qual você deseja adicionar a imagem ou crie um novo, como mostramos anteriormente neste tutorial.
Você pode editar um formulário existente indo para WPForms » Todos os Formulários.
Agora, selecione o formulário no qual deseja inserir sua imagem na página Visão Geral dos Formulários.
Dentro do construtor de formulários, arraste e solte o campo HTML na área direita onde está o seu formulário.
Após fazer isso, clique no campo HTML que você acabou de colocar dentro do seu formulário para abrir suas Opções de Campo à esquerda.
Você pode usar a opção Rótulo para dar um nome ao campo HTML para que possa identificá-lo no formulário com mais facilidade, mas isso não será visível no frontend.
Finalmente, a imagem que você deseja inserir precisará ser adicionada dentro de uma tag img na caixa Código. Você pode usar este formato para adicionar sua imagem: <img src="[insira o URL do arquivo da sua imagem]">
Note que, ao contrário do campo de Conteúdo, o campo HTML não pode carregar o código para atualizar a pré-visualização dentro do construtor de formulários. Mas você pode usar o botão Pré-visualizar no topo para ver uma pré-visualização de todo o seu formulário.
Isso é útil para verificar se o código HTML que você inseriu está funcionando corretamente.
Você pode então prosseguir e publicar o formulário seguindo os mesmos passos que destacamos acima.
E é isso! Agora você está pronto para adicionar uma imagem ao seu site WordPress, seja para uma postagem ou um formulário.
Crie Seu Formulário de Imagem WordPress Agora
Em seguida, Aceitar Imagens Enviadas por Usuários
O WPForms também facilita para seus visitantes enviar suas próprias imagens para o WordPress, então confira isso em seguida.
Procurando mais maneiras de projetar e estilizar seus formulários? Confira este artigo sobre estilização do WPForms usando o editor de blocos. Este guia mostrará como projetar seu formulário como um profissional usando controles simples e sem nenhum código!
Pronto para construir seu formulário? Comece hoje mesmo com o plugin construtor 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 te ajudou, por favor, siga-nos no Facebook e X para mais tutoriais e guias gratuitos de 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 adiciono uma imagem no botão de envio 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.