Cores de Fundo do Campo: Destacar e Codificar por Cores os Campos do Assinante

Iniciar sessão

Inscrição

Início

Documentação

Perspectivas

Preços

Comparação

Iniciar sessão

Inscrição

Características: Cores de Fundo de Campo

Suporte de Assinatura Multilíngue

Cores de Fundo Personalizadas para Cada Campo

Obter chave API

Classificação de 4,8 estrelas no g2.com

Por que os signatários perdem os campos corretos

Quando um signatário abre um documento com 15 campos espalhados por quatro páginas, os campos que precisam de atenção nem sempre se destacam. Campos obrigatórios são ignorados, campos opcionais são preenchidos desnecessariamente, e documentos com múltiplos signatários tornam-se um jogo de adivinhação de "quais campos são meus."

Apresentando: Cores de Fundo de Campos Personalizados

A Firma.dev agora permite que defina uma cor de fundo personalizada em qualquer campo através de uma única propriedade. Destaque campos obrigatórios em amarelo para que sejam impossíveis de perder, codifique com cores os campos por destinatário para que cada assinante saiba exatamente onde olhar, ou agrupe visualmente entradas relacionadas para que o documento pareça um formulário bem projetado em vez de uma parede de caixas.

As cores de fundo dos campos enviados na v1.11.0 e funcionam em todos os tipos de campo.

Quais são as cores de fundo dos campos?

Uma Propriedade, Todos os Tipos de Campo

A propriedade background_color aceita uma string de cor hex e aplica-a como preenchimento de fundo em qualquer campo de um documento de assinatura. Funciona em assinaturas, iniciais, entradas de texto, datas, caixas de seleção, listas suspensas, envios de arquivos e todos os outros tipos de campo que Firma.dev suporta.

Como Definir e Reiniciar as Cores dos Campos

Defina background_color para um valor hexadecimal como "#FFFDE7" (amarelo claro) ou "#E8F5E9" (verde claro) e o campo será exibido com esse fundo na experiência de assinatura. Defina-o para null ou omita-o completamente para usar a aparência padrão.

Formatos e Tipos de Campo Suportados

Tanto os formatos hexadecimais de 3 dígitos (#fff) como os de 6 dígitos (#FFFDE7) são aceites. A propriedade está disponível nas definições de campos padrão, campos de modelo, campos de pedido de assinatura e definições de etiquetas âncora.

Obter chave API

Como usar cores de fundo

Adicione background_color a qualquer campo na sua solicitação de assinatura ou chamada de criação de modelo:

const response = await fetch(
  'https://api.firma.dev/functions/v1/signing-request-api/signing-requests',
  {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.pt.FIRMA_API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      workspace_id: workspaceId,
      template_id: templateId,
      recipients: [
        {
          id: 'temp_1',
          first_name: 'Sarah',
          last_name: 'Chen',
          email: 'sarah@example.com',
          designation: 'Assinante',
          order: 1
        },
        {
          id: 'temp_2',
          first_name: 'Mike',
          last_name: 'Torres',
          email: 'mike@example.com',
          designation: 'Assinante',
          order: 2
        }
      ],
      fields: [
        {
          type: 'assinatura',
          position: { x: 15, y: 80, width: 30, height: 8 },
          page_number: 1,
          required: true,
          recipient_id: 'temp_1',
          background_color: '#E3F2FD'
        },
        {
          type: 'assinatura',
          position: { x: 55, y: 80, width: 30, height: 8 },
          page_number: 1,
          required: true,
          recipient_id: 'temp_2',
          background_color: '#FFF3E0'
        },
        {
          type: 'data',
          position: { x: 15, y: 90, width: 20, height: 5 },
          page_number: 1,
          required: true,
          recipient_id: 'temp_1',
          background_color: '#E3F2FD'
        },
        {
          type: 'data',
          position: { x: 55, y: 90, width: 20, height: 5 },
          page_number: 1,
          required: true,
          recipient_id: 'temp_2',
          background_color: '#FFF3E0'
        }
      ]
    })
  }
);

Neste exemplo, os campos de Sarah recebem um fundo azul claro e os de Mike recebem um fundo laranja claro. Quando cada assinante abre o documento, os seus campos são visualmente distintos dos da outra pessoa, mesmo antes de começarem a preencher algo.

Também pode definir cores de fundo nas definições da tag de âncora se estiver a usar a colocação de campo baseada em texto:

