Saltar al contenido principal

Configuración del HTML

Referencia completa para la estructura HTML de las plantillas de Auco — marcadores de posición, ubicación de firmas, campos automáticos y restricciones del generador de PDF.

Estructura Básica de Campos​

Cada campo del formulario se representa con un elemento que tiene un atributo name único:

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

¿Cómo funciona?

  • El SDK detecta los elementos HTML con atributo name.
  • Busca la pregunta correspondiente en el JSON según el name.
  • Reemplaza el contenido del elemento con el valor que ingresa el usuario.

El contenido inicial (___________ arriba) es solo un marcador y será sobrescrito. Puedes usar guiones bajos, guiones o dejarlo vacío — elige lo que se vea mejor en una vista previa.

Campos de Cláusula (Visibilidad Condicional)​

Para preguntas de tipo clausula, crea un <span> por cada opción en el HTML, usando el patrón de nombres {nombre_pregunta}_{valor_opcion}:

<span name="tipo_documento_cedula">Cédula</span>
<span name="tipo_documento_cedula_extranjeria" hidden>Cédula de Extranjería</span>
<span name="tipo_documento_pasaporte" hidden>Pasaporte</span>
Visibilidad de la opción por defecto

El span que coincide con el value por defecto de la pregunta en la configuración JSON no debe tener hidden. Todos los demás spans de opciones deben tener hidden. El SDK alterna la visibilidad a medida que el usuario selecciona opciones distintas.

Ubicación de Firmas​

En el Complete HTML, coloca un <div> con la clase sign-margin y el atributo name donde va cada firma. El name debe coincidir con el valor type del firmante en signatureProfile:

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

Si el mismo firmante firma en varios lugares del documento, repite el <div> con el mismo name en cada ocurrencia:

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

<!-- Página 5 -->
<div name="comprador" class="sign-margin"></div>
Usa name, no id

Con id la firma sale en el PDF, pero no aparece en la vista previa del formulario, así que el firmante que firma en el momento no ve su firma en el documento mientras lo diligencia. Además, si existe un <div id="comprador"> en cualquier parte del documento, todos los <div name="comprador"> se ignoran sin aviso. Si tienes plantillas con id, cámbialo por name.

Campos Automáticos al Finalizar la Firma​

La plataforma rellena automáticamente un valor reservado de name cuando el documento queda completamente firmado. Agrégalo donde tenga sentido:

signDate — se rellena con la fecha de firma​

<p>Firmado el <span name="signDate">________</span></p>

Cuando el documento se sella, este span se reemplaza con la fecha en que se completó la firma, en formato DD de mes de YYYY (localizado).

info

No agregues signDate como pregunta en la configuración JSON. Es un nombre reservado que maneja enteramente el runtime.

Restricciones del generador de PDF​

El generador de PDF de Auco soporta un CSS limitado. Usar funciones no soportadas resultará en layouts rotos.

❌ NO usar​

  • display: flex, flex-direction, flex-wrap, ni ninguna propiedad de flexbox
  • display: grid, grid-template-*, ni ninguna propiedad de CSS Grid
  • Propiedades personalizadas de CSS / variables: var(--x)
  • Consultas @media (soporte 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 en columnas
  • position: absolute / relative para ubicación precisa
  • Elementos HTML <table> para layouts complejos de varias columnas
  • style="..." inline o un bloque <style> en el <head>
  • Familias de fuentes seguras para web: Arial, Helvetica, Times New Roman, Georgia

✅ Codificación​

  • Define <meta charset="UTF-8"> en el <head>
  • Escribe caracteres acentuados directamente (á, é, ñ) — no uses entidades HTML (&aacute;, &ntilde;)

Principio del Documento Continuo​

El Complete HTML se renderiza como un flujo continuo, no como una réplica página por página de un documento de origen.

HacerNo hacer
Tratar el contenido como una única secuencia largaDividir el contenido según las páginas de un PDF original
Incluir encabezado/logo una sola vez al inicioRepetir encabezados en cada página
Incluir pie de página una sola vez si aporta contenido realRepetir pies de página en cada página
Dejar que el generador de PDF maneje los saltos de páginaInsertar <div style="page-break-after: always">
Omitir por completo contadores tipo "Página N de M"Incluir paginaciones como "Pág. 1 de 4"
aviso

El CSS manual de salto de página (page-break-before, page-break-after) rara vez es necesario y con frecuencia produce peores layouts que dejar al generador de PDF decidir. Usar con moderación.

Ejemplo Completo Básico​

<div class="form-container">
  <h1>Formulario de Compra</h1>

  <!-- Campo simple -->
  <p>Nombre del Comprador: <span name="nombre_comprador">___________</span></p>

  <!-- Campo de email -->
  <p>Correo Electrónico: <span name="email_comprador">___________</span></p>

  <!-- Campo de monto -->
  <p>Valor Total: <span name="monto_total">___________</span></p>

  <!-- Cláusula con opciones -->
  <p>
    Tipo de Documento:
    <span name="tipo_doc_cedula">Cédula</span>
    <span name="tipo_doc_cedula_extranjeria" hidden>Cédula de Extranjería</span>
  </p>

  <!-- Ubicación de firma -->
  <h2>Firma</h2>
  <div name="comprador" class="sign-margin"></div>

  <!-- Fecha automática de firma -->
  <p>Firmado el <span name="signDate">________</span></p>
</div>

Para un ejemplo completo de extremo a extremo que cubre Mask HTML, Complete HTML y JSON, consulta la Introducción.