Configuração HTML

Referência completa da estrutura HTML dos modelos Auco — marcadores de posição, posicionamento de assinaturas, campos automáticos e restrições do gerador de PDF.

---

Estrutura básica de um campo

Cada campo do formulário é representado por um elemento que possui um atributo name único:

<span name="question_1">___________</span>

Como funciona:

• O SDK detecta os elementos HTML que possuem o atributo name.
• Ele busca a pergunta correspondente no JSON pelo name.
• Ele substitui o conteúdo do elemento pelo valor que o usuário informa.

O conteúdo inicial (___________ acima) é apenas um marcador de posição e será sobrescrito. Você pode usar sublinhados, hifens ou deixá-lo vazio — escolha o que ficar melhor em uma pré-visualização.

---

Campos de cláusula (visibilidade condicional)

Para perguntas do tipo clausula, crie um <span> para cada opção no HTML, usando o padrão de nome {question_name}_{option_value}:

<span name="document_type_id_card">Documento de identidade</span>
<span name="document_type_foreign_id" hidden>Documento estrangeiro</span>
<span name="document_type_passport" hidden>Passport</span>

Visibilidade da opção padrão

O span que corresponde ao value padrão da pergunta na configuração JSON não deve ter hidden. Todos os demais spans de opção devem ter hidden. O SDK alterna a visibilidade conforme o usuário escolhe opções diferentes.

---

Posicionamento da assinatura

No HTML completo, coloque um <div> com a classe sign-margin e o atributo name no local onde cada assinatura deve ficar. O name deve corresponder ao valor type do signatário no signatureProfile:

<div name="buyer" class="sign-margin"></div>

Se o mesmo signatário assina em vários lugares do documento, repita o <div> com o mesmo name em cada ocorrência:

<!-- Página 1 -->
<div name="buyer" class="sign-margin"></div>

<!-- Página 5 -->
<div name="buyer" class="sign-margin"></div>

Use name, não id

Com id, a assinatura aparece no PDF, mas não aparece na pré-visualização do formulário; assim, um signatário que assina na hora não vê sua assinatura no documento enquanto o preenche. Além disso, se existir um <div id="buyer"> em qualquer lugar do documento, todos os <div name="buyer"> são ignorados silenciosamente. Se você tem modelos que usam id, troque-o por name.

---

Campos automáticos ao finalizar a assinatura

A plataforma preenche automaticamente um valor name reservado quando o documento é totalmente assinado. Adicione-o onde fizer sentido:

signDate — preenche com a data da assinatura

<p>Assinado em <span name="signDate">________</span></p>

Quando o documento é selado, este span é substituído pela data em que a assinatura foi concluída, no formato DD de mes de YYYY (localizado).

info

Não adicione signDate como pergunta na config do seu JSON. Trata-se de um nome reservado, tratado inteiramente pelo ambiente de execução.

---

Restrições do gerador de PDF

O gerador de PDF da Auco oferece suporte limitado a CSS. Usar recursos não suportados resultará em layouts quebrados.

❌ NÃO use

• display: flex, flex-direction, flex-wrap ou qualquer propriedade de flexbox
• display: grid, grid-template-* ou qualquer propriedade de CSS Grid
• Propriedades/variáveis personalizadas de CSS: var(--x)
• Consultas @media (suporte limitado)
• Unidades de layout modernas como vw, vh, dvh, cqw

✅ Alternativas seguras

• display: block, display: inline-block, display: table, display: table-cell
• float: left / float: right para layouts em colunas
• position: absolute / relative para posicionamento preciso
• Elementos HTML <table> para layouts complexos com várias colunas
• style="..." inline ou um bloco <style> no <head>
• Pilhas de fontes seguras para a web: Arial, Helvetica, Times New Roman, Georgia

✅ Codificação

• Defina <meta charset="UTF-8"> no <head>
• Escreva os caracteres acentuados diretamente (á, é, ñ) — não use entidades HTML (á, ñ)

---

Princípio do documento contínuo

O HTML completo é renderizado como um fluxo contínuo, e não como uma réplica página a página de um documento de origem.

Faça	Não faça
Trate o conteúdo como um único fluxo longo	Dividir o conteúdo pelas páginas de um PDF original
Inclua um cabeçalho/logotipo uma única vez no topo	Repetir cabeçalhos em todas as páginas
Inclua um rodapé uma única vez se ele trouxer conteúdo real	Repetir rodapés em todas as páginas
Deixe o gerador de PDF cuidar das quebras de página	Inserir <div style="page-break-after: always">
Omita totalmente os contadores "Página N de M"	Incluir paginação como "Pág. 1 de 4"

aviso

O CSS de quebra de página manual (page-break-before, page-break-after) raramente é necessário e muitas vezes produz layouts piores do que deixar o gerador de PDF decidir. Use com moderação.

---

Exemplo completo básico

<div class="form-container">
  <h1>Formulário de compra</h1>

  <!-- Campo simples -->
  <p>Nome do comprador: <span name="buyer_name">___________</span></p>

  <!-- Campo de e-mail -->
  <p>Endereço de e-mail: <span name="buyer_email">___________</span></p>

  <!-- Campo monetário -->
  <p>Valor total: <span name="total_amount">___________</span></p>

  <!-- Cláusula com opções -->
  <p>
    Tipo de documento:
    <span name="doc_type_id_card">Documento de identidade</span>
    <span name="doc_type_foreign_id" hidden>Documento estrangeiro</span>
  </p>

  <!-- Posição da assinatura -->
  <h2>Assinatura</h2>
  <div name="buyer" class="sign-margin"></div>

  <!-- Data de assinatura automática -->
  <p>Assinado em <span name="signDate">________</span></p>
</div>

Para um exemplo completo de ponta a ponta que cobre o HTML máscara, o HTML completo e o JSON, consulte a Introdução.