An overview regarding HTML-to-PDF document conversion and form creation capabilities.
While Microsoft Word serves as a primary word processor, its PDF export functionality often fails to preserve complex fillable form fields. While Adobe Acrobat Pro remains the industry standard for creating interactive PDFs, these features require a premium subscription.
Original article here 👉 [Link Here]
HTML Document
As an alternative, website forms can be built using HTML and CSS. Furthermore, the BoltonSea file management system (version 4.0) now supports the conversion of HTML code into both standard and interactive PDF documents.
HTML to PDF Creation - Example Scenario
This article's example is based on the scenario to create a rental agreement. By utilizing HTML to PDF conversion, you can create professional, fillable documents suitable for notarization and legal use. Please find the drafted agreement in HTML below for your review.
Test HTML to PDF Creation via BoltonSea API
You can also refer to the quick Docker Image installer guide available at [Link to Guide] for additional details.
HTML to PDF
API Endpoint: http://localhost:9200/media/document/html_to_pdf_template
Request Body
The complete HTML body is present at the bottom of this article.
{
"media_group_id":"1",
"file_name":"rent_renewal",
"html_content":"<div>Empty WebPage HTML .... </div>"
}
Response Body Response with the URL of the created 'PDF document'.
{
"id": 1,
"width": 0,
"height": 0,
"maintain_aspect_ratio": false,
"is_parent_file": false,
"mime_type": "application/pdf",
"private_url": "http://localhost:9200/media/file/1/2026/01/pviucoc525r9i4ro176893530770996561.pdf",
"public_url": "http://localhost:9200/media/file/1/2026/01/pviucoc525r9i4ro176893530770996561.pdf",
"original_file_name": "rent_renewal.pdf",
"file_size": 5818,
"created_on": "2026-01-20T18:55:07.707+00:00"
}
PDF File Preview
Renewal Service Agreement - HTML Content
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\" />\n <style>\n @page land {\n size: landscape;\n }\n\n @page port {\n size: portrait;\n }\n\n body {\n page: port;\n }\n\n .header {\n text-align: center;\n }\n\n .brand a {\n text-decoration: none;\n }\n\n h1 {\n font-weight: 500;\n }\n\n .main_container {\n page: port;\n font-family: sans-serif;\n width: 17.06cm;\n\n padding: 16px;\n margin: 0 auto;\n\n margin-top: 32px;\n }\n\n .content-container {\n margin-top: 32px;\n gap: 10px;\n }\n\n .content {\n margin-top: 5px;\n border: 1px solid #e4e4e4;\n border-radius: 3px;\n }\n\n .content-title {\n width: auto;\n color: whitesmoke;\n font-weight: 200;\n background-color: #3e6667;\n padding: 10px;\n }\n\n .form-group {\n padding: 5px;\n }\n\n td {\n padding: 5px;\n }\n\n input[type=\"text\"],\n input[type=\"number\"] {\n width: 200px;\n padding: 3.5px;\n border: 1px solid green;\n border-radius: 5px;\n }\n\n .signature_line {\n height: 60px;\n border: 1px solid black;\n border-radius: 3px;\n }\n\n .signature_line,\n #signature_label {\n width: 360px;\n margin-top: 15px;\n margin-left: auto;\n /* justify-self: right; */\n }\n\n #signature_label {\n color: #5d5d5d;\n font-style: italic;\n text-align: center;\n font-size: 14px;\n padding: 5px;\n width: calc(360px - 5px);\n }\n </style>\n</head>\n\n<body>\n <div class=\"main_container\">\n <div class=\"header\">\n <div>\n <div class=\"brand\" style=\"align-content: center\">\n <a href=\"https://boltonsea.com\">\n <img src=\"https://s3.us-east-1.amazonaws.com/io.boltonsea.com/dev/logo/2025/boltonsea_logo2.png\" style=\"width: 250px; margin: 0 auto\" />\n </a>\n </div>\n\n <div>\n <h1>Renewal Service Agreement</h1>\n </div>\n </div>\n\n <div style=\"text-align: left\">\n <span>Agreement Date: January 6, 2025</span>\n </div>\n </div>\n\n <div class=\"content-container\">\n <div class=\"content\">\n <div class=\"content-title\">\n <strong>Business Center Address:</strong>\n </div>\n\n <table>\n <tr>\n <td>180 Northfield Drive West</td>\n </tr>\n <tr>\n <td>(Unit 4)</td>\n </tr>\n <tr>\n <td>Waterloo, Ontario</td>\n </tr>\n <tr>\n <td>Canada</td>\n </tr>\n </table>\n </div>\n\n <div class=\"content\">\n <div class=\"content-title\">\n <strong>Client Address </strong>\n </div>\n\n <form>\n <table>\n <tr>\n <td>Company Name</td>\n <td>\n <input type=\"text\" class=\"form-control\" id=\"company_name\" />\n </td>\n </tr>\n <tr>\n <td>Contact Name</td>\n <td>\n <input type=\"text\" class=\"form-control\" id=\"contact_name\" />\n </td>\n </tr>\n <tr>\n <td>Address</td>\n <td>\n <input type=\"text\" class=\"form-control\" id=\"address\" />\n </td>\n </tr>\n <tr>\n <td>Phone Number</td>\n <td>\n <input type=\"number\" class=\"form-control\" id=\"phone\" />\n </td>\n </tr>\n <tr>\n <td>Email</td>\n <td>\n <input type=\"text\" class=\"form-control\" id=\"email\" />\n </td>\n </tr>\n </table>\n </form>\n </div>\n </div>\n\n <div>\n <div class=\"content-title\">\n <strong>Renewal Payment Details</strong>\n </div>\n\n <div class=\"content-container\">\n <div>\n <table>\n <tr>\n <td>Type of Service:</td>\n <td>Rent</td>\n </tr>\n <tr>\n <td>Service Discount:</td>\n <td>50%</td>\n </tr>\n <tr>\n <td>Monthly Price:</td>\n <td>$0.5</td>\n </tr>\n </table>\n </div>\n\n <div class=\"signature_line\"></div>\n <div id=\"signature_label\">Client Signature and Date (dd/mm/yyyy)</div>\n </div>\n </div>\n </div>\n</body>\n\n</html>
Tools
- Docker File Server (BoltonSea - Community Plan)
Top comments (0)