Forms

Static sites have nowhere to send a contact form. Mabel gives each form an endpoint you paste into your HTML. Submissions land in an inbox your client can read, filter and mark handled.

Create a form

Open your site, choose Forms, then New form. Give it a name. The slug is made from the name and becomes part of the endpoint.

Creating and editing forms needs the Admin or Owner role. See Team and access.

Add it to your site

Each form page shows its exact endpoint. It looks like this:

POST https://app.mabelstack.com/api/sites/SITE_ID/forms/FORM_SLUG/submissions

Point a normal HTML form at it:

<form action="https://app.mabelstack.com/api/sites/SITE_ID/forms/FORM_SLUG/submissions" method="POST">
  <input type="text" name="name" />
  <input type="email" name="email" />
  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>

Any field names work. Whatever you send is stored, and the field names become the labels in the inbox. Use the endpoint shown on your form’s page, since it has the real site ID and slug filled in.

Sending from JavaScript

Cross-origin requests are allowed, so you can submit from your own page without a redirect:

const form = document.querySelector("form");
form.addEventListener("submit", async (event) => {
  event.preventDefault();
  const response = await fetch(form.action, { method: "POST", body: new FormData(form) });
  if (response.ok) form.reset();
});

A successful request returns status 201 with { "ok": true, "submission_id": 123 }.

Redirect after sending

By default the endpoint answers with JSON. To send people back to a thank-you page after a normal HTML form post, set a Success redirect URL in the form’s settings, for example https://example.com/thank-you.

Spam protection

Turn on the honeypot in the form’s settings, then add the hidden field it shows you to your HTML:

<input type="text" name="_gotcha" hidden />

People never see it, but many bots fill it in. A submission that fills the honeypot is saved as spam and does not trigger emails or webhooks. The sender still sees a normal success response, so bots get no signal. You can rename the field in the form’s settings.

You can also mark any submission as spam yourself from the inbox.

Email notifications

In Notifications, enter one or more email addresses separated by commas. Choose how often to send:

Leave the address blank to turn email off entirely.

File uploads

Add a file input to your form, and set enctype="multipart/form-data" on a normal HTML form:

<form action="..." method="POST" enctype="multipart/form-data">
  <input type="file" name="attachment" />
</form>

Uploads are included on the Pro and Power plans, with a limit per file and a storage total per site (see Plans and billing). A file that is over a limit, or sent on a plan without uploads, is left off, but the rest of the submission is still saved. The submission records which file was left off and why (in a files_not_attached field), and a JSON response lists it under rejected_files.

Webhooks

Pro and Power sites can send every new submission to your own server. In the form’s settings, set a Webhook URL. It must use HTTPS. Mabel sends a POST with a JSON body:

{
  "form": { "id": 1, "name": "Contact", "slug": "contact" },
  "site": { "id": 1, "name": "example.com" },
  "submission": {
    "id": 123,
    "data": { "name": "Ada", "email": "[email protected]", "message": "Hello" },
    "ip_address": "203.0.113.5",
    "created_at": "2026-10-05T09:30:00Z"
  }
}

Your server should answer with a 2xx status. If it does not, Mabel retries up to three times.

The inbox

Open a form’s Submissions to read what came in. Use the filters to switch between:

• All, which hides spam.
• Unread, Handled and Spam.

Open a submission to read it, then mark it handled or as spam. Mark all read clears the unread count. Anyone on the account can read and mark submissions. Deleting a submission needs the Admin or Owner role.

Keeping and limiting submissions

How long Mabel keeps submissions, and how many a site can receive each month, depends on the site’s plan. Older submissions are deleted automatically once they pass the retention period. See Plans and billing.