DocumentaçãoJourney Optimizer B2BDocumentação do Journey Optimizer B2B Edition

Design de formulário

Última atualização: 14 de maio de 2026

Criado para:

  • {"id":"e8ccd51f-da0d-4e3b-939b-e30d5ebb1ea5"}
  • {"id":"b69b2659-1057-424e-8fc5-ed9e016dc554"}

Depois que você cria um formulário, o espaço de design visual abre um rascunho com uma definição de formulário básica padrão. No painel Resumo à direita, clique em Editar formulário e use o espaço de design visual para definir o estilo do formulário e os componentes do campo.

Espaço para design do formulário {width="700" modal="regular"}

O botão ​ Enviar ​ (campo de rodapé) faz parte do formulário por padrão e não pode ser removido. Você pode selecionar o componente de botão/rodapé no formulário para alterar o texto e o estilo do botão.

Campos

Os campos de formulário são usados para capturar dados de perfil de pessoas que podem ser usados para segmentar pessoas e associá-los a contas e grupos de compras. Use as ferramentas de design de campo para criar o conjunto de campos e o layout necessários para coletar os dados necessários para suas atividades de marketing baseadas em conta.

Adicionar um campo add-field

  1. No painel Componentes à esquerda, arraste o componente de conteúdo Campo e solte-o na tela.

    Adicionar um componente de campo ao formulário {width="800" modal="regular"}

  2. Para Selecionar atributo de campo, escolha uma opção e defina o atributo do campo.

    • Selecionar atributo de campo - Use essa opção para selecionar um atributo com base no esquema do conjunto de dados definido na predefinição do seu formulário.

      Na caixa de diálogo Selecionar atributo de campo, marque a caixa de seleção do atributo que deseja usar para o campo e clique em Selecionar.

      Adicionar um componente de campo de atributo selecionado ao formulário {width="700" modal="regular"}

      Por exemplo, você pode definir o Email e a Empresa. Quando os usuários preenchem e enviam o formulário, as informações inseridas são salvas no conjunto de dados selecionado.

      Para mapear os dados coletados com um Perfil, selecione um campo de identidade de perfil. Os campos de identidade estão marcados como Obrigatório na lista de atributos - você pode filtrá-los.

    • Adicionar campo personalizado

      Com essa opção, é possível definir um campo livre sem mapeá-lo para um campo no conjunto de dados vinculado.

      Adicionar componente de campo personalizado ao formulário {width="600" modal="regular"}

    Na tela de desenho, o rótulo de campo padrão para o atributo selecionado é preenchido na tela de desenho. Os Detalhes do campo são exibidos no painel à direita.

  3. Se necessário, altere o texto Rótulo.

    Esse texto é exibido ao lado do campo no formulário. O texto padrão é preenchido no atributo de campo.

  4. Defina Tipo de campo de acordo com o tipo de dados do campo:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 11-row-2 12-row-2 13-row-2 14-row-2
    Tipo de campo Uso
    Caixa de seleção Use este tipo para que os visitantes possam selecionar um valor de true (marcado) ou false (desmarcado).
    Grupo de caixas de seleção Use este tipo para que os visitantes possam selecionar um valor de true (marcado) ou false (desmarcado) para vários itens.
    Moeda Use esse tipo para permitir um campo flutuante que represente o tipo de moeda padrão selecionado para a instância do Journey Optimizer B2B edition.
    Data Use esse tipo para restringir a entrada a um formato de data e fornecer um seletor de calendário no campo.
    Duplo Variável dupla (ponto flutuante de precisão dupla) armazenada como números de ponto flutuante IEEE de 64 bits (8 bytes).
    Email Use esse tipo para restringir a entrada em um formato de endereço de email.
    Número Use esse tipo para restringir o campo a um valor numérico.
    Grupo de opções Use esse tipo para permitir que os visitantes selecionem uma de um conjunto de opções.
    Selecionar Use esse tipo para permitir que os visitantes selecionem uma de um conjunto de opções usando uma lista suspensa.
    Controle deslizante Use esse tipo para permitir que os visitantes definam um valor numérico usando um controle deslizante.
    Telefone Use esse tipo para um campo de entrada de número de telefone.
    Texto Use este tipo para um campo de entrada de texto padrão (sequência de caracteres).
    Área de texto Use este tipo para suportar entradas de texto mais longas.
    URL Use esse tipo para restringir a entrada de texto a um URL, incluindo o protocolo de URL padrão.

  5. Dependendo do tipo de campo selecionado, defina as outras opções para a entrada e validação do campo.

    Definir opções para o campo de acordo com o tipo de campo selecionado {width="800" modal="regular"}

    Por exemplo, o tipo de campo Texto tem as seguintes opções para entrada e validação de campo:

    • Espaço reservado - O valor do espaço reservado para o campo que dá ao visitante um exemplo do que é esperado para o campo.

    • Instruções - texto instrutivo que ajuda o visitante a preencher o campo. Digite o texto que você deseja exibir como texto em foco para o campo.

      note tip
      TIP
      Instruções vs. texto de espaço reservado
      Use essas duas propriedades para orientar os visitantes a preencherem o campo. O texto de instrução é exibido como uma dica de ferramenta/texto pop-up ao passar o ponteiro sobre o campo. O texto do espaço reservado aparece esmaecido dentro do campo e desaparece quando o visitante insere o texto no campo. Você pode usar ambos os métodos, ou apenas um.

    • Valor padrão - Use esta opção para especificar um valor padrão para o campo.

    • Mensagem de validação - Use esta opção para especificar uma mensagem de validação para o campo. Essa mensagem será exibida se o visitante inserir um valor inválido no campo. A mensagem Padrão está definida por padrão. Escolha Personalizar e insira sua própria mensagem.

    • Comprimento máximo - Insira o número máximo de caracteres que podem ser inseridos no campo.

  6. Defina os Comportamentos do campo conforme necessário:

    • Obrigatório - Marque a caixa de seleção para criar a entrada de campo necessária para enviar o formulário.

    • Sensível - Marque a caixa de seleção para diferenciar maiúsculas de minúsculas no campo.

    • Preenchimento prévio Habilitado - Marque a caixa de seleção para preencher o campo com base nas informações de perfil, se disponíveis.

    • Habilitar máscara de entrada - Marque a caixa de seleção para restringir a entrada do visitante usando uma máscara de entrada. Por exemplo, talvez você queira que os visitantes insiram números de telefone em um formato específico. Na caixa de diálogo, insira a máscara usando 9 para qualquer número, a para qualquer letra e * para qualquer um.

      Definir uma máscara de entrada para o campo {width="550" modal="regular"}

      Clique em Salvar para habilitar a máscara de entrada especificada.

