Atenção!

Este artigo contém código CSS e destina-se a programadores. Oferecemos este código como uma cortesia, mas não fornecemos suporte para personalizações de código ou desenvolvimento de terceiros.

Para orientação adicional, consulte o tutorial da WPBeginner sobre como adicionar CSS personalizado.

Ignorar

Adicionar um Contorno Personalizado ao Seu Formulário

Gostaria de fazer o seu formulário destacar-se no seu website adicionando um contorno personalizado? Com um simples trecho de código, pode adicionar um contorno elegante à volta do seu formulário para realçar o seu apelo visual e torná-lo mais proeminente na sua página.

Este guia irá mostrar-lhe como adicionar e personalizar um contorno para os seus WPForms.

Configurar o Seu Formulário

Para começar, terá de identificar o ID do seu formulário. Isto é essencial, pois o código irá direcionar um formulário específico usando este ID. Se precisar de ajuda para encontrar o ID do seu formulário, consulte o nosso guia sobre encontrar IDs de formulários e campos.

Adicionar o Código do Contorno

Em seguida, terá de adicionar o trecho de código que criará o contorno à volta do seu formulário. Se precisar de ajuda para adicionar trechos de código ao seu site, reveja este tutorial sobre adicionar CSS personalizado.

O código acima adiciona um contorno ao seu formulário com algum estilo adicional para um melhor apelo 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 do contorno (2px), o estilo (solid) e a cor (#333333).
  • Na linha 4, o padding cria espaço entre os elementos do seu formulário e o contorno.
  • 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 à volta do seu formulário.

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

E é tudo o que precisa para colocar um contorno à volta do seu formulário! Gostaria também de centrar os seus formulários? Consulte o nosso tutorial sobre Como Centrar um Formulário.