Resumo de IA
Você gostaria de adicionar imagens antes ou depois dos rótulos do seu formulário? Adicionar imagens aos rótulos pode fazer com que esses elementos se destaquem com um pouco de estilo no seu formulário, e isso pode ser facilmente alcançado com um pouco de CSS.
Neste tutorial, vamos guiá-lo através de como adicionar imagens antes e depois dos rótulos de campo no WPForms.
Criando Seu Formulário
Para começar, crie um novo formulário ou edite um existente para acessar o construtor de formulários. Para o nosso formulário, adicionamos os campos de formulário Nome, Email, Telefone, URL, Upload de Arquivo e Parágrafo.
Adicionando Suas Imagens de Fundo Antes dos Rótulos do Formulário
Para este tutorial, já criamos imagens para cada um desses rótulos e as carregamos na Biblioteca de Mídia do WordPress.
Se você gostaria de ajuda para carregar imagens SVG no WordPress, por favor, revise este tutorial.
Adicionando o CSS
Agora, é hora de adicionar o CSS que unirá tudo isso. Se você precisar de ajuda para adicionar CSS ao seu site, por favor, revise 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 trecho acima, estamos segmentando o formulário com o ID 1723. Você precisará atualizar este ID para corresponder ao formulário ao qual deseja adicionar as imagens. Estamos usando o elemento CSS ::before para segmentar a área antes do rótulo de cada campo.
O seletor field_1 segmenta o ID do campo. Portanto, você precisará atualizar esses valores para corresponder aos IDs de campo que deseja segmentar.
Observação: Cada rótulo de formulário acima no CSS segmenta os IDs de campo. Se você precisar de ajuda para encontrar os IDs do seu formulário ou campo, por favor, veja este tutorial.
Substitua os URLs de background-image pelo link das imagens que você carregou em seu site WordPress. Assim que o CSS for adicionado, você poderá ver essas imagens em seu formulário.
Usando uma Imagem Baseada em Fonte
Carregar imagens em seu site não é a única maneira de exibir imagens antes ou depois dos rótulos de campo. Você também pode facilmente adicionar um ícone baseado em fonte a esses rótulos.
Para este tutorial, já configuramos a família de fontes que queremos usar para esses ícones.
Se você gostaria de ajuda para configurar esta etapa, por favor, veja este tutorial.
Neste tutorial, usamos o plugin do 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";
}
Adicionando as Imagens após o Rótulo
Se você gostaria que os ícones aparecessem após o 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 você está usando ::after em vez de ::before e adicionamos uma margem à esquerda do rótulo para um pequeno espaçamento.
É isso! Você aprendeu como colocar imagens antes ou depois dos rótulos do seu formulário.
Em seguida, você gostaria de adicionar um índice ao seu longo formulário? Dê uma olhada no tutorial sobre Como Adicionar um Índice para Formulários Longos.