# Hugo

> Partial dan shortcode Hugo yang merender formulir Ikiform dari site params, di layout dan di konten Markdown.

Hugo menghasilkan HTML biasa, dan kiriman formulir biasa sudah cukup untuk Ikiform, jadi tidak ada JavaScript yang perlu ditambahkan. Satu-satunya jebakan khas Hugo adalah Markdown: renderer Hugo membuang HTML mentah dari file konten kecuali Anda mengaktifkan `markup.goldmark.renderer.unsafe`, dan formulir yang ditempel berubah menjadi `<!-- raw HTML omitted -->`. Shortcode menyimpan HTML di template sebagai gantinya.

## Penyiapan

### Langkah 1: Tambahkan ID formulir ke config

`hugo.toml`:

```toml
baseURL = "https://example.com/"

[params.ikiform]
formId = "frm_xxxxxxxxxxxxxxxx"
thanks = "/thanks/"
```

`baseURL` harus berupa alamat `https:` Anda yang sebenarnya. Partial memakainya untuk mengubah `thanks` menjadi URL absolut, dan Ikiform hanya mengikuti redirect `https:`.

### Langkah 2: Buat partial

`layouts/_partials/ikiform-form.html`:

```html
{{ $id := .id | default site.Params.ikiform.formId }}
{{ $thanks := .thanks | default site.Params.ikiform.thanks }}
<form class="ikiform" action="https://ikiform.com/f/{{ $id }}" method="post">
  <label>Email <input name="email" type="email" autocomplete="email" required></label>
  <label>Message <textarea name="message" rows="5"></textarea></label>
  {{ with .subject }}<input type="hidden" name="_subject" value="{{ . }}">{{ end }}
  {{ with $thanks }}<input type="hidden" name="_redirect" value="{{ . | absURL }}">{{ end }}
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <button type="submit">{{ .button | default "Send" }}</button>
</form>
```

Selalu panggil dengan `dict`, meskipun kosong. Setiap key bersifat opsional dan kembali ke site params jika tidak diisi.

### Langkah 3: Bungkus dalam shortcode

`layouts/_shortcodes/ikiform.html`:

```html
{{ partial "ikiform-form.html" (dict "id" (.Get "id") "subject" (.Get "subject") "button" (.Get "button")) }}
```

Hugo 0.146 memindahkan template ke `layouts/_partials` dan `layouts/_shortcodes`. Di versi lebih lama, gunakan `layouts/partials` dan `layouts/shortcodes`.

### Langkah 4: Gunakan

Di file konten mana pun:

`content/contact.md`:

```text
---
title: Contact
---

Questions about pricing? Write to us.

{{< ikiform subject="Pricing question" >}}
```

Atau di layout, untuk formulir di setiap halaman:

`layouts/_partials/footer.html`:

```html
<footer>
  {{ partial "ikiform-form.html" (dict "subject" "Footer enquiry") }}
</footer>
```

Tambahkan halaman `content/thanks.md` untuk redirect. Ikiform mengikuti `_redirect` hanya jika formulir punya domain yang diizinkan yang mencakup situs Anda; tanpanya, pengunjung melihat halaman terima kasih Ikiform. Lihat [Aturan untuk _redirect](https://ikiform.com/id/docs/html.md#redirect-rules).

## Domain yang diizinkan

Cantumkan domain produksi Anda plus setiap tempat Anda melihat pratinjau situs hasil build.

| Tempat formulir berjalan | Tambahkan ke Domain yang diizinkan |
| --- | --- |
| `hugo server` | `localhost`. Ini cocok dengan `http://localhost:1313`: Ikiform hanya membandingkan nama host, tidak pernah port. |
| Domain Anda | `example.com`, yang juga mencakup `www.example.com` |
| Netlify | `your-site.netlify.app`. Deploy preview (`deploy-preview-12--your-site.netlify.app`) dan branch deploy (`branch--your-site.netlify.app`) bukan subdomainnya, jadi tambahkan host pratinjau persisnya selama Anda menguji. |
| Cloudflare Pages | `your-project.pages.dev`. URL pratinjau seperti `abc123.your-project.pages.dev` adalah subdomainnya, jadi sudah cocok. |
| GitHub Pages | `username.github.io`. Situs proyek di `username.github.io/repo` memakai host yang sama, jadi satu entri mencakup semuanya. |

- Jangan pernah menambahkan `netlify.app`, `pages.dev`, atau `github.io` saja. Setiap situs di host itu akan cocok, termasuk milik orang lain.

## Daftar periksa pengujian

1. Jalankan `hugo server`, buka halamannya, dan lihat source-nya. Anda seharusnya melihat `<form>`, bukan `<!-- raw HTML omitted -->`.
2. Kirim secara lokal dengan `localhost` di domain yang diizinkan. Anda akan mendarat di halaman terima kasih Ikiform, karena `absURL` menghasilkan alamat `http://localhost` dan hanya redirect `https:` yang diikuti.
3. Deploy pratinjau, kirim dari sana, dan pastikan kirimannya tercantum di Ikiform dan tidak ditandai spam.
4. Kirim di domain produksi Anda dan pastikan Anda mendarat di `/thanks/`.

## Pemecahan masalah

| Yang Anda lihat | Alasan | Solusi |
| --- | --- | --- |
| `<!-- raw HTML omitted -->` di tempat formulir seharusnya berada | Formulir ditempel langsung ke Markdown | Gunakan shortcode. |
| Hugo gagal dengan `template for shortcode "ikiform" not found` | File shortcode ada di folder yang tidak dibaca oleh versi Hugo Anda | Gunakan `layouts/_shortcodes` di 0.146 ke atas, `layouts/shortcodes` sebelumnya. |
| Halaman terima kasih Ikiform, bukan `/thanks/`, di produksi | Tidak ada domain yang diizinkan, atau `baseURL` memakai `http:` | Tambahkan domain Anda dan atur `baseURL` ke alamat `https:` Anda. |
| `404 not_found` setelah dikirim | `params.ikiform.formId` tidak ada, jadi action berakhir di `/f/` | Atur ID formulir di `hugo.toml`. |
| 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`. |

## Terkait

- [Jekyll](https://ikiform.com/id/docs/guides/jekyll.md): Include, dan penyiapan GitHub Pages.
- [Eleventy](https://ikiform.com/id/docs/guides/eleventy.md): Shortcode untuk Nunjucks, Liquid, dan Markdown.
- [Formulir HTML](https://ikiform.com/id/docs/html.md): Redirect, field reserved, dan honeypot.
- [Domain yang diizinkan](https://ikiform.com/id/docs/spam.md#allowed-domains): Cara origin dicocokkan, dan apa akibat ketidakcocokan.