Skip to main content

HTML Configuration

Complete reference for the HTML structure of Auco templates — placeholders, signature positioning, automatic fields, and renderer constraints.

Basic Field Structure​

Each form field is represented with an element that has a unique name attribute:

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

How it works:

  • The SDK detects HTML elements with a name attribute.
  • It looks up the matching question in the JSON by name.
  • It replaces the element's content with the value the user enters.

The initial content (___________ above) is just a placeholder and will be overwritten. You can use underscores, dashes, or leave it empty — pick whatever reads best in a preview.

Clause Fields (Conditional Visibility)​

For questions of type clausula, create one <span> per option in the HTML, using the name pattern {question_name}_{option_value}:

<span name="document_type_id_card">ID Card</span>
<span name="document_type_foreign_id" hidden>Foreign ID</span>
<span name="document_type_passport" hidden>Passport</span>
Default option visibility

The span that matches the question's default value in the JSON config must not have hidden. All other option spans must have hidden. The SDK toggles visibility as the user picks different options.

Signature Placement​

In the Complete HTML, place a <div> with the sign-margin class where each signature goes. There are two ways to reference a signer — pick one per signer and stick with it:

Option A — Single signature location​

If a signer signs in only one place, use id:

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

The id must match the type value in signatureProfile.

Option B — Multiple signature locations​

If the same signer signs in several places across the document, use name on every occurrence, and do not use id anywhere for that signer:

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

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

<!-- Page 12 -->
<div name="buyer" class="sign-margin"></div>
Never mix id and name for the same signer

If a <div id="buyer"> exists anywhere in the document, every <div name="buyer"> will be silently ignored by the renderer. Pick Option A or Option B per signer — never both.

Automatic Fields on Sign Finish​

The platform automatically fills two reserved name values when the document is fully signed. Add them where they make sense:

signDate — fills with the signature date​

<p>Signed on <span name="signDate">________</span></p>

When the document is sealed, this span is replaced with the current date in DD de mes de YYYY format (localized).

signComplete — shows a seal/confirmation after signing​

<span name="signComplete" hidden>Document signed and verified</span>

This element stays hidden while the document is still being filled or signed. Once all signers have completed their signature, its hidden attribute is removed so the content becomes visible.

info

Do not add signDate or signComplete as questions in your JSON config. They are reserved names handled entirely by the runtime.

Renderer Constraints (PhantomJS)​

The Complete HTML is rendered to PDF using PhantomJS, which has a limited CSS engine. Using unsupported features will result in broken layouts.

❌ Do NOT use​

  • display: flex, flex-direction, flex-wrap, or any flexbox property
  • display: grid, grid-template-*, or any CSS Grid property
  • CSS custom properties / variables: var(--x)
  • @media queries (limited support)
  • Modern layout units like vw, vh, dvh, cqw

✅ Safe alternatives​

  • display: block, display: inline-block, display: table, display: table-cell
  • float: left / float: right for column layouts
  • position: absolute / relative for precise placement
  • HTML <table> elements for complex multi-column layouts
  • Inline style="..." or a <style> block in the <head>
  • Web-safe font stacks: Arial, Helvetica, Times New Roman, Georgia

✅ Encoding​

  • Set <meta charset="UTF-8"> in the <head>
  • Write accented characters directly (á, é, ñ) — do not use HTML entities (&aacute;, &ntilde;)

Continuous Document Principle​

The Complete HTML is rendered as a continuous flow, not a page-by-page replica of a source document.

DoDon't
Treat the content as one long streamSplit content by the pages of an original PDF
Include a header/logo once at the topRepeat headers on every page
Include a footer once if it adds real contentRepeat footers on every page
Let the renderer handle page breaksInsert <div style="page-break-after: always">
Omit "Page N of M" counters entirelyInclude pagination like "Pág. 1 de 4"
warning

Manual page-break CSS (page-break-before, page-break-after) is rarely needed and often produces worse layouts than letting the renderer decide. Use sparingly.

Basic Complete Example​

<div class="form-container">
  <h1>Purchase Form</h1>

  <!-- Simple field -->
  <p>Buyer Name: <span name="buyer_name">___________</span></p>

  <!-- Email field -->
  <p>Email Address: <span name="buyer_email">___________</span></p>

  <!-- Currency field -->
  <p>Total Value: <span name="total_amount">___________</span></p>

  <!-- Clause with options -->
  <p>
    Document Type:
    <span name="doc_type_id_card">ID Card</span>
    <span name="doc_type_foreign_id" hidden>Foreign ID</span>
  </p>

  <!-- Signature placement -->
  <h2>Signature</h2>
  <div id="buyer" class="sign-margin"></div>

  <!-- Automatic sign date -->
  <p>Signed on <span name="signDate">________</span></p>
</div>

For a full end-to-end example covering Mask HTML, Complete HTML, and JSON, see the Introduction.