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 axios = require('axios');
const html = '<!DOCTYPE html>...';
const html_header = '<!DOCTYPE html>...';
const html_footer = '<!DOCTYPE html>...';
axios.post('https://api.docuseal.com/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);
});