# WordPress

> Tambahkan formulir Ikiform ke WordPress dengan blok Custom HTML, atau daftarkan shortcode agar penulis mana pun bisa menaruh formulir yang sama di mana saja.

Plugin formulir menangani kiriman di dalam WordPress: formulirnya mengirim kembali ke situs Anda sendiri, lalu plugin menyimpan dan mengirim hasilnya lewat email. Formulir HTML biasa yang diarahkan ke Ikiform melewati plugin, database, dan penyiapan email, serta tetap berfungsi di halaman yang di-cache karena tidak membawa nonce WordPress.

## Siapa yang bisa menempel formulir

WordPress memfilter HTML di post dan page. Untuk siapa pun yang tidak punya kapabilitas `unfiltered_html`, WordPress menghapus `<form>` dan `<input>` saat konten disimpan.

| Situs | Siapa yang bisa menyimpan formulir di blok Custom HTML |
| --- | --- |
| Self-hosted, satu situs | Administrator dan Editor |
| Multisite self-hosted | Hanya Super Admin |
| `DISALLOW_UNFILTERED_HTML` diatur ke `true` di `wp-config.php` | Tidak ada. Gunakan [shortcode](#shortcode). |
| WordPress.com | Siapa pun yang bisa mengedit, tetapi hanya di paket berbayar dengan fitur hosting aktif. Fitur hosting aktif saat Anda memasang plugin. Di paket lain, tag-nya dihapus. |

## Blok Custom HTML

### Langkah 1: Tambahkan blok

Di block editor, ketik `/html` dan pilih **Custom HTML**. Untuk menaruh formulir di setiap halaman, tambahkan blok ke template part seperti footer di Site Editor.

### Langkah 2: Tempel formulir

`Custom HTML`:

```html
<form class="ikiform" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <p><label>Name <input name="name" autocomplete="name" required></label></p>
  <p><label>Email <input name="email" type="email" autocomplete="email" required></label></p>
  <p><label>Message <textarea name="message" rows="5"></textarea></label></p>
  <input type="hidden" name="_redirect" value="https://example.com/thank-you/">
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <p><button type="submit" class="wp-element-button">Send</button></p>
</form>
```

`wp-element-button` memberi tombol gaya tombol tema Anda di block theme. Formulir mewarisi font dan gaya input tema Anda, jadi biasanya tidak butuh CSS.

### Langkah 3: Pratinjau, lalu perbarui

Gunakan tab **Preview** pada blok, lalu simpan. Muat ulang editor dan buka bloknya lagi: jika tag `<form>` dan `<input>` hilang, akun Anda tidak bisa menyimpannya. Gunakan shortcode di bawah.

`_redirect` hanya berfungsi jika formulir punya domain yang diizinkan yang mencakup situs Anda; jika tidak, pengunjung melihat halaman terima kasih Ikiform. Anda juga bisa mengatur **Redirect after submit** di pengaturan formulir dan menghapus input tersembunyinya.

## Shortcode

Shortcode menyimpan HTML di PHP, yang tidak disentuh filter konten, jadi author dan contributor juga bisa menaruh formulir. Simpan ini sebagai must-use plugin, yang dimuat WordPress secara otomatis:

`wp-content/mu-plugins/ikiform.php`:

```php
<?php

add_shortcode('ikiform', function ($atts) {
    $atts = shortcode_atts([
        'id' => 'frm_xxxxxxxxxxxxxxxx',
        'subject' => '',
        'redirect' => '',
        'button' => 'Send',
    ], $atts, 'ikiform');

    ob_start();
    ?>
    <form class="ikiform" action="<?php echo esc_url('https://ikiform.com/f/' . rawurlencode($atts['id'])); ?>" method="post">
      <p><label>Email <input name="email" type="email" autocomplete="email" required></label></p>
      <p><label>Message <textarea name="message" rows="5"></textarea></label></p>
      <?php if ($atts['subject']) : ?>
        <input type="hidden" name="_subject" value="<?php echo esc_attr($atts['subject']); ?>">
      <?php endif; ?>
      <?php if ($atts['redirect']) : ?>
        <input type="hidden" name="_redirect" value="<?php echo esc_url($atts['redirect']); ?>">
      <?php endif; ?>
      <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
      <p><button type="submit" class="wp-element-button"><?php echo esc_html($atts['button']); ?></button></p>
    </form>
    <?php
    return ob_get_clean();
});
```

Lalu tambahkan blok **Shortcode**, atau ketik shortcode di konten mana pun:

`Shortcode block`:

```text
[ikiform subject="New enquiry" redirect="https://example.com/thank-you/"]
```

- Berikan `id` untuk memakai formulir lain: `[ikiform id="frm_..."]`.
- Ubah field di PHP agar sesuai dengan formulir Anda. Setiap input yang punya `name` akan disimpan.
- Di classic editor, tempel HTML mentah hanya di tab **Text**. Visual editor menambahkan tag `<p>` dan `<br>` di dalam formulir. Shortcode menghindari masalah ini.

## Domain yang diizinkan

Cantumkan setiap alamat tempat situs merespons. Situs WordPress sering punya beberapa alamat selama Anda membangunnya.

| Tempat formulir berjalan | Tambahkan ke Domain yang diizinkan |
| --- | --- |
| Domain live Anda | `example.com`, yang juga mencakup `www.example.com` |
| Alamat WordPress.com | `your-site.wordpress.com`, atau `your-site.wpcomstaging.com` untuk situs staging |
| Situs staging dari host Anda | Host staging dari dashboard host Anda |
| Pengembangan lokal | `localhost`, atau nama host lokal yang diberikan tool Anda, seperti `my-site.local` |

- Jangan pernah menambahkan `wordpress.com` atau `wpcomstaging.com` saja. Setiap situs di host itu akan cocok, termasuk milik orang lain.

## Daftar periksa pengujian

1. Keluar, atau buka jendela privat. Admin yang sedang masuk melewati sebagian cache dan melihat halaman yang sedikit berbeda.
2. Kirim formulir dan pastikan kirimannya ada di Ikiform, sebagai diterima, bukan spam.
3. Pastikan Anda mendarat di halaman terima kasih Anda. Jika Anda melihat halaman Ikiform, situs belum ada di domain yang diizinkan atau URL `_redirect` bukan `https:`.
4. Edit halaman sebagai pengguna non-admin dan pastikan formulir tetap utuh setelah disimpan, atau gunakan shortcode.

## Pemecahan masalah

| Yang Anda lihat | Alasan | Solusi |
| --- | --- | --- |
| Field formulir hilang setelah disimpan, hanya label yang tersisa | Akun Anda tidak punya `unfiltered_html`, atau paket WordPress.com memfilter `form` dan `input` | Gunakan shortcode, atau minta Administrator menempel bloknya. |
| Tag `<p>` dan `<br>` yang nyasar merusak layout | Mode visual classic editor memformat ulang HTML | Gunakan blok Custom HTML atau shortcode. |
| Console browser menyatakan data formulir ditolak karena direktif `form-action` | Plugin keamanan atau host Anda mengirim header `Content-Security-Policy` | Tambahkan `https://ikiform.com` ke `form-action`, dan ke `connect-src` jika Anda mengirim dengan `fetch`. |
| Kiriman masuk ke filter spam dengan `origin_mismatch` | Halaman yang mengirim tidak ada di domain yang diizinkan formulir | Tambahkan host dari tabel di atas. Jika **Reject** dipilih, kiriman yang sama mendapat `403 origin_not_allowed`. |
| `422 validation_failed` yang mencantumkan field Unknown | Formulir punya field yang didefinisikan dan salah satu nama input tidak termasuk di dalamnya | Ganti nama input menjadi ID field, atau awali dengan `_` jika hanya penanda untuk Anda. |

## Terkait

- [Formulir HTML](https://ikiform.com/id/docs/html.md): Redirect, field reserved, dan honeypot.
- [Pembuat situs](https://ikiform.com/id/docs/guides/site-builders.md): Embed yang berfungsi di pembuat situs mana pun.
- [Perlindungan spam](https://ikiform.com/id/docs/spam.md): Honeypot, penilaian, dan pemeriksaan manusia.
- [Pemecahan masalah](https://ikiform.com/id/docs/troubleshooting.md): CORS, ketidakcocokan origin, dan 429.