Os formulários da SharpSpring podem ser editados ou estilizados, utilizando uma folha de estilo.

Editar uma folha de estilo permite personalizar o design de seu formulário via código.

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

Acessando as Configurações de Estilo de Formulário

  1. Na barra de ferramentas superior da SharpSpring, clique em Conteúdo > Formulários.
  2. Crie ou edite um formulário.
  3. Em um formulário da SharpSpring, clique em Opções > Editar Formulário.
  4. Clique na aba Estilos.
  5. Na seção Formulário CSS, siga um dos seguintes procedimentos: colar a URL de um CSS Externo ou crie/edite uma Folha de Estilho da SharpSpring.
  6. Na seção Estilo do botão “Enviar”, siga um dos seguintes procedimentos: crie um botão “Enviar” personalizado ou escolha um dos botões padrões.
  7. Clique em Salvar alterações.

Nota: URLs de CSS Externos são necessários caso você possua uma folha de estilo já associada com o seu site - e deseja que o formulário possua mesmo visual e estilo.

Nota: ao modificar botões existentes, clique em Editar para modificar o botão, ou em Deletar para remover o botão da lista de opções.

Criando Folhas de Estilos

  1. Na barra de ferramentas superior da SharpSpring, clique em Conteúdo > Formulários.
  2. Crie ou edite um formulário.
  3. Em um formulário da SharpSpring, clique em Opções > Editar Formulário.
  4. Clique na aba Estilos.
  5. Clique em + Adicionar folha de estilo.
  6. Na janela que aparece, na sequência, insira um nome para a folha de estilo.
  7. Edite a folha de estilo, de acordo com a sua necessidade.
  8. Clique em Salvar folha de estilo.
  9. Selecione a folha de estilo criada.

Nota: caso você não tenha acesso ao CSS do seu site, temos um template padrão para você começar. Para acessá-lo, clique aqui.

Editando Folhas de Estilo

  1. Na barra de ferramentas superior da SharpSpring, clique em Conteúdo > Formulários.
  2. Crie ou edite um formulário.
  3. Em um formulário da SharpSpring, clique em Opções > Editar Formulário.
  4. Clique na aba Estilos.
  5. Passe o mouse sobre uma folha de estilo existente.
  6. Clique em Editar.
  7. Edite a folha de estilo, de acordo com a sua necessidade.
  8. Clique em Salvar folha de estilo.

Deletando Folhas de Estilo

  1. Na barra de ferramentas superior da SharpSpring, clique em Conteúdo > Formulários.
  2. Crie ou edite um formulário.
  3. Em um formulário da SharpSpring, clique em Opções > Editar Formulário.
  4. Clique na aba Estilos.
  5. Passe o mouse sobre uma folha de estilo existente.
  6. Clique em Deletar.
  7. Na janela que aparece, na sequência, clique em Deletar folha de estilo.

Atenção! 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 algum formulário - até mesmo aquelas que você não está criando ou editando, atualmente.

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 de 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 este ser exibido na vertical?
R: Referencie a classe do elemento (“radio-option”) e configure-a para ser exibida em lista, ao invés 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 verificação para serem exibidas na vertical?
R: Referencie a classe do elemento (“checkbox-option”) e configure-a para ser exibida em lista, ao invés 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;}

Nota: para as pessoas que estejam utilizando um leitor de tela devido à deficiência visual, a SharpSpring não recomenda usar display: none, pois isto remove completamente o elemento da página. Neste caso, a SharpSpring recomenda usar label {height: 1px; margin: -1px; width: 1px;} para garantir que, mesmo invisível ao olho humano, ainda seja visível para um leitor de tela.

Encontrou sua resposta?