Alterar estilo do campo field-styling

Selecione a guia Estilos no painel direito para alterar o estilo do campo selecionado.

  • Plano de fundo - Marque a caixa de seleção para aplicar uma cor de plano de fundo ao campo. Branco é a cor padrão. Clique no quadrado Cor do plano de fundo para abrir o seletor de cores pop-up e escolher uma cor para o plano de fundo do campo.

    Definir os estilos de plano de fundo para o campo de formulário {width="600" modal="regular"}

  • Rótulo - O estilo do rótulo controla as características visuais do texto exibido ao lado do campo. Escolha uma exibição de rótulo superior ou lateral relacionada ao campo. É possível definir o tamanho da fonte, a altura da linha, o estilo do texto e o alinhamento do texto. Clique no quadrado Cor da fonte para abrir o seletor de cores pop-up e escolher uma cor para o texto do rótulo.

    Definir os estilos de rótulo para o campo de formulário {width="600" modal="regular"}

  • Borda - Clique no quadrado Cor da borda para abrir o seletor de cores pop-up e escolher uma cor para a borda. É possível definir uma borda para o campo, incluindo a cor e a largura da linha. Desmarque a caixa de seleção para remover a borda do campo exibido. Também é possível alterar o tamanho da borda (largura em pixels), o estilo e a configuração de raio dos cantos.

    Definir os estilos de borda para o campo de formulário {width="600" modal="regular"}

  • Tamanho - Selecione uma configuração de tamanho para determinar a largura de exibição do campo. Escolha Largura total, Meia largura ou Automático.

  • Margem - Defina as margens (em pixels) ao redor do campo. Você pode definir a mesma margem em todos os quatro lados ou marcar a caixa de seleção Margem diferente para cada lado para definir as margens horizontal e vertical separadamente.

  • Preenchimento - Defina o preenchimento (em pixels) ao redor do campo. Você pode definir o mesmo preenchimento nos quatro lados, ou marcar a caixa de seleção Diferente para cada lado para definir o preenchimento horizontal e vertical separadamente.

    Definir o tamanho, a margem e os estilos de preenchimento do campo de formulário {width="600" modal="regular"}

