Eleventy

Eleventy は静的な HTML を出力するので、フォームはクライアントの JavaScript なしで送信されます。ショートコードならマークアップを 1 か所にまとめられ、Nunjucks、Liquid、Markdown のどのファイルでも同じように動きます。

セットアップ

1. ショートコードを追加する

   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"),
     );
   }

   • 行は意図的に空行なしでつなげています。Markdown では空行で HTML ブロックが終わり、フォームの残りがテキストとして扱われてしまいます。
   • これは ES モジュールの構文を使っています。package.json に "type": "module" がない場合は、ファイル名を eleventy.config.mjs にしてください。

2. フォーム ID をグローバルデータに置く

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

   グローバルデータは、すべてのテンプレートで ikiform として使えます。Ikiform はそれ以外のリダイレクトを無視するため、サンクスページの URL は https: の絶対 URL にする必要があります。

3. 使う

   ---
   title: Contact
   ---
   
   Questions about pricing? Write to us.
   
   {% ikiform ikiform.formId, ikiform.thanks, "Pricing question" %}

   Markdown ファイルはデフォルトで Liquid で処理されるので、タグはそのまま動きます。タグは独立した行に置き、4 つのスペースでインデントしないでください。インデントすると Markdown がコードブロックとして描画します。同じタグは .njk と .liquid のファイルでも動きます。

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

許可ドメイン

本番とそれぞれのプレビューのホストを登録します。Eleventy のサイトは Netlify や Cloudflare Pages にデプロイされることが多く、プレビューの扱いはそれぞれ異なります。

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

テストのチェックリスト

1. 開発サーバーを実行し、ページのソースを表示します。フォームは <pre><code> ブロックの中ではなく、プレーンな HTML になっているはずです。
2. 許可ドメインに localhost を入れてローカルで送信し、送信データが Ikiform に表示されることを確認します。
3. プレビューをデプロイし、プレビューのホストからもう一度送信します。
4. 本番で送信し、サンクスページに移動することを確認します。

トラブルシューティング

関連ページ

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