PlatoForms User Guide
Ctrl+K

  • Form Builder

    Creating an Online Form for an Existing PDF

  • Custom Domain

    With Builder you can build three types of forms: online web forms, online PDF forms, and master forms.

  • Master Form Builder

    you will arrive at the Form Builder. On the form Builder, there are three main sections:

What's new? API Docs

Design de formulários na web e formulários PDF na web

Nesta página

Use Pré-visualizar & Design para personalizar a aparência do seu formulário. O mesmo designer é usado para Formulários na Web, Formulários PDF na Web e Formulários Mestres. Você pode:

  • Aplicar um tema e visualizá-lo imediatamente.
  • Adicionar um logotipo e personalizar cores, fontes, espaçamento e layout.
  • Salvar seu design como um tema compartilhado da equipe ou atualizar um existente.
  • Usar CSS ou JavaScript personalizados para alterações avançadas.

Acessar o designer de formulários

  1. Abra seu formulário PDF na web existente a partir do Painel de Controle.

  2. Clique no botão Visualizar & Design no construtor de formulários no canto superior esquerdo.

    Abrir designer de formulários

    Isso abre uma visualização onde você pode ajustar o design do seu formulário.

Aplicar um tema

Os temas permitem que você altere rapidamente a aparência geral do seu formulário.

  1. Em Visualizar & Design, clique em Design de Formulário no canto superior direito.

    Botão Design de Formulário em Visualizar e Design

  2. No painel à esquerda, clique em Procurar Temas.

    Procurar Temas no painel de Design de Formulário

  3. Escolha um tema. A visualização à direita é atualizada imediatamente.

Salvar um design como um tema de formulário compartilhado

Salve seu design atual como um novo tema que outros membros da sua equipe podem usar.

  1. Em Visualizar & Design, clique em Design de Formulário e personalize o formulário.

  2. Na parte inferior do painel à esquerda, clique em Compartilhar.

    Compartilhar o design atual do formulário como um tema da equipe

  3. No diálogo Compartilhar Tema, insira um Nome do Tema, depois clique em Salvar.

    O novo tema compartilhado aparece em Procurar Temas.

Atualizar ou excluir um tema compartilhado

Use os controles no cartão de um tema compartilhado para atualizá-lo ou excluí-lo.

  1. Em Design de Formulário, clique em Procurar Temas.

  2. Encontre o tema compartilhado e clique no ícone de edição vermelho.

    Atualizar um tema de formulário compartilhado existente

  3. Altere o Nome do Tema se necessário, depois clique em Salvar. Isso atualiza o tema compartilhado com o design atual do formulário.

Para excluir um tema compartilhado, clique no ícone de lixeira vermelho no cartão e confirme a exclusão.

Personalizar o design do formulário

Você também pode fazer mais personalizações nos estilos do formulário. Todas as alterações são visualizadas instantaneamente.

  1. Em Visualizar & Design, clique em Design de Formulário no canto superior direito.

  2. Modifique o design conforme necessário.

    Note

    Saiba mais sobre as opções de personalização disponíveis na seção Propriedades de design do formulário.

  3. Após fazer as modificações desejadas, clique em Salvar. Isso armazena o design para o rascunho e a pré-visualização; o formulário ao vivo só muda depois que você clicar em Publicar no construtor.

Propriedades de design do formulário

Propriedade Descrição
Aparência Personalize o tema visual do formulário:

  • Sistema Automático: Ajusta-se às configurações do dispositivo do usuário.
  • Apenas Modo Claro: Garante uma aparência clara e brilhante com um tema de cores claras consistente.
  • Apenas Modo Escuro: Usa um esquema de cores escuras para reduzir a fadiga ocular em ambientes com pouca luz.
Quando Sistema Automático está selecionado, use os botões Claro e Escuro para visualizar como o formulário fica em diferentes modos.
Logotipo Carregue uma imagem PNG, JPG ou WebP (máx. 5 MB) para exibir um logotipo no formulário.

  • Logotipo Embutido: Redimensiona e integra automaticamente o logotipo dentro do formulário.
  • Fundo do Logotipo: Personalize a cor de fundo atrás do logotipo.
  • Tamanho do Logotipo: Se Logotipo Embutido estiver desativado, ajuste manualmente o tamanho. O posicionamento padrão é fora do formulário, no canto superior esquerdo.
  • Localização do Logotipo: Escolha o alinhamento: Esquerda, Centro ou Direita.
