Temple forms on your website

Every Temple form can live on your church's own site. Embed it as it is, in your brand colour, or build your own form and send the answers to Temple. Either way, responses land in Temple with the same notifications, automations and webhooks.

Find the snippets for a specific form under Forms → ⋯ → Share & embed. The examples below use YOUR_FORM_ID and YOUR_CHURCH_ID as placeholders.

Embed a form

Paste this where the form should appear. It sizes itself to the form, so there's no inner scrollbar, and passes your page's own query string through, so a hidden utm_source field records where visitors came from.

<div data-temple-form="YOUR_FORM_ID" data-cid="YOUR_CHURCH_ID" data-title="Contact us"></div>
<script src="https://templeadmin.com/embed.js" async></script>

Brand colour, corner radius, font and logo come from the form's Design tab. Turn on Transparent when embedded to drop the card and let your site's background show. Forms are always shown on a light background. After someone submits, your page receives a temple-form:submitted event on window.

If your site builder strips scripts, use an iframe and set the height yourself:

<iframe src="https://templeadmin.com/forms/YOUR_FORM_ID?cid=YOUR_CHURCH_ID&embed=1" title="Contact us" style="width:100%;height:720px;border:0;" loading="lazy"></iframe>

Popup button

A button in your colour that opens the form over the page. Style it however you like.

<button type="button" data-temple-form-popup="YOUR_FORM_ID" data-cid="YOUR_CHURCH_ID" style="background:#1d4ed8;color:#ffffff;border:0;border-radius:8px;padding:12px 20px;font:600 16px/1 system-ui,sans-serif;cursor:pointer;">Plan your visit</button>
<script src="https://templeadmin.com/embed.js" async></script>

From your own script: TempleForms.open("YOUR_FORM_ID", "YOUR_CHURCH_ID").

The forms API

For a church with its own developer and design. No API key: the form id is the address, and only published forms answer. Requests from any website are allowed.

https://blvxyvvtoetcvvnakfxi.supabase.co/functions/v1/forms-api/YOUR_FORM_ID

Get the fields

GET returns each field's id, label, type, required, the page it's on, and for choice fields its options. Hidden fields carry the param they're normally filled from.

# The form's fields
curl https://blvxyvvtoetcvvnakfxi.supabase.co/functions/v1/forms-api/YOUR_FORM_ID

# Submit (answers keyed by field id or label)
curl -X POST https://blvxyvvtoetcvvnakfxi.supabase.co/functions/v1/forms-api/YOUR_FORM_ID \
  -H "Content-Type: application/json" \
  -d '{"answers": {"Email": "jane@example.com"}}'

Conditional questions and pages

A field shown only for certain answers carries show_when: { "match": "all" | "any", "conditions": [{ "field", "op": "is" | "is_not", "option" }] }. all needs every condition, any needs one. A single is condition also comes as show_if, as before.

pages lists each page's jumps, checked in order after that page: { "when": <condition or null for always>, "go_to": <page> | "submit" }. With no match the next page follows. Fields on a page that's skipped, and fields whose show_when doesn't hold, aren't required. Only answers to fields the respondent saw count toward a condition.

Send answers

POST JSON with answers keyed by field id or label (labels are matched ignoring case). Values can be plain: an option's label or id, "Jane Doe" or { first, last } for a name field, true/"yes" for yes/no and consent, an array for checkboxes, { street, city, state, zip } for an address, an https URL for a file. Add a submission_id of your own to make retries safe: the same id is only recorded once.

A success is { "ok": true, "submission_id": "…" }.

Plain HTML form

No JavaScript needed. Name each input after a field's label or id; repeat a name for several checkboxes. _redirect sends people to your thank-you page afterwards.

<form action="https://blvxyvvtoetcvvnakfxi.supabase.co/functions/v1/forms-api/YOUR_FORM_ID" method="post">
  <input name="Your name" placeholder="Your name" required>
  <input name="Email" type="email" placeholder="Email" required>
  <textarea name="Message"></textarea>
  <!-- Honeypot: hidden from people, filled in by bots -->
  <input name="website" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px">
  <input type="hidden" name="_redirect" value="https://yourchurch.org/thanks">
  <button type="submit">Send</button>
</form>

JavaScript

const res = await fetch("https://blvxyvvtoetcvvnakfxi.supabase.co/functions/v1/forms-api/YOUR_FORM_ID", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ answers: { Email: "jane@example.com" } }),
});
const result = await res.json(); // { ok: true } or { error, field? }

Errors

Errors are JSON with an error code, and where it helps a field and detail. HTTP 400 unless noted.

missing_required_field	A required question has no answer. `field` names it.
unknown_field	An answer's key matches no field id or label.
invalid_option	A choice answer matches no option id or label.
invalid_value	Wrong shape for the field type. `detail` says what was expected.
invalid_email / invalid_date_of_birth	The value doesn't look right.
form_closed	Unpublished, past its close date, or at its response limit.
rate_limited	Too many requests. Slow down and retry later (HTTP 429).

Limits & spam

20 submissions an hour from one IP address, 300 an hour per form, 120 schema reads an hour per IP.
Up to 200 answers per submission, 10,000 characters per answer, 256 KB per request.
Include a hidden website (or _hp) field that people never fill in. Submissions with it filled look successful but are thrown away.
Using Cloudflare Turnstile or reCAPTCHA? Verify it on your own server, then post to Temple from there. Temple ignores a cf-turnstile-response or turnstile_token field rather than reading it as an answer.

Hearing about new responses

Subscribe a webhook endpoint to form.submitted in Settings → Integrations → Webhooks to receive every response as it arrives, from Temple's page, an embed or this API.