Atualização
Aprenda a criar formulários fantásticos com estas videoaulas do Designer de Formulários, o qual permite a criação de lindos designs sem o conhecimento de CSS!
Primeiro, você precisa aprender como inserir códigos CSS personalizados ao seu formulário antes de começar a customizá-lo usando os códigos CSS fornecidos abaixo.
Definir uma Imagem de Fundo para a Página
![imagem-de-fundo-do-formulario](https://www.jotform.com/blog/wp-content/uploads/2022/11/imagem-de-fundo-do-formulario.png)
.supernova {
background-image: url('{url_da_imagem}');
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;
}
body {
background: none;
}
Substitua {url_da_imagem} pela URL da sua imagem de fundo desejada.
Tornar o Plano de Fundo da Página Transparente
![fundo-da-pagina-transparente](https://www.jotform.com/blog/wp-content/uploads/2022/11/fundo-da-pagina-transparente.png)
.supernova, body {
background: none;
}
Tornar o Fundo do Formulário Transparente
![fundo-do-formulario-transparente](https://www.jotform.com/blog/wp-content/uploads/2022/11/fundo-do-formulario-transparente-2.png)
.form-all {
background: none !important;
box-shadow: none;
}
Remover o Espaçamento Acima do Formulário
![remover-margem-do-formulario](https://www.jotform.com/blog/wp-content/uploads/2022/11/remover-margem-do-formulario.png)
body, .form-all {
margin-top: 0;
}
Alterar a Cor de Fundo do Título
![cor-de-fundo-do-titulo](https://www.jotform.com/blog/wp-content/uploads/2022/11/cor-de-fundo-do-titulo-1.png)
.form-header-group, [data-type="control_head"] {
background-color: #c9daf8;
}
Alterar a Cor do Texto do Subtítulo
![cor-do-texto-do-subtitulo](https://www.jotform.com/blog/wp-content/uploads/2022/11/cor-do-texto-do-subtitulo-2.png)
.form-subHeader {
color: #00b000 !important;
}
Alterar a Cor de Todos os Sub-rótulos
![cor-de-todos-os-sub-rotulos](https://www.jotform.com/blog/wp-content/uploads/2022/11/cor-de-todos-os-sub-rotulos-2.png)
.form-sub-label {
color: #ffb21d;
}
Alterar a Cor de Destaque dos Campos
![cor-de-destaque-dos-campos](https://www.jotform.com/blog/wp-content/uploads/2022/11/cor-de-destaque-dos-campos.png)
.form-line-active {
background: #ccffcc;
}
Alterar a Cor do Asterisco dos Campos Obrigatórios
![cor-do-asterisco-dos-campos-obrigatorios](https://www.jotform.com/blog/wp-content/uploads/2022/11/cor-do-asterisco-dos-campos-obrigatorios.png)
.form-required {
color: cyan !important;
}
Alinhar Formulário à Esquerda
![alinhar-formulario-a-esquerda](https://www.jotform.com/blog/wp-content/uploads/2022/11/alinhar-formulario-a-esquerda.png)
.form-all {
margin: 0;
}
Caso não consiga encontrar o código CSS que precisa para seu formulário, ou queira ajuda para criar algo personalizado, deixe seu comentário abaixo.
Enviar Comentário: