Como Adicionar uma Imagem de Cabeçalho ou Logótipo a um Formulário no WordPress

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

O que quer que esteja a imaginar, um bloco simples de campos cinzentos não está a fazer favores à 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 Conteúdo no WPForms. Permite-lhe inserir imagens, logótipos e texto diretamente nos seus formulários, sem necessidade de código.

Nesta publicação, irei 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

Porquê Adicionar uma Imagem de Cabeçalho a um Formulário?

Uma imagem de cabeçalho de formulário personalizada é uma das formas mais rápidas de fazer com que o seu formulário pareça pertencer realmente ao seu site. Em vez de um conjunto genérico de campos, os visitantes veem primeiro a sua marca, o que cria confiança antes de digitarem uma única letra.

Também define expectativas. Uma imagem de cabeçalho ou logótipo dá às pessoas uma ideia clara de quem estão a contactar e porquê, e liga o seu formulário ao esquema de cores e tema de design geral do seu site.

O seu cabeçalho pode refletir o assunto do formulário, ou pode simplesmente ser o logótipo da sua empresa. E se quiser o mesmo aspeto de marca em todos os formulários que cria, pode criar modelos de formulário de marca para que cada novo formulário comece já com o seu cabeçalho.

Os logótipos também vêm em todos os tamanhos. Se estiver a perguntar-se quão grande deve ser o seu, veja o nosso guia sobre o melhor tamanho de logótipo para sites.

Como Adicionar uma Imagem de Cabeçalho ou Logótipo a um Formulário no WordPress

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

Passo 1: Instalar o Plugin Básico WPForms

O WPForms é a forma mais fácil de criar formulários de marca no WordPress. Obterá um construtor de arrastar e soltar, mais mais de 2.100 modelos para começar, para que nunca fique a olhar para um formulário em branco a perguntar-se por onde começar.

O que mais gosto no WPForms para esta tarefa específica é que o campo de Conteúdo funciona exatamente como o editor do WordPress que já conhece. Adicionar o seu logótipo a um formulário é exatamente como adicionar uma imagem a uma publicação de blogue, até ao botão Adicionar Média.

Precisará de uma licença para usar o campo de Conteúdo, uma vez que não está incluído no Lite. A boa notícia é que ele é desbloqueado no Basic, o primeiro nível pago, pelo que não terá de gastar num plano mais caro apenas para criar a marca dos seus formulários.

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

Obtenha o WPForms Basic Agora!

Passo 2: Selecionar o Modelo de Formulário de Contacto Simples

Depois de ter o plugin configurado no seu site, vá para WPForms » Adicionar Novo no seu painel WordPress.

A partir daqui, encontrará uma enorme biblioteca de modelos de formulários à sua escolha.

Mas primeiro, vamos dar um nome ao formulário. Para este tutorial, chamaremos ao nosso formulário "Contacte-nos", que será exibido no topo do formulário.

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

Isto leva-nos diretamente para o construtor de formulários de arrastar e soltar, onde personalizaremos o modelo.

Passo 3: Adicionar o Campo de Conteúdo

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

Simplesmente clique em Conteúdo, depois arraste e solte o campo onde quer que ele esteja no seu formulário.

Estamos a arrastar o campo de Conteúdo para o topo do formulário para que os meios carregados atuem como uma secção de cabeçalho.

Quando o campo estiver no lugar na área de pré-visualização, clique nele para abrir as suas Opções de Campo. É aqui que adicionará os seus meios e editará o texto usando o editor no painel esquerdo.

Pode editar o 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, consulte o nosso guia completo para usar o campo de Conteúdo.

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

Passo 4: Carregar o Logótipo ou Imagem da Sua Empresa

Em seguida, clique em Adicionar Média para carregar a sua imagem para o campo de Conteúdo.

Poderá carregar uma nova imagem ou selecionar uma da sua Biblioteca de Média. São aceites ficheiros JPG e PNG.

Um par de dicas rápidas antes de carregar. Para logótipos, use um PNG com fundo transparente para que o seu logótipo não fique dentro de uma caixa branca, e uma largura de cerca de 200 píxeis é 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 píxeis para a maioria das áreas de conteúdo WordPress, para que permaneça nítido em tamanho completo.

Ainda não tem um logótipo? Estes geradores de logótipos com IA podem dar-lhe um sólido em poucos minutos.

Com o nosso logótipo 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 a nossa imagem funciona como um verdadeiro cabeçalho de formulário, fomos ao separador Avançadas e definimos o Tamanho do Campo para Grande.

Depois, de volta ao separador Geral, certificámo-nos de que a imagem está centrada no campo usando as opções de formatação dentro do editor de texto.

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

Tal como os media acima, 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 o nosso logótipo aqui, centrámos o texto com o resto da imagem.

Poderá querer personalizar os outros campos do formulário também.

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

Existem muitas maneiras de ajustar os campos no seu formulário, e pode pré-visualizar as suas alterações à medida que avança.

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

O nosso cabeçalho parece ótimo, então vamos colocar este formulário numa página.

Passo 5: Guardar e Incorporar o Formulário

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

Quer verifique a pré-visualização da página ou não, terá de clicar em Guardar antes de prosseguir.

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

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

Pode selecionar uma página existente ou criar uma nova. Para este tutorial, estamos a criar uma nova página, então clicaremos em Criar Nova Página.

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

Chamaremos à nossa “Contacte-nos” uma vez que esse é o nome que demos a este formulário quando selecionámos o modelo.

Podemos agora ver o formulário numa página recém-criada para o nosso site WordPress. A partir daqui, podemos pré-visualizar a página, guardá-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 não compita com a sua nova imagem de cabeçalho.

Apenas certifique-se de que o interruptor Mostrar Título está na posição desligada.

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

Fantástico! Agora tem um formulário com uma imagem de cabeçalho ou logótipo personalizado, e tudo isto provavelmente levou menos de dez minutos.

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

Adicionar uma imagem de cabeçalho ou logótipo aos seus formulários WordPress tende a levantar as mesmas poucas questões. Aqui estão respostas rápidas às que ouvimos com mais frequência.

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

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

Qual deve ser o tamanho de uma imagem de cabeçalho de formulário?

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

Posso adicionar imagens em qualquer outro lugar do meu formulário?

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

Posso estilizar o meu formulário para corresponder à marca do meu site?

Sim. Se incorporar o seu formulário com o bloco WPForms, pode alterar cores, fundos e estilos de campo diretamente no editor de blocos sem escrever CSS. O nosso guia sobre como estilizar os seus formulários aborda todas as opções.

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

Este tutorial aborda a área do cabeçalho de um formulário. Se quiser atualizar o cabeçalho de todo o seu site, isso é controlado pelo seu tema e abordamos isso no nosso guia sobre como editar o cabeçalho do seu site no WordPress.

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

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

Para manter os spammers afastados do seu novo e brilhante formulário, consulte o nosso guia sobre como prevenir envios de spam nos seus formulários WordPress.

Crie o Seu Formulário de Marca Agora

Pronto para criar 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.