Resumo de IA
Gostaria de adicionar imagens antes ou depois dos rótulos do seu formulário? Adicionar imagens aos rótulos pode fazer com que estes elementos se destaquem com um pouco de estilo no seu formulário, e isto pode ser facilmente conseguido com um pouco de CSS.
Neste tutorial, vamos guiá-lo através de como adicionar imagens antes e depois dos rótulos dos campos no WPForms.
Criar o Seu Formulário
Para começar, crie um novo formulário ou edite um existente para aceder ao construtor de formulários. Para o nosso formulário, adicionámos campos de formulário de Nome, Email, Telefone, URL, Carregamento de Ficheiro e Parágrafo.
Adicionar as Suas Imagens de Fundo Antes dos Rótulos do Formulário
Para este tutorial, já criámos imagens para cada um destes rótulos e carregámo-las para a Biblioteca de Média do WordPress.
Se precisar de ajuda para carregar imagens SVG para o WordPress, reveja este tutorial.
Adicionar o CSS
Agora, é hora de adicionar o CSS que vai juntar tudo isto. Se precisar de ajuda para adicionar CSS ao seu site, reveja este tutorial.
label[for="wpforms-1723-field_1"]::before,
label[for="wpforms-1723-field_2"]::before,
label[for="wpforms-1723-field_3"]::before,
label[for="wpforms-1723-field_4"]::before,
label[for="wpforms-1723-field_6"]::before,
label[for="wpforms-1723-field_5"]::before{
background-repeat: no-repeat;
background-size: 100%;
width: 18px;
height: 20px;
content: " ";
display: inline-block;
background-position: 0px 2px;
margin-right: 10px;
}
label[for="wpforms-1723-field_1"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/avatar.svg);
}
label[for="wpforms-1723-field_2"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/envelope.svg);
}
label[for="wpforms-1723-field_3"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/phone-call.svg);
}
label[for="wpforms-1723-field_4"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/link.svg);
}
label[for="wpforms-1723-field_6"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/upload.svg);
}
label[for="wpforms-1723-field_5"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/chat.svg);
}
No excerto acima, estamos a direcionar o formulário com o ID 1723. Terá de atualizar este ID para corresponder ao formulário ao qual deseja adicionar as imagens. Estamos a usar o elemento CSS ::before para direcionar a área antes do rótulo de cada campo.
O seletor field_1 direciona o ID do campo. Assim, terá de atualizar estes valores para corresponder aos IDs dos campos que deseja direcionar.
Nota: Cada rótulo de formulário acima no CSS direciona os IDs dos campos. Se precisar de ajuda para encontrar os IDs do seu formulário ou campo, consulte este tutorial.
Substitua os URLs background-image pelo link das imagens que carregou para o seu site WordPress. Assim que o CSS for adicionado, poderá ver estas imagens no seu formulário.
Usar uma Imagem Baseada em Fontes
Carregar imagens para o seu site não é a única forma de exibir imagens antes ou depois dos rótulos dos campos. Pode facilmente adicionar um ícone baseado em fontes a estes rótulos também.
Para este tutorial, já configurámos a família de fontes que queremos usar para estes ícones.
Se precisar de ajuda para configurar este passo, consulte este tutorial.
Neste tutorial, usámos o plugin WordPress para o plugin Font Awesome.
label[for="wpforms-1723-field_1"]::before, label[for="wpforms-1723-field_2"]::before, label[for="wpforms-1723-field_3"]::before, label[for="wpforms-1723-field_4"]::before, label[for="wpforms-1723-field_6"]::before,
label[for="wpforms-1723-field_5"]::before{
background-repeat: no-repeat;
background-size: 100%;
width: 18px;
height: 20px;
display: inline-block;
background-position: 0px 2px;
margin-right: 10px;
font-family:"Font Awesome 5 Free";
}
label[for="wpforms-1723-field_1"]::before {
content: "\f007";
}
label[for="wpforms-1723-field_2"]::before {
content: "\f199";
}
label[for="wpforms-1723-field_3"]::before {
content: "\f095";
}
label[for="wpforms-1723-field_4"]::before {
content: "\f35d";
}
label[for="wpforms-1723-field_6"]::before {
content: "\f382";
}
label[for="wpforms-1723-field_5"]::before {
content: "\f086";
}
Adicionar as Imagens depois do Rótulo
Se desejar que os ícones apareçam depois do rótulo, o CSS seria ligeiramente diferente.
label[for="wpforms-1723-field_1"]::after, label[for="wpforms-1723-field_2"]::after, label[for="wpforms-1723-field_3"]::after, label[for="wpforms-1723-field_4"]::after, label[for="wpforms-1723-field_6"]::after,
label[for="wpforms-1723-field_5"]::after{
background-repeat: no-repeat;
background-size: 100%;
width: 18px;
height: 20px;
display: inline-block;
background-position: 0px 2px;
margin-right: 10px;
font-family:"Font Awesome 5 Free";
margin: 0 0 0 5px;
}
label[for="wpforms-1723-field_1"]::after {
content: "\f007";
}
label[for="wpforms-1723-field_2"]::after {
content: "\f199";
}
label[for="wpforms-1723-field_3"]::after {
content: "\f095";
}
label[for="wpforms-1723-field_4"]::after {
content: "\f35d";
}
label[for="wpforms-1723-field_6"]::after {
content: "\f382";
}
label[for="wpforms-1723-field_5"]::after {
content: "\f086";
}
A única diferença para este CSS é que está a usar ::after em vez de ::before e adicionámos alguma margem à esquerda do rótulo para um pequeno espaçamento.
É tudo! Aprendeu agora como colocar imagens antes ou depois dos rótulos do seu formulário.
Em seguida, gostaria de adicionar um índice aos seus formulários longos? Dê uma vista de olhos no tutorial sobre Como Adicionar um Índice para Formulários Longos.