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:
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”.
Procure a opção Editar e opte por editar sua página em HTML.
Encontre o código Javascript dos formulários da web que foi incorporado ao corpo. Se parece com isso:
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.
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
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: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
Veja como seu formulário aparecerá: - Para 3 colunas:HTML
Veja como seu formulário aparecerá:
- Para 2 colunas:
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
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.
HTMLAo 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
Feedback enviado
Agradecemos seu esforço e tentaremos corrigir o artigo