Personalize seu Formulário Usando Códigos CSS

29 de novembro de 2022

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.

Youtube Embed Poster: v2apY6221Ro

Definir uma Imagem de Fundo para a Página

imagem-de-fundo-do-formulario
.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
.supernova, body {
background: none;
}

Tornar o Fundo do Formulário Transparente

fundo-do-formulario-transparente
.form-all {
background: none !important;
box-shadow: none;
}

Remover o Espaçamento Acima do Formulário

remover-margem-do-formulario
body, .form-all {
margin-top: 0;
}

Alterar a Cor de Fundo do Título

cor-de-fundo-do-titulo
.form-header-group, [data-type="control_head"] {
background-color: #c9daf8;
}

Alterar a Cor do Texto do Subtítulo

cor-do-texto-do-subtitulo
.form-subHeader {
color: #00b000 !important;
}

Alterar a Cor de Todos os Sub-rótulos

cor-de-todos-os-sub-rotulos
.form-sub-label {
color: #ffb21d;
}

Alterar a Cor de Destaque dos Campos

cor-de-destaque-dos-campos
.form-line-active {
background: #ccffcc;
}

Alterar a Cor do Asterisco dos Campos Obrigatórios

cor-do-asterisco-dos-campos-obrigatorios
.form-required {
color: cyan !important;
}

Alinhar Formulário à Esquerda

alinhar-formulario-a-esquerda
.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.

Contatar o Suporte:

Nossa equipe de suporte ao cliente está disponível 24 hrs e nosso tempo de resposta está entre uma e duas horas.
Nossa equipe pode ser contatada através dos links:

Fórum de Suporte: https://www.jotform.com/answers/

Contate o Suporte da Jotform: https://www.jotform.com/contact/

Enviar Comentário:

Jotform Avatar
Este site é protegido por reCAPTCHA, sendo aplicáveis a Política de Privacidade e os Termos de Serviço do Google.

Podo Comment Seja o primeiro a comentar.