Como personalizar a interface do usuário dos formulários da Web conforme sua escolha?

Criada por Isabelle Lemes, Modificado em Thu, 09 Mar 2023 na (o) 03:41 PM por Isabelle Lemes

Se você já usou formulários da Web anteriormente, provavelmente está ciente de seu imenso potencial para ajudá-lo a capturar leads diretamente para seu aplicativo da Web. Se você ainda não criou formulários da Web, agora seria um bom momento para aprender como configurá-los.

Se você quiser ser um pouco mais criativo e personalizar seus formulários da Web alterando o layout e agrupando os campos em colunas, este artigo pode ajudá-lo a realizar as modificações necessárias com facilidade.

Importante: 
- Este artigo é uma continuação de “ Como configurar formulários web? ” Seus formulários da web devem ser configurados antes que você possa personalizá-los de acordo com suas necessidades. Se você ainda não configurou seus formulários da web, faça-o seguindo estas instruções. 


- A personalização de seus formulários é realizada alterando alguns campos no CSS. Embora não se espere que você conheça CSS para executar essas instruções, uma breve atualização dos conceitos pode ajudá-lo a realizar suas próprias personalizações exclusivas.

PASSOS DETALHADOS:

Vá para a base de código da sua página da web onde o código javascript do seu formulário da web foi incorporado. Nesse caso, incorporamos o formulário da web em uma página de “blogger”.

Procure a opção Editar e opte por editar sua página em HTML.

Encontre o código Javascript dos formulários da web que foi incorporado ao corpo. Se parece com isso:

Este é o código que você precisará alterar para atender às suas especificações. Ele pode ser alterado usando a classe <style> em HTML que determina todos os estilos. Adicionar a classe <style> <style/> após o </script >permite que você ajuste o estilo do seu formulário.

Incorpore os links após o script de formulários da web e atualize a página para que as alterações entrem em vigor.

Veja como você pode realizar as várias personalizações:

Aumentando a largura do contêiner de formulário: torne seus campos mais largos incorporando o seguinte script:

HTML

<style type="text/css">
.fserv-container {
max-width: 1000px;
}
.fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {
display: block;
width: 100%;
text-align: center;
}
</style><style type="text/css">.fserv-container {max-width: 1000px;}.fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {display: block;width: 100%;text-align: center;}</style><style type="text/css">.fserv-container {max-width: 1000px;}.fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {display: block;width: 100%;text-align: center;}</style>

Veja como seu formulário aparecerá:

Dando ao formulário um layout horizontal: Este script transforma seus campos de formulário colocados verticalmente em horizontais. Isso ajuda você a ocupar menos espaço ao incorporar seu formulário na parte inferior de uma página:

<style type="text/css"> .fserv-container {
max-width: 100%;
}
.fserv-container .fserv-form {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.fserv-container .fserv-form .fserv-field+.fserv-field {
margin-top: 5px;
}
.fserv-container .fserv-form .fserv-field {
max-width: 25%;
}
.fserv-container .fserv-form .fserv-field+div:not(.fserv-field) { border-top: 0;
width: 100%;
display: block;
text-align: center;
}
</style>

Veja como seu formulário aparecerá:

Para agrupar os campos em colunas: Este script permite que você agrupe seus campos em colunas de 2 ou 3. Isso pode ajudá-lo a reduzir o comprimento de sua página da web e eliminar a necessidade de rolar para baixo. Incorpore os links após o script de formulários da web e atualize a página para que as alterações entrem em vigor.

Para 2 colunas:

HTML

<style type="text/css">
.fserv-container .fserv-form {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.fserv-container .fserv-form .fserv-field:nth-child(-n+2):not(.fserv-hidden)
{
margin-top: 0px;
}
.fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {
display: block;
width: 100%;
text-align: center;
}
</style>

Veja como seu formulário aparecerá:

Para 3 colunas:

HTML

<style type="text/css">
.fserv-container .fserv-form {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.fserv-container .fserv-form .fserv-field:nth-child(-n+2):not(.fserv-hidden){
margin-top: 0px;
}
.fserv-container .fserv-form .fserv-field {
max-width: 33.33%;
}
.fserv-container .fserv-form .fserv-field:nth-child(-n+3):not(.fserv-hidden)
{
margin-top: 0px;
}
.fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {
display: block;
width: 100%;
text-align: center;
}
</style>

Veja como seu formulário aparecerá:

Para remover a borda acima do botão enviar: Se desejar remover a borda que aparece no botão “Enviar”, incorpore o seguinte script:
HTML
```
<style type="text/css">
.fserv-container .fserv-form .fserv-field+div:not(.fserv-field) { border-top: 0;
}
</style>
```
HTML
Veja como seu formulário aparecerá:
Para alterar o espaço da margem entre os campos: Se desejar aumentar/diminuir o espaço entre os diferentes campos, cole o seguinte código após </script> e defina o valor da margem de acordo com suas necessidades.
HTML
```
<style type="text/css">
.fserv-container .fserv-form > .fserv-field + .fserv-field, .fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {
margin-top: 30px;
margin-bottom:30px;
}
.fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {
display: block;
width: 100%;
text-align: center;
}
</style>
```
HTML
Ao alterar os valores “margin-top: __ px” e “margin-bottom: __ px” , você pode determinar o espaçamento entre os diferentes campos e definir um valor de sua escolha.
Veja como seu formulário aparecerá:

Estas são algumas das personalizações que você pode realizar em seus formulários da Web alterando os códigos CSS. Para personalizações mais avançadas, é aconselhável contar com o suporte de um desenvolvedor de HTML dedicado para alterar outros aspectos do seu formulário, como cor, fonte e estilos.