Personalize seu Formulário Usando Códigos CSS

Última atualização: 

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
.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.

Este guia foi útil?
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.

Comentar:

Podo CommentSeja o primeiro a comentar.