# Eleventy

> Shortcode Eleventy yang merender formulir Ikiform di template Nunjucks, Liquid, dan Markdown, dengan ID formulir disimpan di global data.

Eleventy menghasilkan HTML statis, jadi formulir mengirim tanpa JavaScript client apa pun. Shortcode menyimpan markup di satu tempat dan bekerja sama persis di file Nunjucks, Liquid, dan Markdown.

## Penyiapan

### Langkah 1: Tambahkan shortcode

`eleventy.config.js`:

```js
const escape = (value) => String(value).replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);

export default function (eleventyConfig) {
  eleventyConfig.addShortcode("ikiform", (formId, thanks = "", subject = "") =>
    [
      `<form class="ikiform" action="https://ikiform.com/f/${encodeURIComponent(formId)}" method="post">`,
      '<label>Email <input name="email" type="email" autocomplete="email" required></label>',
      '<label>Message <textarea name="message" rows="5"></textarea></label>',
      thanks && `<input type="hidden" name="_redirect" value="${escape(thanks)}">`,
      subject && `<input type="hidden" name="_subject" value="${escape(subject)}">`,
      '<input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>',
      '<button type="submit">Send</button>',
      "</form>",
    ]
      .filter(Boolean)
      .join("\n"),
  );
}
```

- Baris-barisnya sengaja digabung tanpa baris kosong. Di Markdown, baris kosong mengakhiri blok HTML, dan sisa formulir akan diperlakukan sebagai teks.
- Ini memakai sintaks ES module. Jika `package.json` Anda tidak punya `"type": "module"`, beri nama file `eleventy.config.mjs`.

### Langkah 2: Simpan ID formulir di global data

`_data/ikiform.js`:

```js
export default {
  formId: process.env.IKIFORM_FORM_ID ?? "frm_xxxxxxxxxxxxxxxx",
  thanks: "https://example.com/thanks/",
};
```

Global data tersedia di setiap template sebagai `ikiform`. URL terima kasih harus absolut dan `https:`, karena Ikiform mengabaikan redirect lain.

### Langkah 3: Gunakan

`contact.md`:

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

Questions about pricing? Write to us.

{% ikiform ikiform.formId, ikiform.thanks, "Pricing question" %}
```

File Markdown diproses dengan Liquid secara default, jadi tag-nya berfungsi di sana apa adanya. Taruh di barisnya sendiri dan jangan beri indentasi empat spasi, atau Markdown akan merendernya sebagai code block. Tag yang sama berfungsi di file `.njk` dan `.liquid`.

`_redirect` hanya diikuti jika formulir punya domain yang diizinkan yang mencakup situs Anda. Lihat [Aturan untuk _redirect](https://ikiform.com/id/docs/html.md#redirect-rules).

## Domain yang diizinkan

Cantumkan domain produksi dan setiap host pratinjau. Situs Eleventy biasanya di-deploy ke Netlify atau Cloudflare Pages, yang menangani pratinjau secara berbeda.

| Tempat formulir berjalan | Tambahkan ke Domain yang diizinkan |
| --- | --- |
| `npx @11ty/eleventy --serve` | `localhost`. Ini cocok dengan `http://localhost:8080`: 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. |

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

## Daftar periksa pengujian

1. Jalankan dev server dan lihat source halamannya. Formulir seharusnya berupa HTML biasa, bukan di dalam blok `<pre><code>`.
2. Kirim secara lokal dengan `localhost` di domain yang diizinkan dan pastikan kirimannya tercantum di Ikiform.
3. Deploy pratinjau dan kirim lagi dari host pratinjau.
4. Kirim di produksi dan pastikan Anda mendarat di halaman terima kasih Anda.

## Pemecahan masalah

| Yang Anda lihat | Alasan | Solusi |
| --- | --- | --- |
| Formulir tampil sebagai kode di halaman | Shortcode diberi indentasi empat spasi di file Markdown | Pindahkan tag ke awal barisnya. |
| Separuh formulir dirender sebagai paragraf | Output shortcode berisi baris kosong, yang mengakhiri blok HTML Markdown | Gabungkan baris tanpa baris kosong, seperti di config di atas. |
| `SyntaxError: Unexpected token 'export'` saat Eleventy dijalankan | Config memakai sintaks ES module di proyek CommonJS | Ganti nama menjadi `eleventy.config.mjs`, atau tambahkan `"type": "module"` ke `package.json`. |
| Nunjucks atau Liquid tidak bisa menemukan tag `ikiform` | Eleventy tidak memuat file config | Pastikan file ada di root proyek dan bernama `eleventy.config.js` atau `.mjs`. |
| 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

- [Hugo](https://ikiform.com/id/docs/guides/hugo.md): Partial dan shortcode untuk file konten.
- [Jekyll](https://ikiform.com/id/docs/guides/jekyll.md): Include, dan penyiapan GitHub Pages.
- [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.