# Jekyll

> _config.yml から Ikiform のフォームを描画する Jekyll のインクルード。GitHub Pages でも独自ドメインでもリダイレクトが動きます。

Jekyll のサイトは静的なので、プレーンなフォームの送信に向いています。フォームをインクルードにしておけば、すべてのページで同じマークアップを使え、フォーム ID も 1 か所で管理できます。

## セットアップ

### ステップ 1: _config.yml に設定を追加する

`_config.yml`:

```yaml
url: "https://example.com"
ikiform:
  form_id: frm_xxxxxxxxxxxxxxxx
  thanks: /thanks/
```

インクルードは `absolute_url` でリダイレクトを組み立てるので、`url` が必要です。これがないとリダイレクトはパスだけになり、Ikiform は完全な `https:` の URL 以外を無視します。GitHub Pages のプロジェクトサイトでは `baseurl: /repo` も設定してください。`absolute_url` が自動で付け加えます。

### ステップ 2: インクルードを作成する

`_includes/ikiform-form.html`:

```liquid
{%- assign form_id = include.form_id | default: site.ikiform.form_id -%}
{%- assign thanks = include.thanks | default: site.ikiform.thanks -%}
<form class="ikiform" action="https://ikiform.com/f/{{ form_id }}" method="post">
  <label>Email <input name="email" type="email" autocomplete="email" required></label>
  <label>Message <textarea name="message" rows="5"></textarea></label>
  {%- if include.subject %}
  <input type="hidden" name="_subject" value="{{ include.subject | escape }}">
  {%- endif %}
  {%- if thanks %}
  <input type="hidden" name="_redirect" value="{{ thanks | absolute_url }}">
  {%- endif %}
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <button type="submit">{{ include.button | default: "Send" }}</button>
</form>
```

### ステップ 3: 使う

`contact.md`:

```liquid
---
layout: page
title: Contact
---

Questions about pricing? Write to us.

{% include ikiform-form.html subject="Pricing question" %}
```

インクルードは固定ページ、投稿、レイアウトで使えます。別のフォームを使うには `form_id`、別のリダイレクト先には `thanks`、ボタンのテキストには `button` を渡します。

### ステップ 4: サンクスページを追加する

`thanks.md`:

```liquid
---
layout: page
title: Thanks
permalink: /thanks/
---

Thanks, we got your message.
```

`_redirect` に従うのは、フォームの許可ドメインに自分のサイトが含まれている場合だけです。[_redirect のルール](https://ikiform.com/ja/docs/html.md#redirect-rules)を参照してください。

## 許可ドメイン

Jekyll のホスティング先としては GitHub Pages が一般的なので、`github.io` のホストと独自ドメインの 2 つを登録することがよくあります。

| フォームが動く場所 | 許可ドメインに追加するもの |
| --- | --- |
| `bundle exec jekyll serve` | `localhost`。`http://localhost:4000` に一致します。Ikiform が比較するのはホスト名だけで、ポートは比較しません。 |
| GitHub Pages | `username.github.io`。`username.github.io/repo` のプロジェクトサイトも同じホストを使うので、1 つの登録ですべてカバーできます。 |
| GitHub Pages の独自ドメイン | `example.com`（`www.example.com` も含まれます） |
| Netlify | `your-site.netlify.app`。デプロイプレビュー（`deploy-preview-12--your-site.netlify.app`）やブランチデプロイ（`branch--your-site.netlify.app`）はそのサブドメインではないので、テストする間はプレビューの正確なホストを追加してください。 |

- `github.io` だけを追加しないでください。他の人のサイトも含め、そのホスト上のすべてのサイトが一致してしまいます。

## テストのチェックリスト

1. `bundle exec jekyll serve` を実行し、ページのソースを表示します。`action` がフォーム ID で終わっているはずです。
2. ローカルで送信します。`jekyll serve` は `url` を `http://localhost:4000` に設定し、`http:` のリダイレクトには従わないため、Ikiform のサンクスページに移動します。
3. プッシュして Pages のビルドを待ち、`username.github.io` から送信します。送信データがスパムになっていないことを確認します。
4. 独自ドメインで送信し、`/thanks/` に移動することを確認します。

## トラブルシューティング

| 症状 | 原因 | 対処 |
| --- | --- | --- |
| `Could not locate the included file 'ikiform-form.html'` | ファイルが `_includes` にない、または名前が違う | `_includes/ikiform-form.html` に移動します。 |
| 本番のサイトで `/thanks/` ではなく Ikiform のサンクスページが表示される | `_config.yml` に `url` がない、またはフォームに許可ドメインがない | `url` を `https:` のアドレスにして、ドメインを追加します。 |
| 送信後に `404 not_found` が表示される | `site.ikiform.form_id` が空なので、action が `/f/` で終わっている | `_config.yml` の `ikiform:` の下のインデントを確認します。 |
| 送信データが `origin_mismatch` でスパムフィルターの下に届く | 送信したページが、フォームの許可ドメインに含まれていない | 上の表のホストを追加します。**Reject** を選んでいる場合、同じ送信には代わりに `403 origin_not_allowed` が返ります。 |

## 関連ページ

- [Hugo](https://ikiform.com/ja/docs/guides/hugo.md): パーシャルと、コンテンツファイル用のショートコード。
- [Eleventy](https://ikiform.com/ja/docs/guides/eleventy.md): Nunjucks、Liquid、Markdown 用のショートコード。
- [HTML フォーム](https://ikiform.com/ja/docs/html.md): リダイレクト、予約済みフィールド、ハニーポット。
- [許可ドメイン](https://ikiform.com/ja/docs/spam.md#allowed-domains): オリジンの照合方法と、一致しない場合の動作。