Pular para o conteúdo principal

Como Personalizar Formulários com Folhas de Estilo CSS

Fernanda Matias
Atualizado

É possível utilizar as folhas de estilo CSS para criar formulários, caso você prefira não utilizar o Modelador Visual.

Os formulários da SharpSpring podem ser editados ou estilizados utilizando a folha de estilo, que oferece uma outra opção para personalizar o código e o design de seu formulário.

Este artigo fornece informações sobre como editar certos conteúdos nas folhas de estilo de formulários.

 

Usuários com acesso:

  • Administradores

  • Gerentes da empresa

  • Gerentes de marketing

 

Como colar URLs de CSSs Externos

Ao utilizar as folhas de estilo com formulários, você tem a opção de trazer o CSS de sites externos. As URLs de CSSs externos somente são necessárias se você possuir uma folha de estilo que já esteja associada a seu site e desejar que o formulário tenha a mesma aparência. Caso contrário, considere criar de uma folha de estilo.

Para utilizar uma folha de estilo CSS externa em seus formulários, será necessário colar a URL da folha de estilo desejada.

Para colar URLs de CSSs externos em seus formulários, faça o seguinte:

  1. Na barra de ferramentas superior da SharpSpring, clique em Marketing > Conteúdo > Formulários.

  2. Crie ou edite um formulário.

  3. Clique na aba Estilos.

  4. Clique na aba CSS Avançado.

  5. No campo URL do CSS, cole a URL do CSS externo.

  6. Na seção Folhas de Estilo Atuais, clique em Nenhuma.

  7. Na seção Estilo de botão, faça uma das seguintes opções:

    • Crie um botão de envio personalizado.

    • Escolha um dos botões padrão.

  8. Clique em Salvar alterações.

Nota: SharpSpring oferece suporte para fazer codificação.

 

Crie Folhas de Estilos

É possível criar folhas de estilo conforme necessário.

Para criar uma folha de estilo e aplicá-la ao formulário, faça o seguinte:

  1. Na barra de ferramentas superior da SharpSpring, clique em Marketing > Conteúdo > Formulários.

  2. Crie ou edite um formulário.

  3. Clique na aba Estilos.

  4. Clique em CSS Avançado.

  5. Clique em Adicionar folha de estilo.

  6. Na janela que aparece, insira um nome para a folha de estilo.

  7. Edite a folha de estilo conforme necessário.

  8. Clique em Salvar folha de estilo.

  9. Na seção Folhas de estilo atuais, clique no opção pra selecionar a folha criada.

  10. Clique em Salvar alterações.

 

 

Edite Folhas de Estilo

É possível editar folhas de estilo conforme necessário.

Para editar folhas de estilo que já foram criadas anteriormente, faça o seguinte:

  1. Na barra de ferramentas superior da SharpSpring, clique em Marketing > Conteúdo > Formulários.

  2. Crie ou edite um formulário.

  3. Clique na aba Estilos.

  4. Clique na aba CSS Avançado.

  5. Passe o mouse sobre uma folha de estilo já criada.

  6. Clique no ícone de Lápis para Editar.

  7. Edite a folha de estilo conforme necessário.

  8. Clique em Salvar folha de estilo.

 

 

Delete Folhas de Estilo

É possível deletar folhas de estilo que não têm mais utilidade.

Para deletar folhas de estilo, faça o seguinte:

  1. Na barra de ferramentas superior da SharpSpring, clique em Marketing > Conteúdo > Formulários.

  2. Crie ou edite um formulário.

  3. Clique na aba Estilos.

  4. Clique na aba CSS Avançado.

  5. Passe o mouse sobre uma folha de estilo já criada.

  6. Clique em no ícone de X para Deletar.

  7. Logo em sequência, na janela que aparece, clique em Deletar folha de estilo.

Esteja ciente de que, uma vez excluídas, as folhas de estilo não podem ser recuperadas. Além disso, folhas de estilo não podem ser excluídas se estiverem associadas a qualquer formulário - até mesmo àqueles que você não está criando ou editando no momento. Será necessário associar esse formulários a outras folhas de estilo antes de deletar a folha desejada.

 

 

Habilite o Modelador Visual

Se você estiver utilizando uma folha de estilo e quiser, no lugar dela, usar o Modelador Visual, é possível fazer essa alteração.

Para habilitar o Modelador Visual para formulários com folhas de estilo personalizadas, faça o seguinte:

  1. Na barra de ferramentas superior da SharpSpring, clique em Marketing > Conteúdo > Formulários.

  2. Crie ou edite um formulário.

  3. Clique na aba Estilos.

  4. Clique na aba CSS Avançado.

  5. Na seção Folhas de Estilo Atuais, clique em Habilitar Modelador Visual.

  6. Clique em Habilitar.

  7. Clique em Salvar Alterações.

 

 

Crie Botões de Folhas de Estilo

