Resumo de IA
Gostaria de saber como adicionar imagens de fundo aos seus formulários? É fácil estilizar seu formulário com uma imagem ou gradiente de cor como plano de fundo usando CSS!
No Construtor de Formulários, vá para Configurações » Geral » Avançado.
Neste Artigo
Observação: As etapas deste tutorial exigem adicionar uma classe CSS ao seu site. Se você preferir uma abordagem mais direta que não envolva a adição de CSS personalizado, consulte nosso tutorial sobre o uso de temas de formulário para saber como.
1. Escolhendo uma Imagem de Fundo
Você precisará escolher uma imagem para usar como plano de fundo do seu formulário para começar. Você pode usar qualquer imagem da sua biblioteca de mídia ou de qualquer lugar na internet que seu site possa acessar.
Considerações a Fazer
Para máxima legibilidade, garanta contraste suficiente entre a imagem de fundo e qualquer texto ou campo do seu formulário.
Como exemplo, evite usar texto claro em um fundo claro. Em vez disso, use texto mais escuro em fundos mais pálidos e texto mais claro em fundos escuros.
2. Escolhendo um Formulário
Em seguida, escolha o formulário que você deseja personalizar. Se você ainda precisar criar um formulário, adicione um novo clicando em WPForms » Adicionar Novo.
Você pode escolher entre um dos muitos modelos de formulário disponíveis para começar.
Se nenhum dos padrões atender aos seus requisitos, você ainda pode escolher um modelo semelhante e personalizá-lo no Construtor de Formulários.
3. Adicionando uma Imagem de Fundo ao Seu Formulário
No Construtor de Formulários, acesse Configurações » Geral » Avançado.
A partir daqui, insira um nome de classe em Classe CSS do Formulário. Sinta-se à vontade para usar qualquer nome para sua classe, mas recomendamos adicionar wpf- como um prefixo. Isso ajuda a evitar conflitos entre seu código CSS personalizado e quaisquer temas ou plugins em seu site.
Observação: Para evitar quaisquer problemas, certifique-se de que o nome da sua classe comece com uma letra. Além disso, lembre-se de que os nomes de classe em CSS diferenciam maiúsculas de minúsculas. Para mais informações, confira nosso guia introdutório de estilização e os tutoriais sobre adicionar classes ao WPForms.
Usando uma Imagem Existente
Se você quiser usar uma imagem da sua biblioteca de mídia, precisará do URL completo da imagem. Para obtê-lo, primeiro, vá para Mídia » Biblioteca no painel de administração do WordPress.
A partir daqui, clique na imagem que você gostaria de usar.
Na caixa de diálogo que se abre, clique em Copiar URL para a área de transferência.
Isso copiará o URL da imagem para a sua área de transferência.
Observação: Para imagens de outras fontes na internet, copie o URL clicando com o botão direito na imagem e selecionando Copiar endereço da imagem.
O texto do menu que você vê pode ser ligeiramente diferente dependendo do navegador de sua escolha. No entanto, ele executará a mesma função que clicar em Copiar URL para a área de transferência na biblioteca de mídia.
Depois de fazer isso, volte ao painel de administração do WordPress e vá para Aparência » Personalizar, depois escolha CSS Adicional.
Em seguida, crie uma classe personalizada com a propriedade background-image e cole a URL que você copiou anteriormente.
Neste exemplo, mostraremos como usar um gradiente linear simples como plano de fundo para seu formulário. Simplesmente escreva sua classe como fez antes, mas em vez de usar um URL, usaremos a função CSS linear-gradient().
Suas configurações devem parecer algo assim.
Assim que tiver certeza de que seu código está correto, clique em Publicar para salvar suas alterações.
Se não houver erros em seu código, seu formulário agora terá uma imagem de fundo. Aqui está um exemplo de formulário usando o código acima:
Usando um Gradiente como Imagem de Fundo
Com CSS, gradientes de cores podem ser usados como imagens, e essa solução funciona com seus formulários também. Gradientes são extensivamente personalizáveis e podem usar qualquer número de cores.
Como os gradientes são autogerados, você não precisa de uma imagem de origem da sua biblioteca de mídia ou de qualquer outro lugar na internet. Isso oferece a vantagem de maior velocidade e exclusividade. Você também não terá que se preocupar com a imagem de origem desaparecendo.
Existem três tipos de gradientes disponíveis em CSS:
conic-gradient()linear-gradient()radial-gradient()
Observação: Se você quiser saber mais sobre como usar gradientes em CSS, recomendamos ler esta página na Mozilla Developer Network.
Neste exemplo, mostraremos como usar um gradiente simples e linear como plano de fundo para o seu formulário. Basta escrever sua classe como fez antes, mas em vez de usar um URL, usaremos a função CSS linear-gradient().
Para ver como isso funciona, confira 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;
}
Isso produzirá um gradiente suave de azul para branco como imagem de fundo do seu formulário:
Observação: Se preferir usar uma solução sem código para gerar seus gradientes, você pode usar recursos online, como CSS Gradient (cssgradient.io).
Perguntas Frequentes
Abaixo, respondemos a algumas das principais perguntas sobre como adicionar uma imagem de fundo a formulários.
Como adiciono uma imagem de fundo aos meus formulários que usam o addon Formulários Conversacionais?
Se você adicionar uma imagem de fundo usando o método descrito acima, ela não será aplicada ao formulário. Isso ocorre porque os formulários conversacionais usam uma opção de estilo diferente.
Para adicionar uma imagem de fundo a um formulário que usa o addon Formulários Conversacionais, você precisará usar o seletor CSS #wpforms-conversational-form-page. Aqui está um exemplo de código. Certifique-se de substituir o caminho na propriedade url() pela imagem real que você 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;
}
É isso! Agora você sabe como adicionar uma imagem de fundo aos seus formulários no WPForms.
Em seguida, você gostaria de saber como estilizar seus formulários sem usar código? Confira nosso guia para personalizar o WPForms com CSS Hero.