Barra de Navegação Se o seu formulário tiver várias páginas, habilitar a barra de navegação adiciona um menu superior, permitindo que os usuários alternem entre as páginas.

Nota: Para adicionar páginas, use Adicionar Página no construtor de Formulários na Web, ou insira uma Quebra de Página em um Formulário PDF na Web ou Formulário Mestre.
Estilo da Barra de Navegação Uma vez que a Barra de Navegação está habilitada, selecione um estilo que combine com o design do seu formulário. As opções são Estilo 1 a Estilo 4.
Texto de Ajuda Se você adicionou texto de ajuda para os campos do formulário, escolha onde ele aparece:

  • Abaixo do Campo: Coloca o texto de ajuda sob a caixa de entrada.
  • Abaixo do Rótulo: Posiciona o texto de ajuda sob o rótulo do campo.
Formulário RTL Exibe o formulário em um layout da direita para a esquerda, adequado para idiomas como árabe, hebraico e persa. Esta configuração afeta o alinhamento do texto e a direção geral do formulário.
Canto Arredondado Adiciona cantos arredondados aos elementos do formulário para uma aparência mais suave e moderna.
Estilo Material Usa um design minimalista de linhas retas para campos de entrada, semelhante ao Material Design.
Largura do Formulário Ajusta a largura geral do formulário. As opções incluem:

  • P (Pequeno): Layout compacto.
  • M (Médio): Largura equilibrada.
  • G (Grande): Expande o formulário para telas mais largas.
  • Completo: Estende o formulário para toda a largura do contêiner.
Margem do Formulário Define o espaçamento ao redor das bordas do formulário. As opções incluem:

  • Nenhuma: Sem espaçamento extra.
  • P (Pequeno): Almofada mínima.
  • M (Médio): Espaçamento moderado para uma aparência mais estruturada.
Fonte Escolha uma fonte da lista ou cole um código de importação do Google Fonts para usar uma fonte do Google.
Tamanho da Fonte Ajuste o tamanho do texto para garantir a legibilidade. Opções: XS, S, M, L ou XL.
Espaçamento entre Linhas Controla o espaçamento entre as linhas de texto. Opções: XS, S, M, L ou XL para uma legibilidade ideal.
Layout do Rótulo Define o arranjo dos rótulos em relação aos campos de entrada. Se Personalizado for selecionado, retorne ao painel de Propriedades de cada campo para ajustar as posições individuais dos rótulos.
Largura do Rótulo Especifica a largura dos rótulos dos campos para garantir um alinhamento consistente entre os elementos do formulário.

Mais Estilos Personalizados

Você pode personalizar ainda mais a aparência e o comportamento do seu formulário usando o recurso Mais Estilos Personalizados.

  1. Em Pré-visualizar & Design, clique em Design do Formulário, depois clique no botão Mais Estilos Personalizados.

    Designer de formulário

  2. Escolha entre três opções de personalização:

    • Aba Design: Altere imagens de fundo, ajuste o tamanho do banner e modifique elementos de layout.
    • Aba CSS: Adicione CSS personalizado para estilizar fontes, cores e espaçamento.
    • Aba JS: Use JavaScript para personalizar rótulos, adicionar lógica e controlar o comportamento do formulário.
    Note

    JavaScript é executado apenas em um plano pago (não no teste gratuito) com um domínio de formulário personalizado conectado, para manter a segurança. Sem eles, o script não é servido.

  3. Após fazer os ajustes, clique em Salvar. Assim como nas outras configurações de design, o formulário ao vivo só muda depois que você clicar em Publicar.

Bom saber:

  • JavaScript personalizado é limitado a 16 KB.
  • Os estilos Clássico e Conversacional de um formulário mantêm CSS e JavaScript separados.
  • CSS personalizado altera apenas o formulário online; não afeta o PDF gerado.

Tutorial em vídeo

Prefere assistir a ler? Este guia em vídeo é para você.

Is the content helpful?
Give feedback about this article