Jekyll

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

セットアップ

1. _config.yml に設定を追加する

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

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

2. インクルードを作成する

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

   ---
   layout: page
   title: Contact
   ---
   
   Questions about pricing? Write to us.
   
   {% include ikiform-form.html subject="Pricing question" %}

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

4. サンクスページを追加する

   ---
   layout: page
   title: Thanks
   permalink: /thanks/
   ---
   
   Thanks, we got your message.

_redirect に従うのは、フォームの許可ドメインに自分のサイトが含まれている場合だけです。_redirect のルールを参照してください。

許可ドメイン

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

• 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/ に移動することを確認します。

トラブルシューティング

関連ページ

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