# Hugo

> サイトのパラメーターから Ikiform のフォームを描画する Hugo のパーシャルとショートコード。レイアウトでも Markdown のコンテンツでも使えます。

Hugo はプレーンな HTML を生成し、Ikiform に必要なのはプレーンなフォームの送信だけなので、追加する JavaScript はありません。Hugo 特有の落とし穴は Markdown だけです。Hugo のレンダラーは `markup.goldmark.renderer.unsafe` をオンにしない限りコンテンツファイルの生の HTML を削除し、貼り付けたフォームは `<!-- raw HTML omitted -->` になってしまいます。ショートコードなら HTML をテンプレートの中に置けます。

## セットアップ

### ステップ 1: 設定ファイルにフォーム ID を追加する

`hugo.toml`:

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

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

`baseURL` は本物の `https:` のアドレスにする必要があります。パーシャルはこれを使って `thanks` を絶対 URL にし、Ikiform は `https:` のリダイレクトにしか従いません。

### ステップ 2: パーシャルを作成する

`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>
```

空でも、必ず `dict` を付けて呼び出してください。キーはすべて任意で、省略するとサイトのパラメーターが使われます。

### ステップ 3: ショートコードで包む

`layouts/_shortcodes/ikiform.html`:

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

Hugo 0.146 でテンプレートの場所が `layouts/_partials` と `layouts/_shortcodes` に変わりました。それより古いバージョンでは `layouts/partials` と `layouts/shortcodes` を使ってください。

### ステップ 4: 使う

任意のコンテンツファイルで:

`content/contact.md`:

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

Questions about pricing? Write to us.

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

または、すべてのページにフォームを置くならレイアウトで:

`layouts/_partials/footer.html`:

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

リダイレクト用に `content/thanks.md` ページを追加します。Ikiform が `_redirect` に従うのは、フォームの許可ドメインに自分のサイトが含まれている場合だけです。含まれていない場合、訪問者には Ikiform のサンクスページが表示されます。[_redirect のルール](https://ikiform.com/ja/docs/html.md#redirect-rules)を参照してください。

## 許可ドメイン

本番のドメインに加えて、ビルドしたサイトをプレビューするすべての場所を登録します。

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

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

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

1. `hugo server` を実行してページを開き、ソースを表示します。`<!-- raw HTML omitted -->` ではなく `<form>` が表示されるはずです。
2. 許可ドメインに `localhost` を入れて、ローカルで送信します。`absURL` は `http://localhost` のアドレスを返し、`https:` のリダイレクトにしか従わないため、Ikiform のサンクスページに移動します。
3. プレビューをデプロイしてそこから送信し、送信データが Ikiform に表示され、スパムになっていないことを確認します。
4. 本番のドメインで送信し、`/thanks/` に移動することを確認します。

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

| 症状 | 原因 | 対処 |
| --- | --- | --- |
| フォームがあるべき場所に `<!-- raw HTML omitted -->` が表示される | フォームを Markdown に直接貼り付けた | ショートコードを使います。 |
| Hugo が `template for shortcode "ikiform" not found` で失敗する | ショートコードのファイルが、使っている Hugo のバージョンが読まないフォルダーにある | 0.146 以降は `layouts/_shortcodes`、それより前は `layouts/shortcodes` を使います。 |
| 本番で `/thanks/` ではなく Ikiform のサンクスページが表示される | 許可ドメインがない、または `baseURL` が `http:` | ドメインを追加し、`baseURL` を `https:` のアドレスにします。 |
| 送信後に `404 not_found` が表示される | `params.ikiform.formId` がないため、action が `/f/` で終わっている | `hugo.toml` にフォーム ID を設定します。 |
| 送信データが `origin_mismatch` でスパムフィルターの下に届く | 送信したページが、フォームの許可ドメインに含まれていない | 上の表のホストを追加します。**Reject** を選んでいる場合、同じ送信には代わりに `403 origin_not_allowed` が返ります。 |

## 関連ページ

- [Jekyll](https://ikiform.com/ja/docs/guides/jekyll.md): インクルードと、GitHub Pages の設定。
- [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): オリジンの照合方法と、一致しない場合の動作。