Form to PDF
Fill a simple form, preview the result, then export it as a PDF.
Back to all tools on ToolForge
Name:
Email:
Subject:
Preview
About Form to PDF
This Form to PDF tool turns a simple filled form into a printable PDF. It is useful for lightweight request forms, contact-style documents and small internal workflows.
The rendered form is generated entirely in your browser and can be exported without sending data to a server.
Form to PDF Generation Process
- Form Input: User fills in form fields (name, email, subject, message)
- HTML Rendering: Form data rendered as styled HTML preview with labels and values
- Capture: html2canvas captures the preview div as PNG image at 2x scale
- PDF Creation: jsPDF creates A4 document and embeds the PNG image
- Multi-page Handling: If content exceeds page height, additional pages are added automatically
- Download: PDF saved as "form-to-pdf.pdf" to user's downloads folder
html2canvas Implementation
// Capture form preview as PNG
async function downloadPdf() {
const element = document.getElementById("preview");
const canvas = await html2canvas(element, {
scale: 2, // 2x for sharper output
backgroundColor: "#ffffff", // White background
useCORS: true // Allow cross-origin images
});
const imageData = canvas.toDataURL("image/png");
// Create PDF (A4, portrait, points)
const pdf = new jsPDF("p", "pt", "a4");
const pageWidth = pdf.internal.pageSize.getWidth();
const imgWidth = pageWidth - 40; // 20pt margins each side
const imgHeight = canvas.height * imgWidth / canvas.width;
pdf.addImage(imageData, "PNG", 20, 20, imgWidth, imgHeight);
pdf.save("form-to-pdf.pdf");
}
PDF Page Size Reference
| Size | Dimensions (points) | Dimensions (mm) | Use Case |
|---|---|---|---|
| A4 | 595 × 842 | 210 × 297 | Standard documents (default) |
| Letter | 612 × 792 | 216 × 279 | North American standard |
| A5 | 420 × 595 | 148 × 210 | Compact forms, booklets |
| Legal | 612 × 1008 | 216 × 356 | Legal documents |
Form Field Types Supported
| Field Type | HTML Element | PDF Output |
|---|---|---|
| Text Input | <input type="text"> | Rendered as displayed |
| <input type="email"> | Rendered as displayed | |
| Textarea | <textarea> | Multi-line with whitespace preserved |
| Select | <select> | Selected option shown |
| Checkbox | <input type="checkbox"> | Checked/unchecked state |
| Radio | <input type="radio"> | Selected state |
Frequently Asked Questions
- How does html2canvas capture form data for PDF?
- html2canvas reads the rendered DOM state, including user-entered form values displayed in input fields. It captures the visual representation pixel-by-pixel onto a canvas element, then exports as PNG. The PNG is embedded into jsPDF. This preserves exact visual layout but creates image-based (non-searchable) PDFs.
- What is the difference between image-based and text-based PDFs?
- Image-based PDFs (from html2canvas) contain raster images where text cannot be selected, searched, or copied. Text-based PDFs (from direct jsPDF text calls) have proper text layers that are searchable and accessible. Image-based approach preserves complex layouts; text-based offers better quality and smaller file sizes.
- What are common use cases for form-to-PDF conversion?
- Common uses include: contact form submissions, support ticket documentation, order confirmations, registration records, survey responses, application forms, feedback collection, internal request workflows, and client intake forms. PDFs provide immutable records suitable for archiving and sharing.
- How do you ensure form data privacy during PDF generation?
- Client-side PDF generation (no server upload) ensures data never leaves the user's browser. The PDF is generated locally using JavaScript libraries and downloaded directly. No form data is transmitted to external servers, logged, or stored. This approach is suitable for sensitive information when server-side processing is not required.
- What HTML elements are supported by html2canvas?
- html2canvas supports most standard HTML elements: div, span, p, h1-h6, tables, forms, inputs, textareas, selects, images (with CORS), canvas, SVG (partial). Limitations include: some CSS properties (grid, complex gradients), web fonts (must be loaded), box-shadow rendering variations, and pseudo-elements (::before, ::after) may not render correctly.
- What PDF page size is used for form exports?
- Standard A4 size (595×842 points at 72 DPI) is used with portrait orientation. Margins are typically 36-40 points. The captured form image is scaled to fit the page width (approximately 520 points usable width). Multi-page forms automatically generate additional pages as needed.