Adicionar uma Imagem de Fundo aos Seus Formulários

Gostaria de saber como adicionar imagens de fundo aos seus formulários? É fácil estilizar o seu formulário com uma imagem ou gradiente de cor como fundo, utilizando CSS!

Este tutorial mostrar-lhe-á como adicionar uma imagem de fundo ao seu formulário.

---

1. Escolher uma Imagem de Fundo

Terá de escolher uma imagem para usar como fundo do seu formulário para começar. Pode usar qualquer imagem da sua biblioteca de multimédia, ou de qualquer lugar na internet a que o seu site possa aceder.

Considerações a Ter

Para máxima legibilidade, assegure um contraste suficiente entre a imagem de fundo e qualquer texto ou campo no seu formulário.

Como exemplo, evite usar texto claro sobre um fundo claro. Em vez disso, use texto mais escuro sobre fundos pálidos e texto mais claro sobre fundos escuros.

2. Escolher um Formulário

Em seguida, escolha o formulário que gostaria de personalizar. Se ainda precisar de criar um formulário, adicione um novo clicando em WPForms » Adicionar Novo.

Pode escolher entre um dos muitos modelos de formulário disponíveis para começar.

Se nenhum dos modelos padrão atender aos seus requisitos, ainda pode escolher um modelo semelhante e personalizá-lo no Construtor de Formulários.

3. Adicionar uma Imagem de Fundo ao Seu Formulário

No Construtor de Formulários, vá a Definições » Geral » Avançadas.

A partir daqui, insira um nome de classe em Classe CSS do Formulário. Sinta-se à vontade para usar qualquer nome para a sua classe, mas recomendamos adicionar wpf- como prefixo. Isto ajuda a evitar conflitos entre o seu código CSS personalizado e quaisquer temas ou plugins no seu site.

Usar uma Imagem Existente

Se quiser usar uma imagem da sua biblioteca de multimédia, precisará do URL completo da imagem. Para obter isto, primeiro, vá a Multimédia » Biblioteca a partir do painel de administração do WordPress.

A partir daqui, clique na imagem que gostaria de usar.

Na caixa de diálogo que se abre, clique em Copiar URL para a área de transferência.

Isto copiará o URL da imagem para a sua área de transferência.

Depois de ter feito isto, volte ao painel de administração do WordPress e vá a Aparência » Personalizar, depois escolha CSS Adicional.

Em seguida, crie uma classe personalizada com a propriedade background-image e cole o URL que copiou anteriormente.

Escrevemos um exemplo de tal classe abaixo. Lembre-se de substituir /path/wpforms-backdrop.png pelo URL real da sua imagem.

As suas definições devem parecer algo como isto.

Assim que tiver a certeza de que o seu código está correto, clique em Publicar para guardar as suas alterações.

Se não houver erros no seu código, o seu formulário terá agora uma imagem de fundo. Eis um exemplo de formulário que utiliza o código acima:

Utilizar um Gradiente como Imagem de Fundo

Com CSS, os gradientes de cor podem ser utilizados como imagens, e esta solução funciona também com os seus formulários. Os gradientes são extensivamente personalizáveis e podem usar qualquer número de cores.

Como os gradientes são autogerados, não precisa de uma imagem de origem da sua biblioteca de multimédia ou de qualquer outro local na internet. Isto proporciona a vantagem de maior velocidade e exclusividade. Também não terá de se preocupar com a falta da imagem de origem.

Existem três tipos de gradientes disponíveis em CSS:

• conic-gradient()
• linear-gradient()
• radial-gradient()

Neste exemplo, vamos mostrar-lhe como usar um gradiente linear simples como fundo para o seu formulário. Basta escrever a sua classe como fez antes, mas em vez de usar um URL, usaremos a função CSS linear-gradient().

Para ver como isto funciona, veja o exemplo de código abaixo:

.wpf-custom-background {
    background-image: linear-gradient(#0299ed, #FFFFFF) !important;
    /*Padding isn't necessary, but highly recommended*/
    padding: 15px 35px !important;
}

Isto produzirá um gradiente suave de azul para branco como imagem de fundo do seu formulário:

Perguntas Frequentes

Abaixo, respondemos a algumas das principais perguntas sobre como adicionar uma imagem de fundo aos formulários.

Como adiciono uma imagem de fundo aos meus formulários que utilizam o complemento Formulários Conversacionais?

Se adicionar uma imagem de fundo usando o método descrito acima, ela não será aplicada ao formulário. Isto acontece porque os formulários conversacionais usam uma opção de estilo diferente.

Para adicionar uma imagem de fundo a um formulário que utiliza o complemento Formulários Conversacionais, terá de usar o seletor CSS #wpforms-conversational-form-page. Eis um exemplo de código. Certifique-se de substituir o caminho na propriedade url() pela imagem real que pretende usar.

#wpforms-conversational-form-page {
     background-image: url(/path/wpforms-backdrop.png) !important;
     background-position: center; /* Center the image */
     background-repeat: no-repeat; /* Do not repeat the image */
     background-size: cover;
}

É tudo! Agora sabe como adicionar uma imagem de fundo aos seus formulários no WPForms.

Em seguida, gostaria de saber como estilizar os seus formulários sem usar código? Consulte o nosso guia para personalizar o WPForms com o CSS Hero.