Como Adicionar uma Imagem de Cabeçalho ou Logo em um Formulário no WordPress

Quer adicionar uma imagem no cabeçalho do seu formulário? Talvez seja seu logo, um banner que combine com seu site, ou uma foto que mostre aos visitantes do que se trata o formulário.

O que quer que você esteja imaginando, um bloco simples de campos cinzas não está ajudando sua marca. Já vi tantos sites bonitos com formulários que parecem ter sido emprestados do site de outra pessoa.

A solução é o campo de Conteúdo no WPForms. Ele permite que você insira imagens, logos e textos diretamente em seus formulários, sem necessidade de código.

Neste post, vou guiá-lo por todo o processo de adição de uma imagem de cabeçalho de formulário no WordPress, passo a passo.

Adicione uma Imagem de Cabeçalho ao Seu Formulário Agora

Por que Devo Adicionar uma Imagem de Cabeçalho a um Formulário?

Uma imagem de cabeçalho de formulário personalizada é uma das maneiras mais rápidas de fazer seu formulário parecer que realmente pertence ao seu site. Em vez de um conjunto genérico de campos, os visitantes veem sua marca primeiro, o que constrói confiança antes que eles digitem uma única letra.

Isso também define expectativas. Uma imagem de cabeçalho ou logo dá às pessoas uma ideia clara de quem elas estão contatando e por quê, e conecta seu formulário ao esquema de cores e tema de design geral do seu site.

Seu cabeçalho pode refletir o assunto do formulário, ou pode simplesmente ser o logo da sua empresa. E se você quiser o mesmo visual de marca em todos os formulários que criar, você pode criar modelos de formulário com marca para que cada novo formulário comece com seu cabeçalho já no lugar.

Logos vêm em todos os tamanhos também. Se você está se perguntando o quão grande o seu deve ser, veja nosso guia sobre o melhor tamanho de logo para sites.

Como Adicionar uma Imagem de Cabeçalho ou Logo em um Formulário no WordPress

Neste guia passo a passo, mostrarei como adicionar uma imagem de cabeçalho ou logotipo aos seus formulários WordPress sem tocar em nenhum código. Este tutorial é perfeito para iniciantes, e você não precisará de CSS personalizado, um construtor de páginas ou o Personalizador do WordPress.

Etapa 1: Instale o Plugin Básico WPForms

WPForms é a maneira mais fácil de criar formulários de marca no WordPress. Você obtém um construtor de arrastar e soltar mais mais de 2.100 modelos para começar, então você nunca ficará olhando para um formulário em branco se perguntando por onde começar.

O que eu mais gosto no WPForms para este trabalho em particular é que o campo de Conteúdo funciona exatamente como o editor do WordPress que você já conhece. Adicionar seu logotipo a um formulário parece exatamente como adicionar uma imagem a uma postagem de blog, até mesmo o botão Adicionar Mídia.

Você precisará de uma licença para usar o campo de Conteúdo, pois ele não está incluído no Lite. A boa notícia é que ele é desbloqueado no Basic, o primeiro nível pago, então você não precisa gastar com um plano mais caro apenas para personalizar seus formulários.

Para começar, compre a licença Basic. Em seguida, instale o WPForms em seu site. Se precisar de ajuda, siga estas instruções sobre como adicionar um plugin ao WordPress.

Obtenha o WPForms Basic Agora!

Etapa 2: Selecione o Modelo de Formulário de Contato Simples

Depois de configurar o plugin em seu site, vá para WPForms » Adicionar Novo em seu painel do WordPress.

A partir daqui, você encontrará uma enorme biblioteca de modelos de formulário para escolher.

Mas primeiro, vamos nomear o formulário. Para este tutorial, nomearemos nosso formulário como “Fale Conosco”, que será exibido no topo do formulário.

Agora, selecionaremos o modelo Formulário de Contato Simples.

Isso nos leva diretamente ao construtor de formulários de arrastar e soltar, onde personalizaremos o modelo.

Etapa 3: Adicionar o Campo de Conteúdo

Agora que estamos no construtor de formulários, encontre o campo Conteúdo na guia Campos.

Simplesmente clique em Conteúdo e, em seguida, arraste e solte o campo onde desejar em seu formulário.

Estamos arrastando o campo de Conteúdo para o topo do formulário para que a mídia carregada atue como uma seção de cabeçalho.

Quando o campo estiver no lugar na área de visualização, clique nele para abrir suas Opções de Campo. É aqui que você adicionará sua mídia e editará o texto usando o editor no painel esquerdo.

Você pode editar seu conteúdo visualmente ou mudar para o editor de Texto para trabalhar em HTML. Para um resumo completo de tudo o que este campo pode fazer, confira nosso guia completo para usar o campo de Conteúdo.

Ótimo! Agora estamos prontos para carregar nossa imagem e adicionar algum texto ao formulário.

Etapa 4: Carregar o Logotipo ou Imagem da Sua Empresa

Em seguida, clique em Adicionar Mídia para carregar sua imagem no campo de Conteúdo.

Você poderá carregar uma nova imagem ou selecionar uma de sua Biblioteca de Mídia. Arquivos JPG e PNG são aceitos.

Algumas dicas rápidas antes de fazer o upload. Para logotipos, use um PNG com fundo transparente para que seu logotipo não fique dentro de uma caixa branca, e uma largura de cerca de 200 pixels é um bom ponto de partida. Para imagens de cabeçalho estilo banner, escolha algo com pelo menos a mesma largura do seu formulário, aproximadamente 700 a 800 pixels para a maioria das áreas de conteúdo do WordPress, para que permaneça nítido em tamanho real.

