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>
Use POST https://api.docuseal.com/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 docuseal = require("@docuseal/api");
docuseal.configure({ key: "API_KEY", url: "https://api.docuseal.com" });
const html = '<!DOCTYPE html>...';
const html_header = '<!DOCTYPE html>...';
const html_footer = '<!DOCTYPE html>...';
const template = await docuseal.createTemplateFromHtml({
name: 'Rental Agreement',
html: html,
html_header: html_header,
html_footer: html_footer,
size: 'A4'
});