É possível criar botões para as suas folhas de estilo. Para criar um botão de formulário personalizado que será utilizado com folhas de estilo, faça o seguinte:

  1. Na barra de ferramentas superior, clique em Marketing > Conteúdo > Formulários.

  2. Crie ou edite um formulário.

  3. Clique na aba Estilos.

  4. Clique na aba CSS Avançado.

  5. Role até a seção Modelador de Botão Antigo (Legacy Button Styler).

  6. No campo Texto do botão "Enviar", insira o texto desejado.

  7. Clique em Criar um novo botão.

  8. Na janela que aparece, na aba Básico, ajuste os seguintes parâmetros visuais:
    - Largura
    - Altura
    - Raio da borda
    - Tamanho da letra
    - Nome do botão
    - Largura do campo
    - Cor do botão
    - Gradiente
    - Borda

  9. Na aba Avançado desta mesma janela, ajuste os seguintes parâmetros visuais:
    - Cor de gradiente superior
    - Cor de gradiente inferior
    - Cor do texto
    - Cor do texto ao passar o mouse
    - Cor da borda
    - Cor de fundo ao passar o mouse
    - Cor de funto ativo

  10. Clique em Salvar.

  11. Clique em Salvar alterações.

Esteja ciente de que o Modelador Visual deve ser utilizado ao criar botões para uso com formulários que não utilizam folhas de estilo personalizadas.

Notas:

  • Uma vez salvo, o formulário será automaticamente atualizado com o botão.

  • Na janela de criação do botão, a aba Formulários exibe a quais formulários o botão está associado.

 

 

Edite Botões de Folhas de Estilo

É possível editar os botões de folhas de estilo conforme necessário. Para isso, faça o seguinte:

  1. Na barra de ferramentas superior da SharpSpring, clique em Marketing > Conteúdo > Formulários.

  2. Crie ou edite um formulário.

  3. Clique na aba Estilos.

  4. Clique na aba CSS Avançado.

  5. Role até a seção Modelador de Botão Antigo (Legacy Button Styler).

  6. Passe o mouse sobre o botão desejado.

  7. Clique no ícone de Lápis para Editar.

  8. Edite os parâmetros do botão disponíveis conforme desejado.

  9. Clique em Salvar.

Nota: Na janela de criação do botão, a aba Formulários exibe a quais formulários o botão está associado.

 

 

Selecione Botões de Folhas de Estilo

Você pode definir os botões que serão utilizados com folhas de estilo.

Para utilizar um botão específico com uma folha de estilo de um formulário, faça o seguinte:

  1. Na barra de ferramentas superior da SharpSpring, clique em Marketing > Conteúdo > Formulários.

  2. Crie ou edite um formulário.

  3. Clique na aba Estilos.

  4. Clique na aba CSS Avançado.

  5. Role até a seção Modelador de Botão Antigo (Legacy Button Styler).

  6. Ao lado do botão desejado, clique na caixa para selecionar.

  7. Clique em Salvar.

 

 

Delete Botões de Folhas de Estilo

É possível deletar os botões que não têm mais uso.

Para deletar os botões de folhas de estilo já criados, faça o seguinte:

  1. Na barra de ferramentas superior da SharpSpring, clique em Marketing > Conteúdo > Formulários.

  2. Crie ou edite um formulário.

  3. Clique na aba Estilos.

  4. Clique na aba CSS Avançado.

  5. Role até a seção Modelador de Botão Antigo (Legacy Button Styler).

  6. Passe o mouse sobre o botão desejado.

  7. Clique em no ícone de X para Deletar.

 

 

Perguntas Frequentes

P: Onde posso aprender mais sobre CSS?
R: Para informações acerca da edição de conteúdo CSS, veja esta série de documentações externas do suporte da w3schools.

P: Como centralizo o botão “Enviar”?
R: Referencie o container do parágrafo class=”clear”, relacionado ao botão e configure-o para alinhar no centro da tela.
.clear {text-align: center !important;}

P: Como altero a cor da etiqueta?
R: Referencie o elemento etiqueta e modifique a sua cor.
label {color: #0000FF !important;}

P: Como altero o formato do botão rádio para que ele seja exibido na vertical?
R: Referencie a classe do elemento (“radio-option”) e configure-a para ser exibida em lista, em vez de em linha. Por definição, os botões são exibidos em linha.
.radio-option {display: list-item !important;}

P: Como escondo etiquetas?
R: Referencie o elemento etiqueta e configure-o para não exibir nada.
label {display: none !important;}

P: Como altero o formato das caixas de seleção para que elas sejam exibidas na vertical?
R: Referencie a classe do elemento (“checkbox-option”) e configure-a para ser exibida em lista, em vez de em linha. Por definição, caixas de verificação são exibidas em linha.
.checkbox-option {display: list-item !important;}

P: Como escondo etiquetas (ou algo similar), apenas para alguns campos específicos?
R: Para um passo-a-passo, consulte a seguinte documentação.
label[for="field_123456789"]{display: none !important;}

P: Como altero o input para apenas um tipo de campo específico?
R: Para um passo-a-passo, consulte a seguinte documentação.
input[type="text"]{color: #0000FF !important;}

P: Como posso adaptar a folha de estilo para usuários que podem utilizar um leitor de tela, devido a deficiências visuais?

R: Neste caso, a SharpSpring não recomenda usar display: none, pois isto remove o elemento da página por completo. A SharpSpring recomenda utilizar o seguinte para garantir que, mesmo invisível ao olho humano, ainda seja visível para um leitor de tela:

label {
 border: 0; 
 clip: rect(0 0 0 0); 
 height: 1px; 
 margin: -1px;
 overflow: hidden;
 padding: 0;
 position: absolute;
 width: 1px;}

Artigos relacionados

Comentários

0 comentário

Artigo fechado para comentários.