Reordenar campos field-reorder

Você pode mover campos de formulário diretamente no espaço de trabalho visual. Clique na ferramenta Mover na borda direita do campo selecionado e arraste-o para um novo local.

Adicione componentes estruturais ao formulário e mova os campos para colunas para agrupá-los e alterar o layout. Clique na ferramenta Mover na borda esquerda do componente de coluna selecionado e arraste-o para um novo local no formulário.

Mover campos no formulário e usar componentes estruturais para agrupamento e layout {width="500"}

Excluir ou duplicar um campo field-delete-duplicate

Clique no ícone Excluir ( Ícone Excluir ) na barra de ferramentas ou no painel direito para excluir um campo selecionado. Na caixa de diálogo de confirmação, clique em Excluir.

Clique no ícone Duplicar ( Duplicar ícone ) na barra de ferramentas ou no painel direito para duplicar um campo selecionado. O novo campo é exibido logo abaixo do campo original. Clique em Selecionar atributo de campo para definir o atributo do campo. Defina o tipo de campo, os detalhes e os estilos conforme necessário.

Excluir e duplicar ícones para campos de formulário {width="600" modal="regular"}

Botão Enviar

Por padrão, o botão Enviar (campo de rodapé) faz parte do formulário e não pode ser removido. Selecione o componente de botão/rodapé no formulário para alterar o texto e o estilo do botão.

Editar o conteúdo do botão button-content

Com a guia Conteúdo exibida no painel direito, altere o texto no campo Texto do botão. O dimensionamento do botão é ajustado para acomodar o comprimento do texto.

Alterar o texto do botão no formulário {width="600" modal="regular"}

Estilo do botão de envio button-styles

