Bring your own form

What you need

Three things, all of them in the form builder.

The form slug

Open your form and look at the Share & embed panel. The hosted link ends in the slug: in origami.arcticleaf.com/f/w8ne32s3n the slug is w8ne32s3n. That same path accepts your posts, and /embed/w8ne32s3n behaves identically on POST, so integrations already pointed at the embed path keep working.

The data keys

Every field has a data key, and that key, not the label, is the name you post. You'll find it on each field card in the builder and again on the field's edit page as Data key. A field labelled "What are you hoping to solve?" has the key what_are_you_hoping_to_solve.

An encoding Origami accepts

Post application/x-www-form-urlencoded or multipart/form-data, whatever a normal browser form sends. File uploads must be multipart. A JSON request body is not accepted; ask for a JSON response with an Accept header instead.

Pick a path

Three ways in. They're alternatives, not steps: choose on how much control you need over what the visitor sees next, and whether you have a secret to protect.

Plain HTML

Point a normal form at the endpoint. No JavaScript, nothing to deploy.

<form method="post" action="https://origami.arcticleaf.com/f/w8ne32s3n">

  <label for="full_name">Full name</label>
  <input id="full_name" name="full_name" type="text" required>

  <label for="work_email">Work email</label>
  <input id="work_email" name="work_email" type="email" required>

  <label for="message">What are you hoping to solve?</label>
  <textarea id="message" name="what_are_you_hoping_to_solve"></textarea>

  <button type="submit">Send</button>
</form>

The id is yours to choose; the name has to be the Origami key. Add enctype="multipart/form-data" to the form tag if any field is a file upload.

Send the visitor back to your site

By default a successful post lands on Origami's thank-you page. Under Form settings → Redirect URL after submit, set a page on your own site and Origami sends them there instead.

JavaScript & JSON

Add one header and the endpoint answers JSON instead of a page. Cross-origin requests are allowed, so this works from any domain with no backend of your own.

const res = await fetch("https://origami.arcticleaf.com/f/w8ne32s3n", {
  method: "POST",
  headers: { Accept: "application/json" },
  body: new FormData(form),   // or a URLSearchParams
});

const result = await res.json();

if (result.ok) {
  // Origami stored it. Follow the form's Redirect URL if it has one.
  if (result.redirect) location.href = result.redirect;
  else showThanks();
} else {
  // result.field is the data key of the offending input, when there is one.
  showError(result.error, result.field);
}

Every JSON response is one of two shapes:

// stored
{ "ok": true, "redirect": "https://yoursite.com/thanks" | null }

// rejected
{ "ok": false, "error": "\"Budget\" has an invalid value.", "field": "budget" }

Send the body as FormData or URLSearchParams and don't set a Content-Type yourself. Accept and a form content-type are CORS-safelisted, so the request goes straight through without a preflight; if you do add a custom header, the endpoint answers OPTIONS correctly anyway.

Through your own server

Worth the extra hop when you have something to protect: a bot-verification secret, an API key, your own audit log.

// 1. Your own checks first — Turnstile, reCAPTCHA, rate limits.
const submitted = await request.json();

// 2. Build a normal form body, keyed by Origami's data keys.
const body = new FormData();
body.append("full_name", submitted.fullName);
body.append("work_email", submitted.workEmail);
body.append("what_are_you_hoping_to_solve", submitted.message);

// Deliberately no _ts and no _website — see "The two spam fields" below.

const res = await fetch("https://origami.arcticleaf.com/f/w8ne32s3n", {
  method: "POST",
  headers: { Accept: "application/json" },
  body,
});

const result = await res.json();
if (!result.ok) {
  console.error("Origami rejected the submission:", result.error, result.field);
  return Response.json({ error: result.error }, { status: 502 });
}
return Response.json({ success: true });

Ask for JSON here too. Without the Accept header you get HTML back, a form with a Redirect URL answers 303, and fetch follows it to your own thank-you page and reports whatever that returns. If you must stay on HTML, set redirect: "manual" and treat a 3xx as success.

Field reference

What each field type expects, and what ends up stored. Anything posted under a key Origami doesn't recognise is dropped without a word.

Conditional logic still applies

A field set to appear only when another answer matches is checked on the server too. Send a value for a field whose condition isn't met and it's discarded, so replicate the same show and hide rules in your form or those answers quietly go missing.

Multi-page forms are one post

Page breaks are a front-end nicety. The endpoint takes every field in a single request, however many pages the Origami version shows.

The two spam fields

Origami's hosted form ships two anti-bot fields. Both are optional for you, but sending them wrongly makes submissions vanish.

Responses

With Accept: application/json you get the JSON shapes above. Without it, every response is HTML meant for a browser and you read the status code.

Getting the data out

Once a submission is stored, four ways to reach it, one of them built for your code.

Webhooks

Add an endpoint under Webhooks in the builder and Origami posts JSON to it on every submission. Each endpoint gets its own secret and the body is signed, so you can prove the call came from Origami.

x-origami-event: submission.created
x-origami-signature: sha256=<hmac-sha256 of the raw body, lowercase hex>

{
  "event": "submission.created",
  "form": { "id": "frm_…", "slug": "w8ne32s3n", "title": "New Sales Request" },
  "submission": {
    "id": "sub_…",
    "submitted_at": 1786980689,
    "data": { "full_name": "Ada Lovelace", "work_email": "ada@example.com" },
    "files": [{ "field": "attachments", "filename": "brief.pdf",
               "size": 18244, "url": "https://origami.arcticleaf.com/files/fil_…" }]
  }
}

Verify the signature over the raw body before parsing, with a constant-time comparison. Two things to plan for: delivery is attempted once, with a ten-second timeout and no automatic retry, so keep your handler fast and idempotent; and the url on a file needs a signed-in Origami session with access to that form. It is not a public download link.

The other three

• Email notifications on every submission, to whoever you list on the form.
• CSV export of the whole history, timestamped in your workspace's time zone.
• The dashboard, with search, read and unread, and per-form analytics.

Before you go live

Six things worth confirming with a real submission.

• Every name matches a data key in the builder, copied not guessed. Unknown keys are dropped in silence.
• Your form enforces the same required fields as Origami, so nobody meets the hosted error page.
• Number and dropdown values are normalised to what the field accepts.
• No _ts is sent from a server, and _website is absent or empty.
• A Redirect URL is set if you're using the plain HTML path.
• You've submitted the live form once and watched it reach the dashboard, with the notification email arriving.