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

Quer aprender a adicionar uma imagem de cabeçalho ou logótipo a um formulário no WordPress?

Adicionar uma imagem é uma ótima forma de personalizar o seu formulário, dar aos utilizadores uma ideia do que se trata o formulário, ou apresentar um logótipo para o seu negócio.

Felizmente, é fácil de fazer com o WPForms. O campo de conteúdo no WPForms simplifica o processo de carregamento de texto e multimédia, como imagens ou logótipos, diretamente nos seus formulários.

Neste artigo, vamos guiá-lo através do processo de utilização do campo de conteúdo para adicionar uma imagem de cabeçalho a um formulário no WordPress.

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

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

Personalizar o seu formulário com uma imagem de cabeçalho personalizada é uma forma fácil de complementar o seu site WordPress com um design consistente e coeso. Como o nosso construtor de formulários de arrastar e largar torna a personalização de formulários uma brisa, pode usar as suas imagens numa variedade de estilos.

Além disso, usar uma imagem dará aos utilizadores do seu site uma ideia clara do que esperar do seu site e formulário. As imagens também ajudam a trazer interesse visual aos seus formulários e a integrá-los com o esquema de cores geral e o tema de design do seu site.

A sua imagem de cabeçalho pode refletir o assunto do conteúdo do seu formulário, ou pode ser uma imagem que representa o seu negócio ou organização, como um logótipo.

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

Neste guia passo a passo, vamos mostrar-lhe como editar o cabeçalho em formulários do WordPress sem qualquer código. Este tutorial é perfeito para iniciantes e não requer o uso de CSS personalizado, um construtor de páginas ou o Personalizador do WordPress.

Basta seguir este índice para todos os passos que lhe mostraremos:

1. Instalar o Plugin WPForms

Primeiro, precisa de instalar o Plugin WPForms. Veja todas as licenças WPForms aqui, ou descarregue o plugin do seu painel WordPress.

Para usar a funcionalidade de carregamento do campo de Conteúdo para adicionar uma imagem de cabeçalho a um formulário, precisará de selecionar uma licença atualizada como Pro, Plus ou Elite.

Aqui está um tutorial útil sobre como instalar um plugin do WordPress.

2. Selecione o Modelo de Formulário de Contacto Simples

Assim que tiver o plugin configurado no seu site, navegue até WPForms no seu painel WordPress e clique em Adicionar Novo.

A partir daqui, encontrará uma grande seleção de modelos para escolher para criar o seu formulário.

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

Agora, selecionaremos o Formulário de Contacto Simples.

Isto levar-nos-á a uma nova página, onde usaremos o construtor de formulários fácil de usar para personalizar este modelo.

3. Adicione o Campo de Conteúdo

Agora que estamos no construtor de formulários, adicionaremos o campo de conteúdo a partir das seleções no separador Campos.

Simplesmente clique em Conteúdo e arraste e largue o campo onde o deseja no seu formulário.

Estamos a arrastar o campo de conteúdo para o topo da página para que os meios carregados atuem como uma secção de cabeçalho no nosso formulário.

Quando o campo de conteúdo estiver no lugar na área de pré-visualização, clicaremos nele para aceder às suas Opções de Campo e adicionar os nossos meios e editar o texto usando o editor fácil no painel esquerdo.

Pode editar o seu conteúdo visualmente ou usar o editor de Texto para o editar usando HTML.

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

4. Carregue o Logótipo/Imagem da Sua Empresa

Em seguida, clicaremos em Adicionar Meios para carregar a nossa imagem para o campo de conteúdo.

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

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 atua como um 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 campo de texto.

Temos também a capacidade de editar o texto no campo. Editámos o texto aqui para ser uma mensagem curta para os visitantes e um pedido para preencher o formulário de contacto.

Tal como os meios acima, pode formatar o texto livremente com o campo de Conteúdo. Clique em Expandir Editor por baixo 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 de nome para Grande, para corresponder à largura da nossa imagem de cabeçalho acima dele.

Existem muitas formas de personalizar os detalhes dos campos no formulário como achar melhor, 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 de Conteúdo.

Excelente! Estamos agora prontos para incorporar o formulário em qualquer página que quisermos!

5. Guarde e Incorpore o Formulário

Pressione o botão Guardar no canto superior direito do formulário para ver as alterações refletidas na pré-visualização da página.

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

Agora, clicaremos no botão Incorporar no topo para adicionar este formulário a uma nova página do nosso website WordPress.

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

Temos a opção de Selecionar Página Existente ou Criar Nova Página. Para este tutorial, estamos a criar uma nova página, por isso 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 website WordPress. A partir daqui, podemos pré-visualizar a página, guardar a página como rascunho ou publicá-la.

Recomendamos que configure as definições do bloco no lado direito do editor para ocultar o título do formulário, se ainda não o fez. Não vai querer que distraia da imagem do cabeçalho do seu formulário.

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 adicionou com sucesso um cabeçalho de formulário com uma imagem ou logótipo ao seu site WordPress.

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

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

Com um novo formulário atrativo, personalizado com a sua escolha de imagem de cabeçalho, estará a convidar muitos visitantes do site a preencher o seu formulário.

Mas não vai querer recolher spam com o seu novo formulário.

Para impedir que os spammers preencham os seus formulários, consulte este artigo sobre como prevenir submissões de spam nos seus formulários WordPress.

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