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 >:

HTML_code_block.png

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:

add_html_code.png

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: <center> </center>

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

<center>Envie-nos seu nome e e-mail para assinar nossa newsletter.</center>

center_text_html.png

Adicionar quebra de linha
Tags usadas: <p> </p>

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. <p>Não se esqueça de nos adicionar à sua lista de contatos!</p>

Line_break_code.png
Texto em negrito
Tags usadas <b> </b>

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. <b>Não se esqueça de nos adicionar à sua lista de contatos!</b>

Bold_html.png

Sublinhar texto
Tags usadas <u> </u>

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. <u>Não se esqueça de nos adicionar à sua lista de contatos!</u>

Underline_html.png

Adicionar link
Tags usadas <a href> </a href>

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. <a href="https://www.activecampaign.com/privacy-policy/">Leia nossa política de privacidade aqui.</a>

Link_html.png
Linha de inserção
Exemplo de código usado: 
<div style="altura:10px;border-bottom:1px sólido #CCCCCC">
&nbsp;
</div>

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

Insert_line_html.png

example_of_line.png

Crie uma lista com balas
Tags usadas <li> </li>

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: <li>Home energy check up</li><li>Consulta solar</li><li>Isolamento</li>

bulleted_list_html.png

Adicione cor ao seu texto
Exemplo de código usado:
<span style="cor: #267ec2"; <p>Envie-nos seu nome e e-mail para se inscrever em nossa newsletter</p> </span>

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

apply_color_html.png

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.

custom_css_box.png

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".

    inspector_button.png

  2. Direcione o botão "Preencher" clicando nele.

    click_submit_button_to_adjust.png
  3. Na caixa CSS, digite:width: númeropx; e substitua "número" pelo seu próprio número. Neste exemplo, usamos 250px:

    example_width.png

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

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".

    inspector_button.png

  2. Direcione o elemento clicando nele. Neste exemplo, estamos escolhendo o botão "Preencher". click_submit_button_to_adjust.png
  3. Na caixa CSS, enter:font-size: 25px;família de fontes: Geórgia !importante:

    css_for_font_type_and_size.png

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

Texto central usando CSS

  1. Vá para "de Estilo" e clique em "Inspetor".

    inspector_button.png

  2. Direcione o elemento que contém o texto que deseja centralizar clicando nele

    center_text_using_css.png
  3. Na caixa CSS, enter:text-align: center

    center_text_using_css_1.png

Seu texto agora está centrado:
text_centered.png

Adicionar cor com CSS

  1. Vá para "Estilo" depois clique em "Inspetor".

    inspector_button.png

  2. Direcione o elemento que contém o texto para o qual deseja alterar a cor clicando nele.

    Click_element_to_add_color.png
  3. Na caixa CSS, tipo: cor:#hexcodeforcolor; e substitua "número" pelo seu próprio número. Neste exemplo, usamos #f441b8

    hex_color.png

Seu texto agora tem cor aplicada a ele:

blue_text.png

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

Tem mais dúvidas? Envie uma solicitação