This page is a developer reference for the Document Template Creator form. It shows the live form, documents every configurable option, and provides the complete embeddable HTML. Copy the source, drop it into any webpage, and update the settings described below.
What the form does
Accepts a PDF or DOCX upload and an optional context note, then POSTs both to an n8n webhook as multipart/form-data. The workflow classifies the document type, identifies all variable fields, generates a fill-in-the-blank template, and returns links to the finished PDF in Google Drive.
What you need
No external libraries. Pure HTML, CSS, and vanilla JavaScript — no frameworks, no CDN links. Works in all modern browsers. Requires the n8n workflow to be active and reachable from the user's browser.
Where to put it
Drop the HTML source into any page. Works standalone, inside a WordPress page (paste into the HTML block), inside an <iframe>, or embedded in a Webflow / Elementor page using a custom HTML component.
This is the actual form — fully interactive. File upload, drag-and-drop, and form submission all work. Submitting will call the configured webhook URL.
Document template creator
Upload any PDF or Word document — AI identifies the document type and generates a reusable fill-in-the-blank template.
All configurable values are declared as constants or CSS properties near the top of the source. The table below documents each one.
| Setting | Where to find it | Required | Description |
|---|---|---|---|
WEBHOOK_URL |
Top of <script> |
Required | The full n8n webhook URL. Replace with your production endpoint when going live. |
| Header background | .form-header → background |
Optional | Default is #002657 (navy). Change to any hex value to match your brand. |
| Button color | .submit-btn → background |
Optional | Default is #FA4616 (orange). Change to your primary CTA color. |
| Drop zone color | .drop-zone → background and border-color |
Optional | Default uses blue ramp (#E6F1FB fill / #378ADD border). Change both for a different accent. |
| Subtitle text color | .form-header p → color |
Optional | Default is #85B7EB. Adjust if using a lighter header background. |
| Page background | body → background |
Optional | Default is #f4f5f7. Remove or change if embedding inside a colored container. |
| Max file size label | .drop-hint inner text |
Optional | Display-only label. To enforce a size limit, add a check in fOnFileChange() comparing file.size to your limit in bytes. |
| Accepted file types | input[type="file"] → accept |
Optional | Default is .pdf,.docx. Extend if the workflow supports additional formats. |
The webhook URL is the only value you must change before deploying the form to production.
Find your webhook URL
Open your n8n workflow. Click the Webhook trigger node. Copy the Production URL shown in the node panel. It will look like:
https://your-n8n.com/webhook/general-template-creator
Update the constant
In the HTML source, find this line near the top of the <script> block and replace the URL:
const WEBHOOK_URL = 'https://...';
If you see CORS errors
The form submits from a browser, so the n8n instance must allow cross-origin requests from your domain. In n8n, open the Respond to Webhook node and confirm the Access-Control-Allow-Origin header is set to * or your specific domain.
The form uses a small set of named colors. All are hardcoded hex values in the CSS — search and replace any of them to retheme the form.
The form sends a multipart/form-data POST. The workflow returns JSON. Both are documented below.
Request fields
Response (success)
Response (error)
Complete standalone HTML file. Copy and paste into any webpage, HTML block, or custom code component. Update WEBHOOK_URL before deploying.