How to Build a Landing Page with a Subscribe Form — Completely Free

Every product starts the same way: a landing page and an email list. The static page is easy — the annoying part has always been the form. You either bolt on a third-party form service (with its branding and its subscriber limits), or you stand up a whole backend just to store email addresses.

Here’s a third option: a static landing page plus a real database, both on PocketBase Cloud’s free plan. The free plan includes 1 PocketBase instance and 5 static sites — exactly the shape of this project — and your subscribers live in a database you own and can export any time.

Total cost: $0. Total time: about 15 minutes.

What we’re building

Landing page (static site)
  └── subscribe form
        └── POST → PocketBase `subscribers` collection

1. A PocketBase instance holding a subscribers collection
2. A static landing page with a form that writes to it
3. Both deployed on the free plan

Step 1: Deploy your PocketBase instance

Sign up at pocketbasecloud.com, create a project, and deploy a PocketBase instance. Provisioning takes under a minute, and you’ll get a URL like:

https://your-app.pocketbasecloud.com

Open the admin dashboard from your portal and log in with the generated credentials.

Step 2: Create the subscribers collection

In the admin dashboard, create a new Base collection called subscribers with one field:

• email — type Email, required

Then add a unique index on email (Collection options → Indexes) so the same address can’t sign up twice:

CREATE UNIQUE INDEX idx_unique_email ON subscribers (email)

Step 3: Lock it down with API rules

This is the part form services never let you control. Open the collection’s API Rules and set:

• Create rule: unlock it and leave it empty — anyone can subscribe
• List/Search, View, Update, Delete: leave locked (admin only)

The result: the public can add an email and do nothing else. Nobody can list your subscribers, and duplicates bounce off the unique index with a clean error.

Step 4: Build the landing page

Any static page works — plain HTML, Astro, Next.js export, whatever you like. The form itself needs no SDK; PocketBase’s REST API is a plain fetch away:

<form id="subscribe-form">
  <input type="email" name="email" placeholder="[email protected]" required />
  <button type="submit">Notify me</button>
  <p id="form-message" hidden></p>
</form>

<script>
  const form = document.getElementById("subscribe-form");
  const message = document.getElementById("form-message");

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const email = new FormData(form).get("email");

    const res = await fetch(
      "https://your-app.pocketbasecloud.com/api/collections/subscribers/records",
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      },
    );

    message.hidden = false;
    if (res.ok) {
      message.textContent = "You're on the list. Talk soon!";
      form.reset();
    } else if (res.status === 400) {
      message.textContent = "Looks like you're already subscribed.";
    } else {
      message.textContent = "Something went wrong — please try again.";
    }
  });
</script>

Swap your-app.pocketbasecloud.com for your instance URL and you’re done. (If you’re using the official JavaScript SDK elsewhere, it’s one call: pb.collection("subscribers").create({ email }).)

Step 5: Deploy the landing page

Zip your static files, create a Frontend in your PocketBase Cloud project, and upload. You get a live URL with automatic HTTPS, and you can attach a custom domain later. The free plan includes 5 static sites, so staging and production variants both fit.

Step 6 (optional): react to new subscribers with a hook

Want a Discord ping or a welcome email on every signup? Add a PocketBase JavaScript hook — no extra service required:

onRecordAfterCreateSuccess((e) => {
  console.log("New subscriber:", e.record.get("email"));
  // call your email provider or a webhook here
  e.next();
}, "subscribers");

On PocketBase Cloud you can manage hook files straight from the portal — hooks are included on every plan.

Exporting your list

Your subscribers are rows in a database you control. Export them from the admin dashboard whenever you like, or pull them programmatically with an admin token. When you graduate to a proper email tool, your list goes with you — no platform ransom.

Why this beats a form service

• No subscriber caps or “powered by” badges — it’s your database
• One dashboard — the page and the data live in the same project
• A real backend when you need it — the same instance can later hold your waitlist survey, your beta flags, your whole app

The landing page you ship today is step one of the product. With this setup, step two doesn’t require a migration — the backend is already there.

Start free →