Online Smart Office Forms & Template Generator
Form Details
Preview
Your generated document will appear here.
Customize Form Templates
Edit the HTML for each template. Use placeholders like `{{variableName}}`.
{{clientAddress}}
Invoice #: {{invoiceNumber}}
Date: {{invoiceDate}}
| Description | Amount |
|---|---|
| {{itemDescription}} | $ {{itemAmount}} |
| Total: | $ {{itemAmount}} |
MEMORANDUM
TO: {{memoTo}}
FROM: {{memoFrom}}
DATE: {{memoDate}}
SUBJECT: {{memoSubject}}
{{memoBody}}
{{meetingTitle}}
Date: {{meetingDate}} | Time: {{meetingTime}}
Agenda Items
{{agendaItems}}
${inputHtml}
`;
});
// Set date fields to today
formInputs[type].filter(i => i.type === 'date').forEach(i => {
if(document.getElementById(i.id)) document.getElementById(i.id).valueAsDate = new Date();
});
}
generateBtn.addEventListener('click', () => {
const type = formTypeSelect.value;
let generatedHtml = templates[type];
formInputs[type].forEach(input => {
const value = document.getElementById(input.id).value;
generatedHtml = generatedHtml.replace(new RegExp(`{{${input.id}}}`, 'g'), value);
});
formPreview.innerHTML = generatedHtml;
lastGeneratedHTML = generatedHtml;
pdfDownloadContainer.style.display = 'flex';
});
formTypeSelect.addEventListener('change', updateDynamicInputs);
// Template Library Logic
function loadTemplates() {
document.getElementById('invoiceTemplate').value = templates.invoice.trim();
document.getElementById('memoTemplate').value = templates.memo.trim();
document.getElementById('agendaTemplate').value = templates.agenda.trim();
}
saveTemplatesBtn.addEventListener('click', () => {
templates.invoice = document.getElementById('invoiceTemplate').value;
templates.memo = document.getElementById('memoTemplate').value;
templates.agenda = document.getElementById('agendaTemplate').value;
alert('Templates saved successfully!');
});
// PDF Generation
document.getElementById('pdf-download-button').addEventListener('click', () => {
if (!lastGeneratedHTML) {
alert("Please generate a document first.");
return;
}
const reportContainer = document.createElement('div');
reportContainer.innerHTML = `${lastGeneratedHTML}
`;
document.body.appendChild(reportContainer);
const reportElement = document.getElementById('pdf-report-template');
const { jsPDF } = window.jspdf;
html2canvas(reportElement, { scale: 2 }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'portrait', unit: 'px', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
const ratio = canvas.width / canvas.height;
let finalImgWidth = pdfWidth - 40;
let finalImgHeight = finalImgWidth / ratio;
if (finalImgHeight > pdfHeight - 40) {
finalImgHeight = pdfHeight - 40;
finalImgWidth = finalImgHeight * ratio;
}
const x = (pdfWidth - finalImgWidth) / 2;
const y = 20;
pdf.addImage(imgData, 'PNG', x, y, finalImgWidth, finalImgHeight);
pdf.save('generated-document.pdf');
document.body.removeChild(reportContainer);
});
});
// Tab functionality
window.changeTab = function(event, tabName) {
document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
event.currentTarget.classList.add('active');
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
document.getElementById(tabName).classList.add('active');
}
// Initial Load
updateDynamicInputs();
loadTemplates();
});