Selecione a guia Estilos no painel direito para alterar o estilo do componente de botão/rodapé selecionado.

  • Plano de fundo - Marque a caixa de seleção para aplicar uma cor de plano de fundo ao botão. Azul é a cor padrão. Clique no quadrado Cor do plano de fundo para abrir o seletor de cores pop-up e escolher uma cor para o plano de fundo do botão.

    Definir os estilos de plano de fundo para o botão de formulário {width="600" modal="regular"}

  • Rótulo - O estilo do rótulo controla as características visuais do texto dentro do botão. É possível definir o tamanho da fonte, a altura da linha, o estilo do texto e o alinhamento do texto. Clique no quadrado Cor da fonte para abrir o seletor de cores pop-up e escolher uma cor para o texto do rótulo.

  • Borda - Clique no quadrado Cor da borda para abrir o seletor de cores pop-up e escolher uma cor para a borda. É possível definir uma borda para o botão, incluindo a cor e a largura da linha. Desmarque a caixa de seleção para remover a borda do botão exibido. Também é possível alterar o tamanho da borda (largura em pixels), o estilo e a configuração de raio de cantos arredondados.

  • Tamanho - Selecione uma configuração de tamanho para determinar a largura de exibição do botão. Escolha Largura total, Meia largura ou Automático. O preenchimento se ajusta de acordo com as configurações de tamanho e alinhamento.

    Definir o rótulo, a borda e os estilos de tamanho para o botão de formulário {width="600" modal="regular"}

  • Alinhamento do Botão - Quando você escolher um tamanho de Meia largura ou Automático para o botão, defina o alinhamento à esquerda, à direita ou ao centro. O preenchimento se ajusta de acordo com as configurações de tamanho e alinhamento.

  • Margem - Defina as margens (em pixels) ao redor do botão. Você pode definir a mesma margem em todos os quatro lados ou marcar a caixa de seleção Margem diferente para cada lado para definir as margens horizontal e vertical separadamente.

  • Preenchimento - Defina o preenchimento (em pixels) ao redor do botão. Você pode definir o mesmo preenchimento nos quatro lados, ou marcar a caixa de seleção Diferente para cada lado para definir o preenchimento horizontal e vertical separadamente. O preenchimento será ajustado se você alterar as configurações de tamanho e alinhamento.

    Definir os estilos de alinhamento, margem e preenchimento do botão de formulário {width="600" modal="regular"}

Estilo do formulário form-styling

É possível alterar estilos para a área de formulário ao clicar fora dos componentes estruturais ou de formulário. Os componentes de formulário (campos e botões) herdam os estilos Corpo definidos no nível superior, a menos que outros estilos sejam definidos no nível de campo ou botão/rodapé.

Definir os estilos de nível superior para o corpo do formulário {width="600" modal="regular"}

Estilos CSS

Novos formulários usam o CSS padrão para o estilo. Se quiser alterar os estilos modificando o CSS, você poderá copiá-lo e usá-lo para definir um CSS personalizado para o formulário.

Para definir um CSS personalizado para o formulário :

  1. Clique em Exibir CSS no painel direito para examinar o código CSS.

    Exibir CSS para o formulário {width="450" modal="regular"}

  2. Selecione o código CSS na janela de rolagem e copie-o para a área de transferência.

  3. Clique em Fechar.

  4. (Opcional) Cole o código copiado em sua ferramenta de CSS favorita e edite o CSS para refletir o estilo desejado.

  5. Clique em Adicionar CSS personalizado no painel direito.

  6. Cole o código CSS na janela.

    Adicionar CSS personalizado para o formulário {width="450" modal="regular"}

    Você pode editar o texto colado nesta janela.

  7. Clique em Salvar.

Estilo manual

Altere as configurações no painel direito para definir a exibição para todo o formulário.

  • Cor do plano de fundo - Marque a caixa de seleção para aplicar uma cor de plano de fundo ao redor da área do formulário. Branco é a cor padrão. Clique no quadrado colorido para abrir o seletor de cores pop-up e escolha uma cor para o plano de fundo do formulário.

  • Plano de fundo do Viewport - Marque a caixa de seleção para aplicar uma cor de plano de fundo a todos os componentes do formulário. O padrão é sem cor (herdar do plano de fundo externo). Clique no quadrado colorido para abrir o seletor de cores pop-up e escolha uma cor para os componentes estruturais do formulário.

    Definir as cores do plano de fundo do formulário {width="600" modal="regular"}

  • Texto - Escolha uma Família de fontes para o formulário, o que afeta os rótulos, a dica e o texto de espaço reservado para os campos de formulário. Também afeta o texto do botão de envio padrão.

  • Tamanho - Alterar o tamanho (largura) do formulário em pixels.

  • Margem - Defina as margens (em pixels) ao redor dos componentes de formulário. Você pode definir a mesma margem em todos os quatro lados ou marcar a caixa de seleção Margem diferente para cada lado para definir as margens horizontal e vertical separadamente.

    Definir o texto, o tamanho e as margens do formulário {width="600" modal="regular"}

recommendation-more-help
journey-optimizer-b2b-help-user