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/submissions/html
API to create a one-off submission request document from the given HTML.
API request body should contain JSON payload with "html": '...'
string value.
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 submission = await docuseal.createSubmissionFromHtml({
name: 'Rental Agreement',
documents: [
{
name: 'rental-agreement',
html: html,
html_header: html_header,
html_footer: html_footer,
size: 'A4'
],
submitters: [
{
role: 'First Party',
email: 'john.doe@example.com'
}
]
});