Create a PDF Signature Field

This guide shows how to create a PDF signature field with PDFCrowd's HTML to PDF API. Define the field in HTML and position it with CSS. The generated PDF contains an unsigned field that can then be signed with a digital ID in a compatible PDF reader or signing application.

Add the signature field

Add the pdfcrowd-signature class to a <div> and give it a width and height. A border or background makes the signing area visible before the document is signed:

<style>
  .pdfcrowd-signature {
    width: 65mm;
    height: 25mm;
    box-sizing: border-box;
    border: 1px solid #94a3b8;
    background: #f1f5f9;
    font-family: sans-serif;
  }
</style>

<div class="pdfcrowd-signature" title="Approver signature"></div>

The title supplies a tooltip in readers that display field hints. Put labels such as “Approver signature” outside the field so they remain ordinary page content.

The complete approval.html example adds a project summary and a label, with the signature block aligned to the right.

Generate the PDF

The example uses Python. The same HTML and PDF settings work with any supported client library or the HTTP API.

To run it, install the Python client and set API credentials in the API_USERNAME and API_KEY environment variables. Both can be set to "demo" for testing.

import os

import pdfcrowd

client = pdfcrowd.HtmlToPdfClient(
    os.environ["API_USERNAME"],
    os.environ["API_KEY"],
)
client.setPageSize("A4")
client.setPageMargins("20mm", "20mm", "20mm", "20mm")
client.setContentFitMode("no-scaling")

client.convertFileToFile("approval.html", "approval.pdf")

setContentFitMode("no-scaling") preserves the dimensions set in CSS. The pdfcrowd-signature class creates the signature field without enabling setEnablePdfForms(). That option is for converting HTML form controls into editable PDF fields.

For a webpage input, the final conversion call would be:

client.convertUrlToFile("https://your-domain.example/approval/", "approval.pdf")

Sign the generated PDF

You can inspect the unsigned example PDF without running the code. To sign it, open a downloaded copy in an application that supports certificate-based PDF signatures, such as Adobe Acrobat Reader. Select the signature field, choose a digital ID, and save the signed document. Adobe explains digital IDs and how they are used.

Creating the field does not sign the document or provide a digital ID. A signature image or typed name placed on the page is also different from a certificate-based signature in this field. The signing application controls the appearance of the completed signature and reports whether the signer's certificate is trusted.

Some PDF viewers display the document but cannot sign its fields. If clicking the field does nothing, try a reader with support for certificate-based signing.

Position and style the field

Place the field in the HTML where it belongs in the document. For example, a wrapper with a fixed width and an automatic left margin aligns the field and its label to the right:

<style>
  .signature-block {
    width: 65mm;
    margin: 15mm 0 0 auto;
  }
</style>

<div class="signature-block">
  <div class="pdfcrowd-signature" title="Approver signature"></div>
  <p>Approver signature</p>
</div>

This uses the field dimensions and styling from the first example. Leave enough room for the signature appearance that the signing application will add.

Gradients and decorative borders

For a gradient, an image background, or borders on selected sides, style a wrapper and keep the field itself transparent:

<style>
  .signature-decoration {
    width: 65mm;
    height: 25mm;
    border-bottom: 2px solid #2563eb;
    background: linear-gradient(90deg, #e0f2fe, #f0fdfa);
  }
  .signature-decoration .pdfcrowd-signature {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
  }
</style>

<div class="signature-decoration">
  <div class="pdfcrowd-signature" title="Approver signature"></div>
</div>

Field fonts

By default, the API embeds the font applied to the signature element. A standard PDF font can reduce the file size; select one with data-pdfcrowd-font:

<div class="pdfcrowd-signature" data-pdfcrowd-font="Courier"
     title="Approver signature"></div>

This sets the field's default font. A signing application may use its own font and layout for the completed signature.