Atenção!

Este artigo contém código CSS e destina-se a desenvolvedores. 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.

Dispensar

Adicionando uma Borda Personalizada ao Redor do Seu Formulário

Gostaria de fazer seu formulário se destacar em seu site adicionando uma borda personalizada? Com um simples trecho de código, você pode adicionar uma borda elegante ao redor do seu formulário para aprimorar seu apelo visual e torná-lo mais proeminente em sua página.

Este guia mostrará como adicionar e personalizar uma borda ao redor do seu WPForms.

Configurando Seu Formulário

Para começar, você precisará identificar o ID do seu formulário. Isso é essencial, pois o código terá como alvo um formulário específico usando este ID. Se precisar de ajuda para encontrar o ID do seu formulário, consulte nosso guia sobre como encontrar IDs de formulário e campo.

Adicionando o Código da Borda

Em seguida, você precisará adicionar o trecho de código que criará a borda ao redor do seu formulário. Se precisar de ajuda para adicionar trechos de código ao seu site, revise este tutorial sobre como adicionar CSS personalizado.

O código acima adiciona uma borda ao seu formulário com alguns estilos adicionais para um melhor apelo visual. Veja o que cada linha faz:

  • Na linha 2, substitua 1234 pelo ID real do seu formulário.
  • Na linha 3, você pode modificar a largura da borda (2px), o estilo (solid) 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, o border-radius adiciona cantos arredondados ao seu formulário.
  • Na linha 6, a cor de fundo define um fundo branco para o seu formulário.
  • Na linha 7, a sombra da caixa adiciona um efeito sutil de sombra ao redor do seu formulário.

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

E é tudo o que você precisa para colocar uma borda ao redor do seu formulário! Gostaria também de centralizar seus formulários? Confira nosso tutorial sobre Como Centralizar um Formulário.