### [Adicionar Imagens Antes ou Depois dos Rótulos do Seu Formulário](https://wpforms.com/developers/how-to-add-images-before-or-after-your-form-labels/)
**Publicado:** 23 de novembro de 2020
**Autor:** David Ozokoye
**Resumo:** Aprenda a usar CSS para adicionar imagens antes e depois dos rótulos do seu formulário.
**Conteúdo:**
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.
---
## Criar o Seu Formulário
Para começar, [crie um novo formulário](https://wpforms.com/docs/creating-first-form/ "Criar o Seu Primeiro Formulário") ou edite um existente para aceder ao construtor de formulários. Para o nosso formulário, adicionámos os campos de formulário **Nome**, **Email**, **Telefone**, **URL**, **Carregar 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](https://www.wpbeginner.com/wp-tutorials/how-to-add-svg-in-wordpress/ "Como Adicionar SVG no WordPress (com 2 Soluções Simples)").
## 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](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Como Adicionar Estilos CSS Personalizados para WPForms").
```
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 a direcionar o formulário com o ID **1723**. Terá de atualizar este ID para corresponder ao formulário ao qual pretende 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. Portanto, terá de atualizar estes valores para corresponder aos IDs de campo que pretende direcionar.
**Nota:** Cada rótulo de formulário acima no CSS direciona os IDs de campo. Se precisar de ajuda para encontrar os IDs do seu formulário ou campo, [consulte este tutorial](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).
Substitua os URLs de **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 Fonte
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 fonte a estes rótulos também.
Para este tutorial, já configurámos a família de fontes que pretendemos usar para estes ícones.
Se precisar de ajuda para configurar este passo, [consulte este tutorial](https://www.wpbeginner.com/wp-themes/how-to-easily-add-icon-fonts-in-your-wordpress-theme/ "Como Adicionar Facilmente Fontes de Ícones no Seu Tema WordPress").
Neste tutorial, usámos o plugin WordPress para o [plugin Font Awesome](https://wordpress.org/plugins/font-awesome/ "Plugin Font Awesome para WordPress").
```
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 após o Rótulo
Se pretender que os ícones apareçam 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 neste 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! Agora aprendeu como colocar imagens antes ou depois dos rótulos do seu formulário.
Em seguida, gostaria de adicionar um índice ao seu longo formulário? Dê uma vista de olhos ao tutorial sobre [Como Adicionar um Índice para Formulários Longos](https://wpforms.com/developers/how-to-add-a-table-of-contents-for-long-forms/ "Como Adicionar um Índice para Formulários Longos").
**Categorias:** Tutoriais
**Etiquetas:** CSS
---