# Penjelasan atribut action di formulir HTML

> Apa fungsi atribut action formulir, bagaimana nilai relatif dan kosong di-resolve, bagaimana formaction mengirim satu formulir ke dua tempat, dan mengapa host statis menjawab 405.

Terbit 2026-10-25 · https://ikiform.com/id/guides/html-form-submission/action-attribute

Atribut `action` adalah URL tujuan data formulir. Nilai relatif di-resolve terhadap alamat halaman, nilai kosong atau tidak ada berarti halaman itu sendiri, dan `formaction` di tombol submit menimpanya untuk tombol itu. Di situs statis, atur ke URL lengkap backend formulir seperti `https://ikiform.com/f/<formId>`, karena host Anda sendiri tidak bisa menerima POST.

Kebanyakan formulir yang rusak di situs statis rusak di atribut yang satu ini. Markup terlihat baik, tombol berfungsi, dan browser menampilkan `405` atau halaman kosong, karena data pergi ke tempat yang tidak bisa menerimanya. Halaman ini menunjukkan persis ke mana sebuah `action` mengirim data, lalu memakai `formaction` untuk mengarahkan satu formulir ke dua inbox.

## Apa yang berbeda di sini

`action` adalah URL seperti `href` lainnya, dengan satu perbedaan: formulir tanpa `action` bukannya tidak melakukan apa-apa, melainkan mengirim ke halaman tempatnya berada. Di situs yang dirender server, halaman itu mungkin menangani post. Di host statis tidak bisa, jadi `action` yang tidak ada atau relatif baru gagal setelah Anda deploy.

## Ke mana setiap nilai mengirim data

Ambil halaman di `https://example.com/company/contact.html` dan lima formulir di dalamnya:

`contact.html`:

```html
<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
<form action="/api/contact" method="post">
<form action="send" method="post">
<form action="" method="post">
<form method="post">
```

| action | Di-resolve menjadi | Di host statis |
| --- | --- | --- |
| `https://ikiform.com/f/frm_...` | Persis URL itu | Berfungsi. Ikiform menerima POST |
| `/api/contact` | `https://example.com/api/contact` | Hanya berfungsi jika host Anda menjalankan function di path itu |
| `send` | `https://example.com/company/send`, relatif terhadap folder | `405` atau `404` |
| `""` (empty) | Halaman itu sendiri, `contact.html` | `405` di kebanyakan host statis |
| Tidak ada | Halaman itu sendiri | `405` di kebanyakan host statis |

Diagram: Bagaimana browser mengubah atribut action formulir menjadi URL tujuan post

1. Action absolut dipakai persis seperti tertulis, jadi post sampai ke Ikiform, yang menjawab dengan redirect.
2. Action relatif, kosong, atau tidak ada di-resolve terhadap alamat halaman itu sendiri, atau terhadap elemen base jika halaman punya.
3. Post lalu pergi ke host Anda sendiri. Host statis hanya menyajikan file, jadi menolak POST, biasanya dengan 405.

Jika address bar menampilkan domain Anda sendiri tepat setelah submit, action-nya relatif.

> Elemen `<base href>` di head halaman mengubah cara setiap URL relatif di-resolve, termasuk `action`. Beberapa site builder dan penyiapan single-page app menambahkannya. Gunakan URL lengkap dan itu tidak akan berpengaruh.

### Periksa apa yang akan dipakai browser

Di console browser, atribut dan property berbeda. `getAttribute` mengembalikan apa yang Anda tulis; property `action` mengembalikan URL hasil resolve yang benar-benar akan dituju browser:

`Console`:

```js
const form = document.querySelector("form");
form.getAttribute("action");
form.action;
```

