Prerequisites:
Sign Up and Obtain API Key: Visit DocuSeal API Console to obtain your API key.
HTML is a universal tool for building dynamic PDF forms with ease. Using custom tags like <text-field>, <signature-field>, and other 9 field types. These tags, coupled with the style attribute, enable developers to precisely define the width and height of form fields. For instance, utilizing HTML tags within your HTML structure grants you granular control over each element's positioning and dimensions. This level of customization ensures that the final form aligns perfectly with your design requirements.
HTML field tags can contain the following attributes:
name: Name of the field in the template.
role: signer role name. Specify different names in case the document contains multiple signing parties with their own set of fields.
default: default field value to be used in the template.
required: set false to make the field optional and skipable. true by default.
readonly: set true to make it impossible for the signer to edit the pre-filled field value. false by default.
option: option value for multi-select and radio field types. Fields with the same name are grouped into radio and multi-select groups with passed option values.
options: comma separated list of options for select field type.
pattern: HTML field validation pattern string based on https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern specification.
format: date field format, MM/DD/YYYY is used by default.
<text-field>
</text-field><signature-field>
</signature-field><date-field name="Date">
</date-field><image-field name="Photo">
</image-field><initials-field>
</initials-field><phone-field name="Phone">
</phone-field><stamp-field readonly="true">
</stamp-field><file-field name="Resume">
</file-field><checkbox-field>
</checkbox-field><radio-field
options="opt1,opt2">
</radio-field><select-field
options="opt1,opt2">
</select-field><multi-select-field
options="opt1,opt2">
</multi-select-field>To begin crafting PDF document templates, start by creating a structured HTML, incorporating these custom field tags. Use Chrome print preview feature to get a real-time visualization of the document appearance as a PDF.
Custom CSS, whether embedded inline or linked externally, can be used to refine the visual design of the document.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rental Agreement</title>
</head>
<body>
<div
style="width: 80%; margin: 0 auto; padding: 20px; border: 1px solid #ccc;">
<div style="text-align: center; margin-bottom: 20px;">
<h2>Rental Agreement</h2>
</div>
<p>This Rental Agreement (the "Agreement") is made and entered into by and
between:</p>
<p style="display: flex; align-items: center;">
<span>Party A: </span>
<text-field
name="Full Name"
role="Property Owner"
style="width: 160px; height: 20px; display: inline-block;">
</text-field>
</p>
<p>and</p>
<p style="display: flex; align-items: center;">
<span>Party B: </span>
<text-field
name="Full Name"
role="Renter"
style="width: 160px; height: 20px; display: inline-block;">
</text-field>
</p>
<p>...</p>
<div
style="display: flex; justify-content: space-between; margin-top: 50px;">
<div style="text-align: left;">
<p style="display: flex; align-items: center;">
<text-field
name="Full Name"
role="Property Owner"
style="width: 160px; height: 20px; display: inline-block;">
</text-field>
</p>
<p>Party A</p>
<p style="display: flex; align-items: center;">
<span>Date: </span>
<date-field
name="Date"
role="Property Owner"
style="width: 100px; height: 20px; display: inline-block;">
</date-field>
</p>
<signature-field
name="Property Owner's Signature"
role="Property Owner"
style="width: 160px; height: 80px; display: inline-block;">
</signature-field>
</div>
<div style="text-align: left;">
<p style="display: flex; align-items: center;">
<text-field
name="Full Name"
role="Renter"
style="width: 160px; height: 20px; display: inline-block;">
</text-field>
</p>
<p>Party B (Renter)</p>
<p style="display: flex; align-items: center;">
<span>Date: </span>
<date-field
name="Date"
role="Renter"
style="width: 100px; height: 20px; display: inline-block;">
</date-field>
</p>
<signature-field
name="Renter's Signature"
role="Renter"
style="width: 160px; height: 80px; display: inline-block;">
</signature-field>
</div>
</div>
</div>
</body>
</html>
Additionally, it's possible to add headers and footers to every page using the html_header and html_footer parameters.
Use special html tags to add page number and total pages in the header or footer:
<span class="pageNumber"></span>,
<span class="totalPages"></span>.
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: auto 10px; }
</style>
</head>
<body>
<p><span class="pageNumber"></span> of <span class="totalPages"></span></p>
</body>
</html>
Use POST https://api.docuseal.co/templates/html API to create interactive document form template from the given HTML.
API request body should contain JSON payload with "html": '...' string value.
Upon a successful request, you'll receive a "id" of the new template to be used in the signature request process.
Learn more:
const axios = require('axios');
const html = '<!DOCTYPE html>...';
const html_header = '<!DOCTYPE html>...';
const html_footer = '<!DOCTYPE html>...';
axios.post('https://api.docuseal.co/templates/html', {
name: 'Rental Agreement',
html: html,
html_header: html_header.
html_footer: html_footer.
size: 'A4',
}, {
headers: {
'X-Auth-Token': 'YOUR_TOKEN',
'Content-Type': 'application/json',
},
}).then((response) => {
console.log(response.data);
})
.catch((error) => {
console.error('Error:', error);
});