Customize seu Formulário Usando Códigos CSS Personalizados

June 28, 2021

ATUALIZAÇÃO: Vamos criar formulários fantásticos com este curso em vídeo para Form Designer, que te permite criar lindos designs de formulário sem precisar ter conhecimento de CSS!
Primeiro, você precisa aprender a inserir códigos CSS personalizados no seu formulário antes de começar a customizar seu formulário usando os códigos CSS fornecidos abaixo.

Definir uma imagem de fundo para a página

.supernova {
background-image:url(‘http://www.site.com/image.jpg’);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;}

Substitua a URL pela sua imagem de fundo

Demo aqui

Tornar sua página de fundo transparente

.supernova {
background:transparent;
}

Remover o espaçamento em volta do formulário

.jotform-form {
padding:0;
}

Tornar o fundo do formulário transparente

.form-all {
background:transparent;
}

Mudar a cor de fundo do header
[data-type=”control_head”]{background-color:#FFCC66;}
Mudar a cor do texto do subtítulo

.form-subHeader {color:#2408FC !important;}

Mudar a cor dos sub-labels
.form-sub-label {color:#FFCC66;}
Mudar a cor do destaque
.form-line-active {background:#baffb9;}
Mudar a cor da estrela de dado obrigatório
.form-required {color: blue !important;}
Remover o fundo vermelho das mensagens de erro
 .form-line-error {background:transparent;}
Alinhar o formulário à esquerda

.form-all {margin:0;}

Preview Aqui
Criar instantaneamente layout de duas colunas para os campos
.form-line-column {width: 50%;}.form-line-column:nth-child(even) {clear: left;}
Demo aqui
Tornar os campos de cartão de crédito sensíveis à integração com pagamentos por celular
Copiar os códigos CSS aqui: http://pastebin.com/raw/UJV3nGf5
Demo aqui
Se você não consegue encontrar o código CSS que você precisa no seu formulário ou precisa de ajuda para personalizar seu formulário, fique à vontade para comentar abaixo:
Este guia foi útil?

Enviar Comentário:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comentar:

Podo CommentSeja o primeiro a comentar.