Build your first form

Build a contact form in the dashboard, embed it on your site with one iframe, and watch the first submission land in your inbox.

TODO: translate to Indonesian. English source is authoritative; render it into Indonesian below.

This tutorial walks through building a simple contact form, embedding it on your site, and seeing the first submission arrive in the dashboard.

Prerequisites. An active Sawala Cloud account, a project, and a project-scoped publishable key (pk_live_…) for the formulir product. See API keys and access.

Create the form in the dashboard

Open Formulir in the dashboard and create a new form. Give it a name and a slug, for example contact.
Add a few fields. Each field has a name, a label, and a type. For a contact form:
- name — type text, required
- email — type text, required
- message — type richtext or markdown (renders as a textarea)
(Optional) Set the success behaviour: show a thank-you message, or redirect to a URL after submit.
Make sure the form's visibility is public so it can accept submissions, then save.

Formulir uses the shared Sawala field types: text, url, richtext, markdown, number, boolean, date, relation, media, blocks, component, json, select, multiselect, repeater. There is no separate email, textarea, checkbox, radio, or file type — use text for short text, richtext/markdown for long text, and media for file uploads.

Embed the form on your site

The quickest embed is a hosted iframe. Paste this into any HTML page, swapping in your project ID, your form's slug, and your publishable key:

<iframe
  src="https://formulir.id/embed/<projectId>/contact?key=pk_live_…"
  style="width: 100%; height: 600px; border: 0;"
  loading="lazy"
></iframe>

The ?key=pk_live_… query parameter is required. A keyless embed URL renders an error page. The key must be project-scoped to the same project that owns the form.

The dashboard form editor generates a ready-to-copy snippet with your project ID and key already filled in. For rendering the form in your own DOM instead of an iframe, see how to embed a form.

Submit a test response

Open the page in a browser, fill in the fields, and submit. On success the iframe shows your configured thank-you message (or follows your redirect). Behind the scenes the browser posts to https://api.sawala.cloud/public/formulir/forms/contact/submit, which responds 201 with { "id": "…", "status": "received" }.

See the submission in the dashboard

Return to the form in the dashboard and open its inbox. Your test response appears there, along with its timestamp and metadata (submitter IP address and user agent). File uploads, if any, are stored and linked from the submission.

Next steps

Explore the other embed modes — React component and script tag — in how to embed a form.
Submit programmatically and read the error codes in the API reference.