Gostaria de fazer com que o seu formulário se destaque no seu sítio Web, adicionando um contorno personalizado? Com um simples snippet de código, pode adicionar um contorno elegante ao seu formulário para melhorar o seu aspeto visual e torná-lo mais proeminente na sua página.
Este guia irá mostrar-lhe como adicionar e personalizar um limite à volta dos seus WPForms.
Configurar o seu formulário
Para começar, precisa de identificar o ID do seu formulário. Isso é essencial, pois o código será direcionado a um formulário específico usando essa ID. Se precisar de ajuda para encontrar a ID do formulário, consulte o nosso guia sobre como encontrar IDs de formulários e campos.
Adicionar o código de fronteira
Em seguida, é necessário adicionar o trecho de código que criará a borda em torno 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 melhor apelo visual. Veja a seguir o que cada linha faz:
- Na linha 2, substitua 1234 pelo seu ID de formulário atual.
- Na linha 3, pode modificar a largura da margem (2px), o estilo (sólido) e a cor (#333333).
- Na linha 4, o preenchimento cria espaço entre os elementos do formulário e o limite.
- Na linha 5, 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, box-shadow adiciona um efeito de sombra subtil à volta do formulário.
Se pretender aplicar este mesmo CSS a todos os seus formulários, utilize este CSS.
E é tudo o que precisa para colocar um contorno à volta do seu formulário! Também gostaria de centralizar seus formulários? Consulte o nosso tutorial sobre Como centrar um formulário.