Hugo

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

セットアップ

1. 設定ファイルにフォーム ID を追加する

   baseURL = "https://example.com/"
   
   [params.ikiform]
   formId = "frm_xxxxxxxxxxxxxxxx"
   thanks = "/thanks/"

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

2. パーシャルを作成する

   {{ $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. ショートコードで包む

   {{ 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. 使う

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

   ---
   title: Contact
   ---
   
   Questions about pricing? Write to us.
   
   {{< ikiform subject="Pricing question" >}}

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

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

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

許可ドメイン

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

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

テストのチェックリスト

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

トラブルシューティング

関連ページ

• Jekyllインクルードと、GitHub Pages の設定。
• EleventyNunjucks、Liquid、Markdown 用のショートコード。
• HTML フォームリダイレクト、予約済みフィールド、ハニーポット。
• 許可ドメインオリジンの照合方法と、一致しない場合の動作。