Dicas para usar HTML e CSS em seus formulários

Neste documento, mostraremos como usar o bloco de código HTML e compartilhar com você alguns truques básicos de HTML e CSS que você pode usar para personalizar seus formulários.

Por favor, note que este é um recurso avançado e requer conhecimento de CSS e HTML. Se você não está familiarizado com HTML ou CSS, recomendamos trabalhar com um membro da sua equipe que está. Há também vários grandes recursos lá fora onde você pode aprender HTML e CSS como este.

HTML

O bloco HTML permite adicionar texto com links incorporados ao seu formulário em linha. Você pode querer usar isso se desejar vincular contatos a uma página de vídeo ou política de privacidade em seu site. Você também pode formatar o texto, bem como seu alinhamento neste bloco específico.

Observe que o bloco HTML só pode ser usado em formulários em linha. Caixa flutuante, barra flutuante e formulários modais não têm a opção de adicionar um bloco HTML.

Adicionando o bloco de código HTML ao seu formulário

Para começar, basta arrastar e soltar o bloco "Código HTML" para qualquer lugar em seu formulário. Este bloco está localizado sob o padrão Campos >:



Para adicionar seu HTML personalizado, clique nesse bloco de código HTML em seu formulário. Uma vez que você fizer isso, você poderá inserir seu código na caixa no lado direito da tela:



Agora você está pronto para adicionar seu próprio HTML ao seu formulário.

Código HTML Básico

Você pode usar o seguinte para adicionar estilo ao texto em seu bloco de código HTML.

Texto central
Tags usadas:

Neste exemplo, colocamos o texto que queríamos centrado entre as duas tags. É assim que configuramos: 

Neste exemplo, adicionamos uma quebra de link entre duas frases em nosso bloco HTML. É assim que configuramos:

Envie-nos seu nome e e-mail para se inscrever em nossa newsletter.

Não se esqueça de nos adicionar à sua lista de contatos!

Neste exemplo, queríamos negrito uma frase em nosso bloco HTML. É assim que configuramos: 

Envie-nos seu nome e e-mail para se inscrever em nossa newsletter. Não se esqueça de nos adicionar à sua lista de contatos!

Sublinhar texto
Tags usadas

Neste exemplo, queríamos sublinhar uma frase em nosso bloco HTML. É assim que configuramos:

Envie-nos seu nome e e-mail para se inscrever em nossa newsletter. Não se esqueça de nos adicionar à sua lista de contatos!



Adicionar link
Tags usadas

Neste exemplo, queríamos adicionar um link à nossa política de privacidade para os inscritos clicarem. É assim que configuramos:

Envie-nos seu nome e e-mail para se inscrever em nossa newsletter. Leia nossa política de privacidade aqui.


Linha de inserção
Exemplo de código usado: 

Neste exemplo, usamos um bloco de código HTML separado para criar uma linha para inserir entre dois elementos de formulário.





Crie uma lista com balas
Tags usadas

Neste exemplo, queríamos listar o que os inscritos podem esperar ouvir quando se inscreverem em nossa newsletter. É assim que configuramos:

Saiba mais sobre o seguinte:

Neste exemplo, queríamos adicionar cor ao texto em nosso bloco de código HTML. O código usado é encontrado acima.

CSS

Você pode usar a caixa CSS e o Inspector personalizados para modificar elementos visuais do seu formulário, como ajustar a largura do botão de preenchimento, ajustar o tipo e o tamanho da fonte, centralizar o texto em um elemento, alterar a cor do seu texto e muito mais. Esta opção está localizada na guia Estilo. Todos os tipos de formulário incluem a caixa CSS personalizada e o Inspetor.



Para usar a caixa CSS personalizada e o inspetor, clique na guia "Estilo" localizada no canto superior direito do editor de formulários. Em seguida, clique no botão inspetor e direcionar o elemento ao que deseja adicionar estilo personalizado clicando nele.

Ajuste a largura de um elemento de formulário

Você pode usar uma porcentagem ou pixel para determinar a largura de um elemento. Neste exemplo, vamos ajustar a largura do botão "Preencher":

1. Vá para "Estilo" depois clique em "Inspetor".
   
   
   
   
2. Direcione o botão "Preencher" clicando nele.
   
   
3. Na caixa CSS, digite:width: númeropx; e substitua "número" pelo seu próprio número. Neste exemplo, usamos 250px:
   
   

O botão Preencher agora tem 250 pixels de largura:

Ajuste o tipo e o tamanho da fonte

Você pode usar a caixa CSS para alterar a fonte para qualquer elemento em seu formulário. Neste exemplo, vamos modificar o botão Preencher alterando a fonte para a Geórgia e ajustando o tamanho da fonte para 25 pixels:

1. Vá para "Estilo" depois clique em "Inspetor".
   
   
   
   
2. Direcione o elemento clicando nele. Neste exemplo, estamos escolhendo o botão "Preencher".
3. Na caixa CSS, enter:font-size: 25px;família de fontes: Geórgia !importante:
   
   

O tamanho e o tipo de fonte do botão Preencher estão agora ajustados:

Texto central usando CSS

1. Vá para "de Estilo" e clique em "Inspetor".
   
   
   
   
2. Direcione o elemento que contém o texto que deseja centralizar clicando nele
   
   
3. Na caixa CSS, enter:text-align: center
   
   

Seu texto agora está centrado:

Adicionar cor com CSS

1. Vá para "Estilo" depois clique em "Inspetor".
   
   
   
   
2. Direcione o elemento que contém o texto para o qual deseja alterar a cor clicando nele.
   
   
3. Na caixa CSS, tipo: cor:#hexcodeforcolor; e substitua "número" pelo seu próprio número. Neste exemplo, usamos #f441b8
   
   

Seu texto agora tem cor aplicada a ele:



Se você quiser saber mais sobre CSS, existem vários grandes recursos lá fora como este.