Gostaria de fazer com que seu formulário se destaque no site adicionando uma borda personalizada? Com um simples snippet de código, você pode adicionar uma borda elegante ao redor do 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 em torno de seus WPForms.
Configuração de 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 esse ID. Se precisar de ajuda para encontrar o ID do formulário, consulte nosso guia sobre como encontrar IDs de formulários e campos.
Adição do código de borda
Em seguida, você precisará adicionar o trecho de código que criará a borda ao redor do formulário. Se precisar de ajuda para adicionar trechos de código ao seu site, consulte este tutorial sobre como adicionar CSS personalizado.
O código acima adiciona uma borda ao seu formulário com alguns estilos adicionais para melhorar o apelo visual. Veja a seguir o que cada linha faz:
- Na linha 2, substitua 1234 por seu ID de formulário real.
- Na linha 3, você pode modificar a largura da borda (2px), o estilo (sólido) e a cor (#333333).
- Na linha 4, o preenchimento cria espaço entre os elementos do formulário e a borda.
- Na linha 5, border-radius adiciona cantos arredondados ao formulário.
- Na linha 6, a cor de fundo define um fundo branco para seu formulário.
- Na linha 7, o box-shadow adiciona um efeito de sombra sutil ao formulário.
Se você quiser aplicar esse mesmo CSS a todos os seus formulários, use este CSS.
E isso é tudo o que você precisa para colocar uma borda ao redor do seu formulário! Gostaria de centralizar seus formulários? Confira nosso tutorial sobre Como centralizar um formulário.