Skip to main content

HTML Configuration

Complete reference for the HTML structure of Auco templates — placeholders, signature positioning, automatic fields, and PDF generator 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 and the name attribute where each signature goes. The name must match the signer's type value in signatureProfile:

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

If the same signer signs in several places across the document, repeat the <div> with the same name on every occurrence:

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

<!-- Page 5 -->
<div name="buyer" class="sign-margin"></div>
Use name, not id

With id the signature shows up in the PDF, but it does not appear in the form preview, so a signer who signs on the spot does not see their signature in the document while filling it in. Also, if a <div id="buyer"> exists anywhere in the document, every <div name="buyer"> is silently ignored. If you have templates using id, switch them to name.

Automatic Fields on Sign Finish​

The platform automatically fills one reserved name value when the document is fully signed. Add it where it makes 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 date the signature was completed, in DD de mes de YYYY format (localized).

info

Do not add signDate as a question in your JSON config. It is a reserved name handled entirely by the runtime.

PDF Generator Constraints​

Auco's PDF generator supports limited CSS. 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 PDF generator 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 PDF generator 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 name="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.