bentopdf/src/pages/flatten-pdf.html

<!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="Flatten PDF Online Free - Flatten PDF Tool | BentoPDF"
    />
    <meta
      name="description"
      content="Make form fields and annotations non-editable. Free, no uploads, no signup. Runs entirely in your browser."
    />
    <meta name="keywords" content="flatten pdf, 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/flatten-pdf" />

    <!-- Open Graph / Facebook / LinkedIn -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.bentopdf.com/flatten-pdf" />
    <meta
      property="og:title"
      content="Flatten PDF Online Free - Flatten PDF Tool | BentoPDF"
    />
    <meta
      property="og:description"
      content="Make form fields and annotations non-editable. Free, no uploads, no signup. Runs entirely in your browser."
    />
    <meta
      property="og:image"
      content="https://www.bentopdf.com/images/og-flatten-pdf.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/flatten-pdf" />
    <meta name="twitter:title" content="Flatten PDF Free" />
    <meta
      name="twitter:description"
      content="Make form fields and annotations non-editable. Free, no uploads, no signup. Runs entirely in your browser."
    />
    <meta
      name="twitter:image"
      content="https://www.bentopdf.com/images/twitter-flatten-pdf.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="Flatten PDF" />

    <title>Flatten PDF - Make Forms Non-Editable - 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 }}

    <div
      id="uploader"
      class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900"
    >
      <div
        id="tool-uploader"
        class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700"
      >
        <button
          id="back-to-tools"
          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:flattenPdf.name"
        >
          Flatten PDF
        </h1>
        <p class="text-gray-400 mb-6" data-i18n="tools:flattenPdf.subtitle">
          Make form fields and annotations non-editable.
        </p>

        <div
          id="drop-zone"
          class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300"
        >
          <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-400">
              <span class="font-semibold" data-i18n="upload.clickToSelect"
                >Click to select PDFs</span
              >
              <span data-i18n="upload.orDragAndDrop">or drag and drop</span>
            </p>
            <p
              class="text-xs text-gray-500"
              data-i18n="upload.hints.singleOrMultiplePdfs"
            >
              Single or multiple PDF files supported
            </p>
            <p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">
              Your files never leave your device.
            </p>
          </div>
          <input
            id="file-input"
            type="file"
            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
            accept="application/pdf"
            multiple
          />
        </div>

        <!-- Control buttons for multi-file uploads -->
        <div id="file-controls" class="hidden mt-4 flex gap-3">
          <button
            id="add-more-btn"
            class="btn bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2"
          >
            <i data-lucide="plus"></i>
            <span data-i18n="upload.addMore">Add More Files</span>
          </button>
          <button
            id="clear-files-btn"
            class="btn bg-gray-700 hover:bg-gray-600 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2"
          >
            <i data-lucide="trash-2"></i>
            <span data-i18n="upload.clearAll">Clear All</span>
          </button>
        </div>

        <div id="file-display-area" class="mt-4 space-y-2"></div>

        <div id="tool-options" class="hidden mt-6">
          <div class="p-4 bg-gray-900 rounded-lg border border-gray-700 mb-4">
            <h3 class="text-sm font-semibold text-white mb-2">
              What will be flattened:
            </h3>
            <ul class="text-xs text-gray-400 space-y-1 list-disc list-inside">
              <li>
                Form fields (text fields, checkboxes, radio buttons, etc.)
              </li>
              <li>Annotations and comments</li>
              <li>Interactive elements</li>
            </ul>
            <p class="text-xs text-gray-500 mt-2">
              Note: Flattened content cannot be edited or filled out.
            </p>
          </div>
          <button id="process-btn" class="btn-gradient w-full">
            Flatten PDF(s)
          </button>
        </div>
      </div>
    </div>

    <!-- Loader Modal -->
    <div
      id="loader-modal"
      class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
    >
      <div
        class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl"
      >
        <div class="solid-spinner"></div>
        <p
          id="loader-text"
          class="text-white text-lg font-medium"
          data-i18n="loader.processing"
          data-i18n="loader.processing"
        >
          Processing...
        </p>
      </div>
    </div>

    <!-- Alert Modal -->
    <div
      id="alert-modal"
      class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden"
    >
      <div
        class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700"
      >
        <h3
          id="alert-title"
          class="text-xl font-bold text-white mb-2"
          data-i18n="alert.title"
          data-i18n="alert.title"
        >
          Alert
        </h3>
        <p id="alert-message" class="text-gray-300 mb-6"></p>
        <button
          id="alert-ok"
          class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200"
        >
          OK
        </button>
      </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">
            What does flattening a PDF actually do?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            It merges interactive elements into the page content: form fields,
            checkboxes, radio buttons, dropdowns, signature fields, comments,
            highlights, strikethroughs, sticky notes, stamps, and ink marks. The
            page looks the same afterward, but nothing can be edited, moved, or
            deleted.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Will the text still be selectable and searchable after flattening?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            Yes, flattening doesn't turn pages into images. Regular text,
            images, bookmarks, and page dimensions are untouched; only form
            fields and annotations become static page content. If you want every
            page rasterized, use
            <a
              href="/rasterize-pdf"
              class="text-indigo-300 hover:text-indigo-400"
              >Rasterize PDF</a
            >
            instead.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            I filled out a form and want to lock the answers. Is this the right
            tool?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            Yes. Flatten the completed form and the values you entered become
            part of the page, so recipients can't change them. Do it only after
            you're finished, because there's no way to unflatten a PDF.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Why does it say no form was found?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            That appears when the PDF has annotations but no form fields. It
            isn't an error; the annotations are still flattened and the file
            downloads normally.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Do hyperlinks and comments survive flattening?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            Comments, highlights, and other markup are burned into the page and
            stay visible, but they lose their pop-up notes and can't be edited.
            Links are annotations too, so a clickable link may stop working even
            though its text remains on the page.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Can I flatten several PDFs at once?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            Yes. Upload multiple files and click Flatten PDF; you get
            flattened_pdfs.zip with one file per PDF. A single file downloads
            directly with "flattened_" added to the front of its name.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Should I flatten before or after signing?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            Before. Flatten first so form values and annotations can't be
            altered, then sign. Flattening rewrites page content, so doing it
            after a
            <a
              href="/digital-sign-pdf"
              class="text-indigo-300 hover:text-indigo-400"
              >digital signature</a
            >
            makes readers report the document as changed.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Is my PDF uploaded to flatten it?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            No. Flattening runs with pdf-lib inside your browser, so the file
            and whatever you typed into the form stay on your device.
          </p>
        </details>
      </div>
    </section>
    {{> footer }}
    <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/flatten-pdf-page.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": "Flatten PDF - 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 flatten pdf online",
        "description": "Learn how to flatten pdf 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": "Flatten PDF",
            "item": "https://www.bentopdf.com/flatten-pdf"
          }
        ]
      }
    </script>
  </body>
</html>