Como personalizar a interface do usuário dos formulários da Web conforme sua escolha?

Criada por Isabelle Fernandes, Modificado em Qui, 9 Mar, 2023 na (o) 3:41 PM por Isabelle Fernandes

Se você já usou formulários da Web anteriormente, provavelmente está ciente de seu imenso potencial para ajudá-lo a capturar leads diretamente para seu aplicativo da Web. Se você ainda não criou formulários da Web, agora seria um bom momento para aprender como configurá-los.

Se você quiser ser um pouco mais criativo e personalizar seus formulários da Web alterando o layout e agrupando os campos em colunas, este artigo pode ajudá-lo a realizar as modificações necessárias com facilidade.
 

Importante: 
- Este artigo é uma continuação de “ Como configurar formulários web? ” Seus formulários da web devem ser configurados antes que você possa personalizá-los de acordo com suas necessidades. Se você ainda não configurou seus formulários da web, faça-o seguindo estas instruções. 


- A personalização de seus formulários é realizada alterando alguns campos no CSS. Embora não se espere que você conheça CSS para executar essas instruções, uma breve atualização dos conceitos pode ajudá-lo a realizar suas próprias personalizações exclusivas.


PASSOS DETALHADOS: 

  1. Vá para a base de código da sua página da web onde o código javascript do seu formulário da web foi incorporado. Nesse caso, incorporamos o formulário da web em uma página de “blogger”. 

  1. Procure a opção Editar e opte por editar sua página em HTML.

  1. Encontre o código Javascript dos formulários da web que foi incorporado ao corpo. Se parece com isso:

  1. Este é o código que você precisará alterar para atender às suas especificações. Ele pode ser alterado usando a classe <style> em HTML que determina todos os estilos. Adicionar a classe <style> <style/> após o </script >permite que você ajuste o estilo do seu formulário.

  1. Incorpore os links após o script de formulários da web e atualize a página para que as alterações entrem em vigor.

Veja como você pode realizar as várias personalizações:

  • Aumentando a largura do contêiner de formulário: torne seus campos mais largos incorporando o seguinte script:

    HTML
    <style type="text/css">
    .fserv-container {
    max-width: 1000px;
    }
    .fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {
    display: block;
    width: 100%;
    text-align: center;
    }
    </style><style type="text/css">.fserv-container {max-width: 1000px;}.fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {display: block;width: 100%;text-align: center;}</style><style type="text/css">.fserv-container {max-width: 1000px;}.fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {display: block;width: 100%;text-align: center;}</style>
    HTML


    Veja como seu formulário aparecerá:


  • Dando ao formulário um layout horizontal:  Este script transforma seus campos de formulário colocados verticalmente em horizontais. Isso ajuda você a ocupar menos espaço ao incorporar seu formulário na parte inferior de uma página:
    <style type="text/css"> .fserv-container {
    max-width: 100%;
    }
    .fserv-container .fserv-form {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    }
    .fserv-container .fserv-form .fserv-field+.fserv-field {
    margin-top: 5px;
    }
    .fserv-container .fserv-form .fserv-field {
    max-width: 25%;
    }
    .fserv-container .fserv-form .fserv-field+div:not(.fserv-field) { border-top: 0;
    width: 100%;
    display: block;
    text-align: center;
    }
    </style>
    HTML
    Veja como seu formulário aparecerá:
  • Para agrupar os campos em colunas: Este script permite que você agrupe seus campos em colunas de 2 ou 3. Isso pode ajudá-lo a reduzir o comprimento de sua página da web e eliminar a necessidade de rolar para baixo. Incorpore os links após o script de formulários da web e atualize a página para que as alterações entrem em vigor. 

    • Para 2 colunas:
      HTML
      <style type="text/css">
      .fserv-container .fserv-form {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      }
      .fserv-container .fserv-form .fserv-field:nth-child(-n+2):not(.fserv-hidden)
      {
      margin-top: 0px;
      }
      .fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {
      display: block;
      width: 100%;
      text-align: center;
      }
      </style>
      HTML


      Veja como seu formulário aparecerá:


    • Para 3 colunas:
      HTML
      <style type="text/css">
      .fserv-container .fserv-form {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      }
      .fserv-container .fserv-form .fserv-field:nth-child(-n+2):not(.fserv-hidden){
      margin-top: 0px;
      }
      .fserv-container .fserv-form .fserv-field {
      max-width: 33.33%;
      }
      .fserv-container .fserv-form .fserv-field:nth-child(-n+3):not(.fserv-hidden)
      {
      margin-top: 0px;
      }
      .fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {
      display: block;
      width: 100%;
      text-align: center;
      }
      </style>
      HTML


      Veja como seu formulário aparecerá:


  • Para remover a borda acima do botão enviar: Se desejar remover a borda que aparece no botão “Enviar”, incorpore o seguinte script:

    HTML
    <style type="text/css">
    .fserv-container .fserv-form .fserv-field+div:not(.fserv-field) { border-top: 0;
    }
    </style>
    HTML


    Veja como seu formulário aparecerá:


  • Para alterar o espaço da margem entre os campos: Se desejar aumentar/diminuir o espaço entre os diferentes campos, cole o seguinte código após </script> e defina o valor da margem de acordo com suas necessidades. 

    HTML
    <style type="text/css">
    .fserv-container .fserv-form > .fserv-field + .fserv-field, .fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {
    margin-top: 30px;
    margin-bottom:30px;
    }
    .fserv-container .fserv-form .fserv-field+div:not(.fserv-field) {
    display: block;
    width: 100%;
    text-align: center;
    }
    </style>
    HTML


    Ao alterar os valores “margin-top: __ px” e “margin-bottom: __ px” , você pode determinar o espaçamento entre os diferentes campos e definir um valor de sua escolha.
    Veja como seu formulário aparecerá:


Estas são algumas das personalizações que você pode realizar em seus formulários da Web alterando os códigos CSS. Para personalizações mais avançadas, é aconselhável contar com o suporte de um desenvolvedor de HTML dedicado para alterar outros aspectos do seu formulário, como cor, fonte e estilos.

Este artigo foi útil?

Que bom!

Obrigado pelo seu feedback

Desculpe! Não conseguimos ajudar você

Obrigado pelo seu feedback

Deixe-nos saber como podemos melhorar este artigo!

Selecione pelo menos um dos motivos
A verificação do CAPTCHA é obrigatória.

Feedback enviado

Agradecemos seu esforço e tentaremos corrigir o artigo