Jika `form.action` menampilkan domain Anda sendiri, ke sanalah data pergi. Builder seperti Webflow dan Framer sering mengatur `action` dari panel pengaturannya sendiri, jadi periksa halaman yang dipublikasikan, bukan source Anda. [Panduan site builder](https://ikiform.com/id/docs/guides/site-builders.md) menyebutkan di mana setiap builder menyimpannya.

## Satu formulir, dua inbox

`formaction` di tombol submit menggantikan `action` formulir hanya untuk tombol itu. Di sini, satu set field dikirim ke dua formulir Ikiform. **Ask support** mengirim ke formulir support, **Talk to sales** ke formulir sales, dan setiap formulir Ikiform mengirim email ke penerimanya sendiri:

`contact.html`:

```html
<form action="https://ikiform.com/f/frm_supportxxxxxxxxx" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />

  <label for="message">How can we help?</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Ask support</button>
  <button formaction="https://ikiform.com/f/frm_salesxxxxxxxxxxx">Talk to sales</button>
</form>
```

- Setiap formulir Ikiform punya penerima notifikasi, pengaturan spam, dan webhook sendiri, jadi support dan sales tidak pernah melihat email satu sama lain.
- Kedua formulir butuh definisi field yang sama, atau tidak ada sama sekali. Dengan field terdefinisi, field yang tidak dikenal salah satu formulir ditolak dengan `422`.
- Atribut `form*` lainnya bekerja dengan cara yang sama: `formmethod`, `formenctype`, `formnovalidate`, dan `formtarget`. Tombol **Save draft** dengan `formnovalidate` melewati pemeriksaan browser.
- `formaction` hanya bekerja di tombol submit: `<button>`, `<input type="submit">`, dan `<input type="image">`.

Alternatifnya adalah satu formulir Ikiform dengan field `topic`, dan pengarahan berdasarkan topik di webhook atau filter inbox Anda. Itu mempertahankan satu daftar dan satu ekspor. Dua formulir lebih sederhana jika kedua tim sama sekali tidak boleh berbagi penerima.

## action dengan query string

Dengan `method="get"`, browser mengganti query string action dengan field formulir. `lang=de` di formulir pertama di bawah dibuang diam-diam; formulir kedua mempertahankannya sebagai input tersembunyi:

`search.html`:

```html
<form action="/search?lang=de" method="get">
  <input name="q" />
</form>

<form action="/search" method="get">
  <input name="q" />
  <input type="hidden" name="lang" value="de" />
</form>
```

Dengan `method="post"` query string dipertahankan, karena field masuk ke body. Itu tidak mengubah apa pun bagi Ikiform: parameter query di URL endpoint tidak disimpan, jadi gunakan input tersembunyi untuk nilai yang ingin Anda simpan.

## Input di luar formulir

Layout terkadang butuh input yang tidak berada di dalam elemen `<form>`, seperti pendaftaran di footer di samping konten lain. Atribut `form` di input atau tombol menggabungkannya ke formulir berdasarkan `id`, dan input itu dikirim ke `action` formulir tersebut:

`footer.html`:

```html
<form id="newsletter" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post"></form>

<footer>
  <input form="newsletter" name="email" type="email" required />
  <button form="newsletter">Subscribe</button>
</footer>
```

## Action mailto: dan javascript:

`action="mailto:you@example.com"` meminta aplikasi email pengunjung membuka pesan berisi field. Tidak ada yang terkirim kecuali mereka punya aplikasi email yang sudah disiapkan dan menekan kirim, dan Anda tidak pernah tahu bahwa mereka mencoba. `action="javascript:..."` menjalankan kode alih-alih mengirim dan diblokir oleh kebanyakan content security policy. Keduanya layak diganti dengan endpoint sungguhan.

## Pastikan berfungsi

1. Di **Allowed domains** formulir, tambahkan domain situs Anda, ditambah `localhost` selama pengembangan. Biarkan kosong untuk menerima kiriman dari mana saja.
2. Buka halaman yang dipublikasikan, bukan source Anda, dan jalankan `document.querySelector("form").action` di console. Hasilnya menampilkan URL Ikiform lengkap Anda.
3. Kirim formulir. Panel Network menampilkan POST ke `ikiform.com` yang dijawab `303`, bukan POST ke domain Anda sendiri.
4. Di formulir dua inbox, kirim sekali dengan setiap tombol. Setiap kiriman muncul di bawah formulirnya sendiri di dashboard.
5. Cek inbox setiap penerima notifikasi. Masing-masing mendapat email berisi field, dan **Reply** terkirim ke pengirim formulir jika formulir punya field `email`.

## Hal yang sering menjebak

| Masalah | Penyebab dan solusi |
| --- | --- |
| `405 Method Not Allowed` dari domain Anda sendiri | Action relatif, kosong, atau tidak ada, jadi post pergi ke host statis Anda. Gunakan URL Ikiform lengkap |
| `404 not_found` dari ikiform.com | Id formulir di action salah, atau formulir sudah dihapus. Salin endpoint dari halaman formulir di dashboard |
| Builder terus me-reset action | Beberapa builder menguasai `action` dari blok formulirnya. Gunakan pengaturan custom action mereka, atau embed dengan markup Anda sendiri |
| Browser memperingatkan bahwa formulir tidak aman | Action memakai `http:` di halaman `https:`. Endpoint Ikiform hanya `https:`; perbaiki skemanya |
| Field dari formulir kedua ikut terkirim | Formulir tidak bisa bersarang. Browser menutup formulir luar di tag `<form>` bagian dalam. Gunakan atribut `form` sebagai gantinya |

Untuk alur pengiriman lengkap, dari klik hingga redirect, lihat [ringkasan](https://ikiform.com/id/guides/html-form-submission.md#how-it-works). Semua yang diterima endpoint ada di [formulir HTML](https://ikiform.com/id/docs/html.md).

## Pertanyaan

### Apa yang terjadi jika formulir tidak punya atribut action?

Formulir mengirim ke halaman tempatnya berada. Itu berfungsi jika server Anda menangani post di URL tersebut, tetapi di host statis akan gagal, biasanya dengan 405 Method Not Allowed.

### Apa bedanya action dan formaction?

action diatur di formulir dan berlaku untuk setiap submit. formaction diatur di satu tombol submit dan menimpa action saat tombol itu dipakai, jadi satu formulir bisa mengirim ke dua tempat.

### Bisakah action formulir berupa URL di domain lain?

Bisa. Browser mengirim lintas situs tanpa penyiapan khusus, begitulah halaman statis mengirim ke backend formulir. Server penerima yang memutuskan apakah menerimanya; Ikiform memeriksa origin halaman terhadap allowed domains formulir.

### Mengapa parameter query string saya hilang dari URL action?

Dengan method get, browser mengganti query string action dengan field formulir itu sendiri. Pindahkan setiap parameter ke input tersembunyi. Dengan method post, query string dipertahankan.

## Panduan lainnya

- [Pengiriman formulir HTML](https://ikiform.com/id/guides/html-form-submission.md): Apa yang dilakukan browser saat formulir dikirim: field mana yang dikirim, bagaimana di-encode, apa yang seharusnya dijawab server, dan bagaimana Ikiform menjawab.
- [Redirect setelah submit](https://ikiform.com/id/guides/html-form-submission/redirect-after-submit.md): Arahkan pengunjung ke halaman terima kasih Anda sendiri setelah formulir terkirim: redirect 303, field _redirect, domain mana yang diizinkan, dan apa efek refresh.
- [Tanpa reload halaman](https://ikiform.com/id/guides/html-form-submission/without-page-reload.md): Kirim formulir dengan fetch dan FormData agar pengunjung tetap di halaman, dengan error field, status loading, percobaan ulang, dan cadangan saat script gagal.
- [Validasi formulir](https://ikiform.com/id/guides/html-form-submission/validation.md): Validasi formulir dengan required, type, pattern, dan min, beri gaya error dengan :user-invalid, dan terapkan aturan yang sama di server dengan definisi field.