| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
| |
| <title>Form Creator Online Free - Form Creator Tool | BentoPDF</title> |
| <meta |
| name="title" |
| content="Form Creator Online Free - Form Creator Tool | BentoPDF" |
| /> |
| <meta |
| name="description" |
| content="β
Form Creator online free - Form creator PDFs easily β
No signup β
Unlimited files β
Privacy-first β
Works in browser β
Fast & secure" |
| /> |
| <meta name="keywords" content="form creator, form creator, online pdf" /> |
| <meta name="author" content="BentoPDF" /> |
| <meta |
| name="robots" |
| content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" |
| /> |
|
|
| |
| <link rel="canonical" href="https://www.bentopdf.com/form-creator.html" /> |
|
|
| |
| <meta property="og:type" content="website" /> |
| <meta property="og:url" content="https://www.bentopdf.com/form-creator" /> |
| <meta |
| property="og:title" |
| content="Form Creator Online Free - Form Creator Tool | BentoPDF" |
| /> |
| <meta |
| property="og:description" |
| content="β
Form Creator online free - Form creator PDFs easily β
No signup β
Unlimited files β
Privacy-first β
Works in browser β
Fast & secure" |
| /> |
| <meta |
| property="og:image" |
| content="https://www.bentopdf.com/images/og-form-creator.png" |
| /> |
| <meta property="og:image:width" content="1200" /> |
| <meta property="og:image:height" content="630" /> |
| <meta property="og:site_name" content="BentoPDF" /> |
|
|
| |
| <meta name="twitter:card" content="summary_large_image" /> |
| <meta name="twitter:url" content="https://www.bentopdf.com/form-creator" /> |
| <meta name="twitter:title" content="Form Creator Free" /> |
| <meta |
| name="twitter:description" |
| content="β
Form Creator online free - Form creator PDFs easily β
No signup β
Unlimited files β
Privacy-first β
Works in browser β
" |
| /> |
| <meta |
| name="twitter:image" |
| content="https://www.bentopdf.com/images/twitter-form-creator.png" |
| /> |
| <meta name="twitter:site" content="@BentoPDF" /> |
|
|
| |
| <meta name="mobile-web-app-capable" content="yes" /> |
| <meta name="apple-mobile-web-app-capable" content="yes" /> |
| <meta name="apple-mobile-web-app-title" content="Form Creator" /> |
|
|
| <title>Create PDF Form - BentoPDF</title> |
| <link href="/src/css/styles.css" rel="stylesheet" /> |
|
|
| |
| <link rel="manifest" href="/site.webmanifest" /> |
|
|
| |
| <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" /> |
| <link |
| rel="icon" |
| type="image/png" |
| sizes="192x192" |
| href="/images/favicon-192x192.png" |
| /> |
| <link |
| rel="icon" |
| type="image/png" |
| sizes="512x512" |
| href="/images/favicon-512x512.png" |
| /> |
| <link |
| rel="apple-touch-icon" |
| sizes="180x180" |
| href="/images/apple-touch-icon.png" |
| /> |
| <link rel="icon" href="/favicon.ico" sizes="32x32" /> |
| </head> |
|
|
| <body class="antialiased bg-gray-900"> |
| {{> navbar }} |
|
|
| <input |
| type="file" |
| id="pdfUploadInput" |
| accept="application/pdf" |
| class="hidden" |
| /> |
|
|
| <div class="min-h-screen flex items-center justify-center p-4 bg-gray-900"> |
| |
| <div |
| id="upload-area" |
| class="bg-gray-800 rounded-xl shadow-xl p-6 max-w-5xl w-full text-gray-200 border border-gray-700" |
| > |
| <button |
| id="back-to-tools-upload" |
| class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold" |
| > |
| <i data-lucide="arrow-left" class="cursor-pointer"></i> |
| <span class="cursor-pointer" data-i18n="tools.backToTools" |
| >Back to Tools</span |
| > |
| </button> |
|
|
| <h1 |
| class="text-2xl font-bold text-white mb-2" |
| data-i18n="tools:createPdfForm.name" |
| > |
| Form Creator Free Online - Fast & Secure |
| </h1> |
| <p class="text-gray-400 mb-6" data-i18n="tools:createPdfForm.subtitle"> |
| Upload an existing PDF or create a blank PDF to start adding form |
| fields. |
| </p> |
|
|
| <div |
| class="relative flex flex-col items-center justify-center w-full h-44 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-700 hover:bg-gray-600 transition-colors duration-300" |
| id="dropZone" |
| > |
| <div class="flex flex-col items-center justify-center pt-5 pb-6"> |
| <i |
| data-lucide="upload-cloud" |
| class="w-10 h-10 mb-3 text-gray-400" |
| ></i> |
| <p class="mb-2 text-sm text-gray-300"> |
| <span class="font-semibold" data-i18n="upload.clickToSelect" |
| >Click to select a PDF</span |
| > |
| <span data-i18n="upload.orDragAndDrop">or drag and drop</span> |
| </p> |
| <p |
| class="text-xs text-gray-500" |
| data-i18n="upload.hints.singlePdfFile" |
| > |
| Single PDF file |
| </p> |
| <p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave"> |
| Your files never leave your device. |
| </p> |
| </div> |
| <input |
| type="file" |
| id="pdfFileInput" |
| accept="application/pdf" |
| class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" |
| /> |
| </div> |
|
|
| <div id="fileList" class="mt-4 hidden text-sm text-gray-200"></div> |
|
|
| |
| <div class="relative my-6"> |
| <div class="absolute inset-0 flex items-center"> |
| <div class="w-full border-t border-gray-600"></div> |
| </div> |
| <div class="relative flex justify-center text-sm"> |
| <span class="px-4 bg-gray-800 text-gray-400 font-medium">OR</span> |
| </div> |
| </div> |
|
|
| <div> |
| <button |
| id="blankPdfBtn" |
| class="w-full bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-lg flex items-center justify-center gap-3 transition-colors" |
| > |
| <i data-lucide="file-plus" class="w-5 h-5"></i> |
| <span class="font-semibold">Create Blank PDF</span> |
| </button> |
|
|
| <div id="pageSizeSelector" class="mt-4 hidden"> |
| <label class="block text-sm font-semibold text-gray-300 mb-2" |
| >Page Size:</label |
| > |
| <select |
| id="pageSizeSelect" |
| class="w-full bg-gray-600 border border-gray-500 text-white rounded px-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500" |
| > |
| <option value="letter">Letter (8.5" Γ 11")</option> |
| <option value="a4">A4 (210mm Γ 297mm)</option> |
| <option value="a5">A5 (148mm Γ 210mm)</option> |
| <option value="legal">Legal (8.5" Γ 14")</option> |
| <option value="tabloid">Tabloid (11" Γ 17")</option> |
| <option value="a3">A3 (297mm Γ 420mm)</option> |
| <option value="custom">Custom</option> |
| </select> |
|
|
| <div id="customDimensionsInput" class="mt-3 hidden space-y-2"> |
| <div class="flex gap-2"> |
| <div class="flex-1"> |
| <label class="block text-xs text-gray-400 mb-1" |
| >Width (pts)</label |
| > |
| <input |
| type="number" |
| id="customWidth" |
| placeholder="612" |
| min="72" |
| max="14400" |
| class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500" |
| /> |
| </div> |
| <div class="flex-1"> |
| <label class="block text-xs text-gray-400 mb-1" |
| >Height (pts)</label |
| > |
| <input |
| type="number" |
| id="customHeight" |
| placeholder="792" |
| min="72" |
| max="14400" |
| class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500" |
| /> |
| </div> |
| </div> |
| <p class="text-xs text-gray-500 italic">1 inch = 72 points</p> |
| </div> |
|
|
| <button |
| id="confirmBlankBtn" |
| class="w-full mt-3 bg-indigo-600 hover:bg-indigo-500 text-white p-2 rounded transition-colors" |
| > |
| Start Creating |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div |
| id="tool-container" |
| class="bg-gray-800 rounded-xl shadow-xl p-6 w-full text-gray-200 border border-gray-700 hidden" |
| > |
| <button |
| id="back-to-tools-creator" |
| class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold" |
| > |
| <i data-lucide="arrow-left" class="cursor-pointer"></i> |
| <span class="cursor-pointer" data-i18n="tools.backToTools" |
| >Back to Tools</span |
| > |
| </button> |
|
|
| <h1 |
| class="text-2xl font-bold text-white mb-2" |
| data-i18n="tools:createPdfForm.name" |
| > |
| Create PDF Form |
| </h1> |
| <p class="text-gray-400 mb-6" data-i18n="tools:createPdfForm.subtitle"> |
| Drag and drop fields onto the canvas to create a fillable PDF form. |
| Customize field properties and download your form. |
| </p> |
|
|
| |
| <div class="flex flex-col lg:flex-row gap-6"> |
| |
| <aside |
| class="lg:w-64 flex-shrink-0 order-2 lg:order-1 lg:sticky lg:top-4 lg:self-start" |
| > |
| |
| <div class="bg-gray-700 rounded-lg p-4"> |
| <h2 |
| class="font-semibold text-gray-200 mb-3 flex items-center gap-2" |
| > |
| <i data-lucide="settings" class="w-4 h-4"></i> |
| Properties |
| </h2> |
| <div id="propertiesPanel" class="space-y-3"> |
| <p class="text-gray-500 text-sm"> |
| Select a field to edit properties |
| </p> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-4 bg-gray-700 rounded-lg p-3 text-center"> |
| <p class="text-sm text-gray-400"> |
| <span id="fieldCount" class="text-indigo-400 font-bold text-lg" |
| >0</span |
| > |
| field(s) |
| </p> |
| <p class="text-xs text-gray-500 mt-1"> |
| Press Delete to remove selected field |
| </p> |
| </div> |
| </aside> |
|
|
| |
| <main class="flex-1 order-1 lg:order-2 min-w-0"> |
| |
| <div |
| class="bg-gray-700 rounded-lg p-3 mb-4 flex flex-wrap gap-2 justify-center md:justify-between items-center overflow-hidden sticky top-16 z-20" |
| > |
| <div |
| class="flex flex-wrap items-center justify-center gap-2 min-w-0" |
| > |
| <button |
| id="prevPageBtn" |
| class="bg-gray-600 hover:bg-gray-500 text-white p-2 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed" |
| disabled |
| > |
| <i data-lucide="chevron-left" class="w-4 h-4"></i> |
| </button> |
| <span id="pageIndicator" class="text-sm text-gray-300 px-2" |
| >Page 1 of 1</span |
| > |
| <button |
| id="nextPageBtn" |
| class="bg-gray-600 hover:bg-gray-500 text-white p-2 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed" |
| disabled |
| > |
| <i data-lucide="chevron-right" class="w-4 h-4"></i> |
| </button> |
| <div |
| class="flex items-center gap-2 md:ml-2 md:border-l border-gray-600 md:pl-2" |
| > |
| <span class="text-sm text-gray-400">Go to:</span> |
| <input |
| type="number" |
| id="gotoPageInput" |
| min="1" |
| class="w-16 bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500" |
| /> |
| <button |
| id="gotoPageBtn" |
| class="bg-indigo-600 hover:bg-indigo-500 text-white px-2 py-1 rounded text-sm transition-colors" |
| > |
| Go |
| </button> |
| </div> |
| <div |
| class="hidden md:flex items-center gap-2 md:ml-2 md:border-l border-gray-600 md:pl-2" |
| > |
| <input |
| type="checkbox" |
| id="enableGridCheckbox" |
| checked |
| class="mr-1" |
| /> |
| <label for="enableGridCheckbox" class="text-sm text-gray-400" |
| >Grid:</label |
| > |
| <input |
| type="number" |
| id="gridVInput" |
| min="2" |
| max="14" |
| value="2" |
| placeholder="V" |
| class="w-12 bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500" |
| /> |
| <span class="text-gray-400">x</span> |
| <input |
| type="number" |
| id="gridHInput" |
| min="2" |
| max="14" |
| value="2" |
| placeholder="H" |
| class="w-12 bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500" |
| /> |
| <button |
| id="toggleGridBtn" |
| class="bg-gray-600 hover:bg-gray-500 text-white p-1 rounded transition-colors" |
| title="Toggle Grid" |
| > |
| <i data-lucide="grid-3x3" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
| <div class="flex items-center justify-center gap-2"> |
| <button |
| id="resetBtn" |
| class="bg-gray-600 hover:bg-gray-500 text-white p-2 px-3 rounded flex items-center gap-2 transition-colors" |
| > |
| <i data-lucide="rotate-ccw" class="w-4 h-4"></i> |
| <span class="text-sm">Reset</span> |
| </button> |
| <button |
| id="addPageBtn" |
| class="bg-indigo-600 hover:bg-indigo-500 text-white p-2 px-3 rounded flex items-center gap-2 transition-colors" |
| > |
| <i data-lucide="file-plus" class="w-4 h-4"></i> |
| <span class="text-sm">Add Page</span> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div |
| class="bg-gray-700 rounded-lg p-3 mb-4 sticky top-[120px] z-20" |
| > |
| <div |
| class="flex flex-wrap gap-2 justify-center items-center max-w-full py-1" |
| > |
| <div |
| class="text-gray-400 text-sm font-semibold mr-2 flex items-center gap-1" |
| > |
| <i data-lucide="wrench" class="w-4 h-4"></i> Fields: |
| </div> |
|
|
| <div |
| class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2" |
| draggable="true" |
| data-type="text" |
| title="Text Field" |
| > |
| <i data-lucide="type" class="w-4 h-4"></i> |
| <span class="text-xs">Text</span> |
| </div> |
|
|
| <div |
| class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2" |
| draggable="true" |
| data-type="checkbox" |
| title="Checkbox" |
| > |
| <i data-lucide="check-square" class="w-4 h-4"></i> |
| <span class="text-xs">Checkbox</span> |
| </div> |
|
|
| <div |
| class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2" |
| draggable="true" |
| data-type="radio" |
| title="Radio Button" |
| > |
| <i data-lucide="circle-dot" class="w-4 h-4"></i> |
| <span class="text-xs">Radio</span> |
| </div> |
|
|
| <div |
| class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2" |
| draggable="true" |
| data-type="dropdown" |
| title="Dropdown" |
| > |
| <i data-lucide="chevron-down-square" class="w-4 h-4"></i> |
| <span class="text-xs">Dropdown</span> |
| </div> |
|
|
| <div |
| class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2" |
| draggable="true" |
| data-type="optionlist" |
| title="Option List" |
| > |
| <i data-lucide="list" class="w-4 h-4"></i> |
| <span class="text-xs">List</span> |
| </div> |
|
|
| <div |
| class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2" |
| draggable="true" |
| data-type="button" |
| title="Button" |
| > |
| <i data-lucide="square-mouse-pointer" class="w-4 h-4"></i> |
| <span class="text-xs">Button</span> |
| </div> |
|
|
| <div |
| class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2" |
| draggable="true" |
| data-type="signature" |
| title="Signature" |
| > |
| <i data-lucide="pen-tool" class="w-4 h-4"></i> |
| <span class="text-xs">Signature</span> |
| </div> |
|
|
| <div |
| class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2" |
| draggable="true" |
| data-type="date" |
| title="Date Field" |
| > |
| <i data-lucide="calendar" class="w-4 h-4"></i> |
| <span class="text-xs">Date</span> |
| </div> |
|
|
| <div |
| class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2" |
| draggable="true" |
| data-type="image" |
| title="Image Field" |
| > |
| <i data-lucide="image" class="w-4 h-4"></i> |
| <span class="text-xs">Image</span> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-700 rounded-lg p-4 mb-4 overflow-auto w-full"> |
| <div class="flex justify-center"> |
| <div |
| id="pdfCanvasWrapper" |
| class="shadow-2xl relative" |
| style="border: 1px solid #374151" |
| > |
| <div id="pdfCanvas" class="bg-white relative"> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <button |
| id="downloadBtn" |
| class="btn-gradient w-full flex items-center justify-center gap-2 py-3" |
| > |
| <span>Download PDF Form</span> |
| </button> |
| </main> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <section class="max-w-4xl mx-auto px-4 py-12"> |
| <h2 |
| class="text-2xl md:text-3xl font-bold text-white mb-8 text-center" |
| data-i18n="howItWorks.title" |
| > |
| How It Works |
| </h2> |
| <div class="space-y-6"> |
| <div class="flex items-start gap-4"> |
| <div |
| class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold" |
| > |
| 1 |
| </div> |
| <div class="flex-1"> |
| <h3 class="text-lg font-semibold text-white mb-1">Upload File</h3> |
| <p class="text-gray-400" data-i18n="howItWorks.step1"> |
| Click or drag and drop your file to begin |
| </p> |
| </div> |
| </div> |
| <div class="flex items-start gap-4"> |
| <div |
| class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold" |
| > |
| 2 |
| </div> |
| <div class="flex-1"> |
| <h3 class="text-lg font-semibold text-white mb-1">Process</h3> |
| <p class="text-gray-400" data-i18n="howItWorks.step2"> |
| Click the process button to start |
| </p> |
| </div> |
| </div> |
| <div class="flex items-start gap-4"> |
| <div |
| class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold" |
| > |
| 3 |
| </div> |
| <div class="flex-1"> |
| <h3 class="text-lg font-semibold text-white mb-1">Download</h3> |
| <p class="text-gray-400" data-i18n="howItWorks.step3"> |
| Save your processed file instantly |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="max-w-6xl mx-auto px-4 py-12"> |
| <h2 |
| class="text-2xl md:text-3xl font-bold text-white mb-6 text-center" |
| data-i18n="relatedTools.title" |
| > |
| Related PDF Tools |
| </h2> |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4"> |
| <a |
| href="merge-pdf.html" |
| class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700" |
| > |
| <h3 class="text-white font-semibold mb-1">Merge Pdf</h3> |
| <p class="text-gray-400 text-sm">Free online merge pdf tool</p> |
| </a> |
| <a |
| href="compress-pdf.html" |
| class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700" |
| > |
| <h3 class="text-white font-semibold mb-1">Compress Pdf</h3> |
| <p class="text-gray-400 text-sm">Free online compress pdf tool</p> |
| </a> |
| <a |
| href="split-pdf.html" |
| class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700" |
| > |
| <h3 class="text-white font-semibold mb-1">Split Pdf</h3> |
| <p class="text-gray-400 text-sm">Free online split pdf tool</p> |
| </a> |
| <a |
| href="edit-pdf.html" |
| class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700" |
| > |
| <h3 class="text-white font-semibold mb-1">Edit Pdf</h3> |
| <p class="text-gray-400 text-sm">Free online edit pdf tool</p> |
| </a> |
| <a |
| href="rotate-pdf.html" |
| class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700" |
| > |
| <h3 class="text-white font-semibold mb-1">Rotate Pdf</h3> |
| <p class="text-gray-400 text-sm">Free online rotate pdf tool</p> |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section class="max-w-4xl mx-auto px-4 py-12"> |
| <h2 |
| class="text-2xl md:text-3xl font-bold text-white mb-6 text-center" |
| data-i18n="faq.sectionTitle" |
| > |
| Frequently Asked Questions |
| </h2> |
| <div class="space-y-4"> |
| <details class="bg-gray-800 p-5 rounded-lg border border-gray-700"> |
| <summary |
| class="cursor-pointer font-semibold text-white flex items-center justify-between" |
| > |
| Is form creator really free? |
| <i data-lucide="chevron-down" class="w-5 h-5"></i> |
| </summary> |
| <p class="mt-3 text-gray-400"> |
| Yes! BentoPDF is 100% free with no hidden fees, no signup required, |
| and unlimited file processing. |
| </p> |
| </details> |
| <details class="bg-gray-800 p-5 rounded-lg border border-gray-700"> |
| <summary |
| class="cursor-pointer font-semibold text-white flex items-center justify-between" |
| > |
| Are my files private and secure? |
| <i data-lucide="chevron-down" class="w-5 h-5"></i> |
| </summary> |
| <p class="mt-3 text-gray-400"> |
| Absolutely! All processing happens in your browser. Your files never |
| leave your device, ensuring complete privacy. |
| </p> |
| </details> |
| <details class="bg-gray-800 p-5 rounded-lg border border-gray-700"> |
| <summary |
| class="cursor-pointer font-semibold text-white flex items-center justify-between" |
| > |
| Is there a file size limit? |
| <i data-lucide="chevron-down" class="w-5 h-5"></i> |
| </summary> |
| <p class="mt-3 text-gray-400"> |
| No! Process files of any size, as many times as you want, completely |
| free. |
| </p> |
| </details> |
| </div> |
| </section> |
| {{> footer }} |
| |
| <div |
| id="errorModal" |
| class="hidden fixed inset-0 z-[9999] flex items-center justify-center bg-black bg-opacity-75" |
| > |
| <div |
| class="bg-gray-800 rounded-lg shadow-2xl max-w-md w-full mx-4 border border-gray-700" |
| > |
| <div class="p-6"> |
| <h3 id="errorModalTitle" class="text-xl font-bold text-white mb-3"> |
| Error |
| </h3> |
| <p id="errorModalMessage" class="text-gray-300 mb-6"> |
| An error occurred. |
| </p> |
| <button |
| id="errorModalClose" |
| class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded transition-colors" |
| > |
| Close |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <script type="module" src="/src/js/utils/lucide-init.ts"></script> |
| <script type="module" src="/src/js/utils/full-width.ts"></script> |
| <script type="module" src="/src/js/utils/simple-mode-footer.ts"></script> |
| <script type="module" src="/src/version.ts"></script> |
| <script type="module" src="/src/js/logic/form-creator.ts"></script> |
| <script type="module" src="/src/js/mobileMenu.ts"></script> |
| <script type="module" src="/src/js/main.ts"></script> |
|
|
| |
| <script type="application/ld+json"> |
| { |
| "@context": "https://schema.org", |
| "@type": "SoftwareApplication", |
| "name": "Form Creator - BentoPDF", |
| "applicationCategory": "PDF Tool", |
| "operatingSystem": "Any - Web Browser", |
| "offers": { |
| "@type": "Offer", |
| "price": "0", |
| "priceCurrency": "USD" |
| }, |
| "aggregateRating": { |
| "@type": "AggregateRating", |
| "ratingValue": "4.9", |
| "ratingCount": "1752" |
| } |
| } |
| </script> |
|
|
| <script type="application/ld+json"> |
| { |
| "@context": "https://schema.org", |
| "@type": "HowTo", |
| "name": "How to form creator online", |
| "description": "Learn how to form creator using BentoPDF", |
| "step": [ |
| { |
| "@type": "HowToStep", |
| "position": 1, |
| "name": "Upload File", |
| "text": "Click or drag and drop your file" |
| }, |
| { |
| "@type": "HowToStep", |
| "position": 2, |
| "name": "Process", |
| "text": "Click the process button" |
| }, |
| { |
| "@type": "HowToStep", |
| "position": 3, |
| "name": "Download", |
| "text": "Download your processed file" |
| } |
| ] |
| } |
| </script> |
|
|
| <script type="application/ld+json"> |
| { |
| "@context": "https://schema.org", |
| "@type": "BreadcrumbList", |
| "itemListElement": [ |
| { |
| "@type": "ListItem", |
| "position": 1, |
| "name": "Home", |
| "item": "https://www.bentopdf.com" |
| }, |
| { |
| "@type": "ListItem", |
| "position": 2, |
| "name": "Form Creator", |
| "item": "https://www.bentopdf.com/form-creator" |
| } |
| ] |
| } |
| </script> |
| </body> |
| </html> |
|
|