Ainda não tem um logotipo? Estes geradores de logotipo com IA podem criar um sólido em alguns minutos.

Com nosso logotipo personalizado no lugar, podemos então editar opções de personalização, como o tamanho da imagem, orientação e outros detalhes.

Para garantir que nossa imagem funcione como um verdadeiro cabeçalho de formulário, fomos para a guia Avançado e definimos o Tamanho do Campo para Grande.

Em seguida, de volta à guia Geral, garantimos que a imagem esteja centralizada no campo usando as opções de formatação do editor de texto.

Também podemos editar o texto no campo. Escrevemos uma curta mensagem de boas-vindas para os visitantes aqui, além de um prompt amigável para preencher o formulário de contato.

Como a mídia acima, você pode formatar o texto livremente no campo Conteúdo. Clique em Expandir Editor abaixo da caixa de texto para ainda mais opções de edição.

Para nosso logotipo aqui, centralizamos o texto com o restante da imagem.

Você pode querer personalizar os outros campos do formulário também.

Por exemplo, aumentamos o tamanho do campo Nome para Grande para corresponder à largura da nossa imagem de cabeçalho acima dele.

Existem muitas maneiras de ajustar os campos do seu formulário, e você pode pré-visualizar suas alterações conforme avança.

Certifique-se de clicar em Atualizar Pré-visualização para ver os ajustes feitos no campo Conteúdo.

Nosso cabeçalho está ótimo, então vamos colocar este formulário em uma página.

Etapa 5: Salvar e Incorporar o Formulário

Pressione o botão Salvar no canto superior direito do construtor de formulários para confirmar suas alterações.

Seja verificando a visualização da página ou não, você precisará clicar em Salvar antes de prosseguir.

Agora, clique no botão Incorporar no topo para adicionar este formulário a uma página do seu site WordPress.

Após clicar em Incorporar, escolheremos onde colocar o novo formulário.

Você pode selecionar uma página existente ou criar uma nova. Para este tutorial, estamos criando uma nova página, então clicaremos em Criar Nova Página.

Depois disso, somos solicitados a nomear a nova página.

Chamaremos a nossa de “Fale Conosco”, já que foi assim que nomeamos este formulário quando selecionamos o modelo.

Agora podemos ver o formulário em uma página recém-criada para o nosso site WordPress. A partir daqui, podemos pré-visualizar a página, salvá-la como rascunho ou publicá-la.

Mais uma recomendação. Nas configurações do bloco no lado direito do editor, oculte o título do formulário para que ele não concorra com sua nova imagem de cabeçalho.

Apenas certifique-se de que o seletor Mostrar Título esteja na posição desligada.

Quando estiver pronto, clique em Publicar para tornar esta página ativa em seu site.

Fantástico! Agora você tem um formulário com uma imagem de cabeçalho ou logotipo personalizado, e tudo isso provavelmente levou menos de dez minutos.

FAQs Sobre Adicionar uma Imagem de Cabeçalho ao Formulário no WordPress

Adicionar uma imagem de cabeçalho ou logotipo aos seus formulários do WordPress tende a levantar as mesmas perguntas. Aqui estão respostas rápidas para as que ouvimos com mais frequência.

Por que não consigo encontrar o campo Conteúdo no WPForms?

O campo Conteúdo está disponível no WPForms Basic e superior, portanto, ele não aparecerá na lista de campos se você estiver usando a versão gratuita Lite. Atualize para qualquer licença paga e o campo aparecerá no construtor de formulários.

Qual o tamanho ideal para uma imagem de cabeçalho de formulário?

Para um logo, cerca de 200 pixels de largura com fundo PNG transparente funciona bem. Para um cabeçalho estilo banner, combine a largura do seu formulário, que geralmente é de 700 a 800 pixels em uma área de conteúdo padrão do WordPress. Começar perto do tamanho de exibição mantém sua imagem nítida.

Posso adicionar imagens em outros lugares do meu formulário?

Com certeza. O campo Conteúdo pode ser colocado em qualquer lugar do seu formulário e você pode usar mais de um. Se você quiser imagens ao lado de suas perguntas ou em outros locais criativos, veja como adicionar imagens em qualquer lugar em seus formulários do WordPress.

Posso estilizar meu formulário para combinar com a marca do meu site?

Sim. Se você incorporar seu formulário com o bloco WPForms, poderá alterar cores, fundos e estilos de campo diretamente no editor de blocos sem escrever CSS. Nosso guia sobre como estilizar seus formulários detalha todas as opções.

Posso alterar o cabeçalho do meu site em vez do cabeçalho do formulário?

Este tutorial cobre a área do cabeçalho de um formulário. Se você quiser atualizar o cabeçalho de todo o seu site, isso é controlado pelo seu tema, e nós cobrimos isso em nosso guia sobre como editar o cabeçalho do seu site no WordPress.

Em seguida, Pare o Spam de Formulário de Contato no WordPress

Com um novo e atraente cabeçalho em seu formulário, você convidará muito mais visitantes a preenchê-lo. No entanto, você não quer que metade dessas entradas sejam lixo.

Para manter os spammers longe do seu novo e brilhante formulário, confira nosso guia sobre como prevenir envios de spam em seus formulários do WordPress.

Crie Seu Formulário Personalizado Agora

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 ajudou você, por favor, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.