Files
bentopdf/src/pages/form-creator.html
T
2026-09-05 12:55:31 +05:30

860 lines
32 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<meta
name="title"
content="Form Creator Online Free - Form Creator Tool | BentoPDF"
/>
<meta
name="description"
content="Form Creator online. Free, no uploads, no signup. Runs entirely in your browser."
/>
<meta name="keywords" content="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"
/>
<!-- Canonical URL -->
<link rel="canonical" href="https://www.bentopdf.com/form-creator" />
<!-- Open Graph / Facebook / LinkedIn -->
<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, no uploads, no signup. Runs entirely in your browser."
/>
<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" />
<!-- Twitter Card -->
<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, no uploads, no signup. Runs entirely in your browser."
/>
<meta
name="twitter:image"
content="https://www.bentopdf.com/images/twitter-form-creator.png"
/>
<meta name="twitter:site" content="@BentoPDF" />
<!-- Mobile Web App -->
<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" />
<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest" />
<!-- Favicons -->
<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">
<!-- Upload Area (shown initially) -->
<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-300 hover:text-indigo-400 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">
Create fillable PDF forms with drag-and-drop text 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 class="ph ph-upload-simple text-4xl 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>
<!-- OR Separator -->
<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"
data-i18n="tools:createPdfForm.orSeparator"
>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"
data-i18n="tools:createPdfForm.createBlankPdf"
>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>
<!-- Tool Container (hidden initially) -->
<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-300 hover:text-indigo-400 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>
<h2
class="text-2xl font-bold text-white mb-2"
data-i18n="tools:createPdfForm.name"
>
Create PDF Form
</h2>
<p class="text-gray-400 mb-6" data-i18n="tools:createPdfForm.subtitle">
Create fillable PDF forms with drag-and-drop text fields.
</p>
<!-- Main Form Creator Area -->
<div class="flex flex-col lg:flex-row gap-6">
<!-- Sidebar with Properties -->
<aside
class="lg:w-64 flex-shrink-0 order-2 lg:order-1 lg:sticky lg:top-4 lg:self-start"
>
<!-- Properties Section -->
<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>
<!-- Field Count -->
<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>
<!-- Canvas Area -->
<main class="flex-1 order-1 lg:order-2 min-w-0">
<!-- Page Management Toolbar -->
<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>
<!-- Top Toolbar -->
<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
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="barcode"
title="Barcode Field"
>
<i data-lucide="qr-code" class="w-4 h-4"></i>
<span class="text-xs">Barcode</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">
<!-- Fields will be added here dynamically -->
</div>
</div>
</div>
</div>
<!-- Download Button -->
<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>
<!-- How It Works Section -->
<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>
<!-- Related Tools 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>
<!-- FAQ 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="faq-list">
<details class="faq-d">
<summary class="faq-d-q">
Can I add fillable fields to a PDF I already have?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Upload the PDF and its pages appear in the editor; pick a field type
from the toolbar and click on the page to place it, then drag or
resize it as needed. If the PDF already has form fields, they're
detected and loaded so you can move, edit, or delete them alongside
the new ones.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can I make a form from scratch without an existing PDF?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Click Create Blank PDF and choose Letter, A4, A5, Legal, Tabloid,
A3, or custom dimensions in points. Use Add Page for multi-page
forms.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Which field types are available?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Text (single line, multi-line, or divided into comb boxes),
checkbox, radio button groups, dropdown, list box, push button,
signature, date, image, and barcode. Each field has a properties
panel for name, default value, font size, text color, alignment,
tooltip, and required or read-only flags. Signature fields are
standard AcroForm signature fields, which only appear in viewers
that support signing.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
How do radio buttons get grouped so only one can be selected?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Every radio field has a group name, RadioGroup1 by default. Fields
that share the same group name become one mutually exclusive set, so
give each question its own group name and set a distinct export
value on each option.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can a button show or hide another field, or reset the form?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Button actions include Reset Form, Print Form, Open URL, Run
JavaScript, and Show/Hide Field, which targets another field and can
show, hide, or toggle it. They're stored as standard PDF actions, so
they run in Acrobat and other viewers that support form scripting.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
How does the date field work?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
It's a text field with a date format attached, mm/dd/yyyy by default
or a custom pattern such as dd/mm/yyyy. Viewers that support
AcroForm JavaScript validate the typed value and format it; simpler
viewers treat it as ordinary text.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Are barcodes and images real form fields?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
A barcode (QR Code, Code 128, Code 39, EAN-13, UPC-A, DataMatrix, or
PDF417) is generated from the value you enter and drawn onto the
page as a fixed image, so the person filling the form can't change
it. The image field is a button that lets the user pick a picture
from their computer, which works in Acrobat and other viewers that
support image import.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Is the form or the uploaded PDF stored on a server?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. The editor runs in your browser, the fields are written into the
PDF with pdf-lib on your device, and Download PDF Form saves the
result locally under the original filename. You can test the result
in
<a href="/form-filler" class="text-indigo-300 hover:text-indigo-400"
>PDF Form Filler</a
>.
</p>
</details>
</div>
</section>
{{> footer }}
<!-- Custom Modal -->
<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/js/logic/form-creator.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<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"
}
}
</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>