### [Adicionar uma moldura personalizada ao seu formulário](https://wpforms.com/developers/how-to-put-a-border-around-your-form/)

**Publicado:** 9 de fevereiro de 2022
**Autor:** Umair Majeed

**Excerto:** Este tutorial irá mostrar-lhe como pode usar CSS para colocar uma moldura à volta dos seus formulários.

**Conteúdo:**

Gostaria de destacar o seu formulário no seu site adicionando uma moldura personalizada? Com um simples trecho de código, pode adicionar uma moldura elegante à volta do seu formulário para melhorar o seu apelo visual e torná-lo mais proeminente na sua página.

Este guia irá mostrar-lhe como adicionar e personalizar uma borda em torno dos seus WPForms.

## Configurar o seu formulário

Para começar, terá de identificar o ID do seu formulário. Isto é essencial, uma vez que o código irá direcionar-se a um formulário específico utilizando este ID. Se precisar de ajuda para encontrar o ID do seu formulário, consulte o nosso guia sobre [como encontrar IDs de formulários e campos](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/#locating-the-field-id).

## Adicionar o código da moldura

Em seguida, terá de adicionar o trecho de código que irá criar a moldura à volta do seu formulário. Se precisar de ajuda para adicionar trechos de código ao seu site, consulte este tutorial sobre [como adicionar CSS personalizado](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).

O código acima adiciona uma borda ao seu formulário com alguns estilos adicionais para melhorar o aspeto visual. Eis o que cada linha faz:

- Na **linha 2**, substitua 1234 pelo ID real do seu formulário.
- Na **linha 3**, pode modificar a largura da borda (2px), o estilo (sólida) e a cor (#333333).
- Na **linha 4**, o preenchimento cria espaço entre os elementos do seu formulário e a borda.
- Na **linha 5**, border-radius adiciona cantos arredondados ao seu formulário.
- Na **linha 6**, background-color define um fundo branco para o seu formulário.
- Na **linha 7**, box-shadow adiciona um efeito de sombra subtil em torno do seu formulário.

Se quiser aplicar este mesmo CSS a todos os seus formulários, utilize este CSS em vez disso.

E é tudo o que precisa para colocar uma borda à volta do seu formulário! Gostaria também de centrar os seus formulários? Consulte o nosso tutorial sobre [Como centrar um formulário](https://wpforms.com/developers/how-to-center-a-form/ "Como centrar um formulário").

**Categorias:** Estilo

**Etiquetas:** CSS

---