A digital signature is a piece of information placed in a PDF document that makes it possible to verify the authenticity of the document. The Pdfcrowd API allows you to programmatically create PDFs containing a digital signature field. Such PDFs can be digitally signed in, for example, Adobe Reader or Preview.
This feature is available starting with Pdfcrowd API client libraries version 5.0.
Quick Start
To add a signature field to a document, set the pdfcrowd-signature class on a DIV element and specify its dimensions.
<div class="pdfcrowd-signature"
style="width: 2in; height: 1in; border: 1pt solid black;">
</div>
Our HTML to PDF API will transform this element to a signature field in the resulting PDF.
Complete Example
Let's say we have a document and we want to convert it into a PDF with a signature field that can be digitally signed. Here is our sample document:
<!DOCTYPE html>
<html>
<body>
<h1>Agreement</h1>
<p>
... body of the contract ...
</p>
</body>
</html>
The first step is to add the signature field.
<div class="pdfcrowd-signature"></div>
The next step is to specify its dimensions, border and color using CSS:
.pdfcrowd-signature {
width: 2in;
height: 1in;
border: 1pt solid black;
background-color: #ddddff;
}
All together:
<!DOCTYPE html>
<html>
<head>
<title>Agreement</title>
<style>
.pdfcrowd-signature {
width: 2in;
height: 1in;
border: 1pt solid black;
background-color: #ddddff;
}
</style>
</head>
<body>
<h1>Agreement</h1>
<p>
... body of the contract ...
</p>
<div class="pdfcrowd-signature"></div>
</body>
</html>
You can use the standard CSS styling to position the signature. Let's say we want to align it to the right and place the text "signature" below it:
<!DOCTYPE html>
<html>
<head>
<title>Agreement</title>
<style>
.pdfcrowd-signature {
width: 2in;
height: 1in;
border: 1pt solid black;
background-color: #ddddff;
}
.signature-wrapper {
float: right;
text-align: center;
}
</style>
</head>
<body>
<h1>Agreement</h1>
<p>
... body of the contract ...
</p>
<div class="signature-wrapper">
<div class="pdfcrowd-signature"></div>
signature
</div>
</body>
</html>
PDF Generation
Now we can pass the HTML code to the Pdfcrowd HTML to PDF API. Click the thumbnail to see the resulting PDF.
You can try the example live in our API Playground. The playground will display the code for your favorite programming language, which you can copy and paste and try generating a PDF from your app yourself. Or you can interactively play with PDF generation right in your browser.
Details
Font
By default, the signature uses the font applied to the HTML element. You can specify the font using the CSS font-family rule:
.pdfcrowd-signature {
font-family: 'Liberation Sans';
}
In such a case the entire font is embedded in the PDF file. To create a smaller PDF, you can specify a standard Adobe font using the data-pdfcrowd-font attribute:
<div class="pdfcrowd-signature" data-pdfcrowd-font="Courier">
</div>
You can use these standard Adobe fonts:
Courier
Courier Oblique
Courier Bold
Courier Bold-Oblique
Helvetica
Helvetica Oblique
Helvetica Bold
Helvetica Bold-Oblique
Times Roman
Times Italic
Times Bold
Times Bold-Italic
Tooltip
PDF viewers can display a hint when the mouse cursor hovers over the signature field. You can enable it using the title attribute:
<div class="pdfcrowd-signature" title="Click here to sign">
</div>
Fancy Styling
If you want to apply fancy styling, such as semi-transparent, gradient or image background, show only horizontal borders, and so on, do not style the signature DIV directly, but enclose it in another element and style that element:
<!DOCTYPE html>
<html>
<head>
<title>Agreement - fancy styling</title>
<style>
.pdfcrowd-signature {
width: 100%;
height: 100%;
}
.signature-wrapper {
width: 2in;
height: 1in;
border-top: 2pt solid black;
border-bottom: 2pt solid black;
background:linear-gradient(135deg, #fcdf8a 0%,#f38381 100%);
}
.signature-block {
background-color: #eee;
padding: 0.2rem 1rem 1rem 1rem;
}
</style>
</head>
<body>
<h1>Agreement</h1>
<p>
... body of the contract ...
</p>
<div class="signature-block">
<p>Signature:</p>
<div class="signature-wrapper">
<div class="pdfcrowd-signature"
title="Click here to sign">
</div>
</div>
</div>
</body>
</html>
Here is the result, click the thumbnail to download the PDF.
You can try the example live in the API Playground.