{
  "anchor_string": "{{ASSINE_AQUI}}",
  "type": "assinatura",
  "recipient_id": "temp_1",
  "required": true,
  "background_color": "#FFFDE7"

As cores de fundo também podem ser atualizadas em campos existentes através de operações PATCH, para que possa ajustar o estilo visual sem reconstruir o pedido de assinatura inteiro.

Padrões práticos

Codificação de cores por signatário

Atribua uma cor consistente a cada destinatário em todos os seus campos. Azul claro para o assinante 1, laranja claro para o assinante 2, verde claro para o assinante 3. Este é o caso de uso mais impactante para documentos multi-partes onde os assinantes precisam identificar rapidamente quais campos pertencem a eles.

Destacar campos obrigatórios

Se os seus documentos misturam campos obrigatórios e opcionais, dê aos campos obrigatórios um destaque amarelo subtil (#FFFDE7) e deixe os campos opcionais com o fundo padrão. Os assinantes veem imediatamente o que não podem pular.

Destacar campos obrigatórios

Agrupando campos relacionados

Use a mesma cor de fundo em campos que logicamente pertencem juntos, como um conjunto de campos de endereço ou um bloco de detalhes de emprego. Isto cria uma agrupação visual sem a necessidade de reestruturar o layout do documento.

Agrupando campos relacionados

Assinalar alterações

Ao enviar uma versão atualizada de um documento para nova assinatura, destaque os campos que mudaram desde a última versão. Um fundo vermelho claro (#FFEBEE) nos campos modificados chama a atenção para exatamente o que é diferente.

Assinalar alterações

Referência de API

A propriedade background_color está disponível nestes esquemas: Field, TemplateField, SigningRequestField e AnchorTag.

Tipo: string | null. Aceita valores de cor hexadecimais em formato de 3 ou 6 dígitos com o prefixo #. Defina como null ou omita para usar a aparência padrão do campo. Valores hexadecimais inválidos retornarão um erro de validação.

A propriedade é aceita na criação de solicitações de assinatura (POST /signing-requests), criação de templates (POST /templates) e operações de atualização (PUT e PATCH tanto em solicitações de assinatura quanto em templates).

Consulte o registo de alterações da API para a referência completa do esquema v1.11.0.

Dicas de design

Use apenas pastéis claros para os fundos de campo

Cores escuras tornam o texto do campo ilegível, e cores saturadas parecem agressivas em um documento profissional. Bons pontos de partida: #E3F2FD (azul), #E8F5E9 (verde), #FFF3E0 (laranja), #FFFDE7 (amarelo), #F3E5F5 (roxo), #FFEBEE (vermelho).

Mantenha o seu esquema de cores consistente em todos os documentos

Se o assinante 1 é sempre azul e o assinante 2 é sempre laranja, os destinatários aprendem o padrão e passam pelos documentos mais rapidamente ao longo do tempo.

Mantenha o seu esquema de cores consistente em todos os documentos

Se o assinante 1 é sempre azul e o assinante 2 é sempre laranja, os destinatários aprendem o padrão e passam pelos documentos mais rapidamente ao longo do tempo.

Para acessibilidade, não confie apenas na cor para comunicar significado.

As cores de fundo devem reforçar os rótulos e as instruções dos campos, não substituí-los. Um campo destacado em amarelo ainda precisa de um rótulo claro explicando o que inserir.

Para acessibilidade, não confie apenas na cor para comunicar significado.

As cores de fundo devem reforçar os rótulos e as instruções dos campos, não substituí-los. Um campo destacado em amarelo ainda precisa de um rótulo claro explicando o que inserir.

Pronto para adicionar assinaturas eletrónicas à sua aplicação?

Comece gratuitamente. Não é necessário cartão de crédito. Pague apenas €0,029 por envelope quando estiver pronto para entrar em funcionamento.

Obter chave API

Pronto para adicionar assinaturas eletrónicas à sua aplicação?

Comece gratuitamente. Não é necessário cartão de crédito. Pague apenas €0,029 por envelope quando estiver pronto para entrar em funcionamento.

Obter chave API

Pronto para adicionar assinaturas eletrónicas à sua aplicação?

Comece gratuitamente. Não é necessário cartão de crédito. Pague apenas €0,029 por envelope quando estiver pronto para entrar em funcionamento.

Obter chave API