{"product_id":"2026-04-29","title":"【Horizon】テーマファイルのコードは変更せずにお問い合わせフォームに項目を追加する設定例","description":"\u003cp\u003eHorizonテーマのお問い合わせフォームに「問い合わせ種別」「注文番号」などの独自項目を追加したい場合、通常はテーマファイルの編集が必要です。このTIPSでは、\u003cstrong\u003eテーマファイルを一切変更せずに\u003c\/strong\u003eテーマエディタのカスタムLiquidブロックだけで項目を追加する方法と設定例を紹介します。Horizonのアップデートによる影響も受けません。\u003c\/p\u003e\n\n\u003ch2\u003e仕組み\u003c\/h2\u003e\n\u003cp\u003eお問い合わせページのセクションには「問い合わせフォーム」ブロックと並列でカスタムLiquidブロックを追加できます。このブロック内のJavaScriptが、ページ読み込み時に \u003ccode\u003e.contact-form__form\u003c\/code\u003e を検索して各フィールドを動的に挿入します。挿入した要素はフォームのDOM内に入るため、送信時にShopifyが \u003ccode\u003econtact[項目名]\u003c\/code\u003e として処理し、通知メールに自動で含まれます。\u003c\/p\u003e\n\n\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-29_1.png?v=1777440739\" alt=\"カスタムLiquidブロックでお問い合わせフォームに項目追加\" style=\"max-width:100%;border-radius:8px;\"\u003e\n\n\u003ch2\u003e手順\u003c\/h2\u003e\n\u003col\u003e\n  \u003cli\u003eShopify管理画面 → テーマ → カスタマイズ\u003c\/li\u003e\n  \u003cli\u003eお問い合わせページを開く\u003c\/li\u003e\n  \u003cli\u003e左パネルで「問い合わせフォーム」セクションを選択\u003c\/li\u003e\n  \u003cli\u003e「ブロックを追加」→「カスタムLiquid」を選択\u003c\/li\u003e\n  \u003cli\u003e購入後にダウンロードできるコードを貼り付けて保存\u003c\/li\u003e\n\u003c\/ol\u003e\n\n\u003ch2\u003e設定コード（購入後ダウンロード）\u003c\/h2\u003e\n\u003cp\u003eコード内の \u003ccode\u003efields\u003c\/code\u003e 配列を編集することで、追加する項目を自由に変更できます。\u003c\/p\u003e\n\n\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-29_2.png?v=1777442989\" alt=\"fields 配列の設定例\" style=\"max-width:100%;border-radius:8px;\"\u003e\n\n\u003ch2\u003efields 配列のカスタマイズ例\u003c\/h2\u003e\n\u003cp\u003e1オブジェクト = 1フィールドです。配列に追記・削除するだけで項目を自由に増減できます。\u003c\/p\u003e\n\n\u003ch3\u003e例1：電話番号のみ追加\u003c\/h3\u003e\n\u003cpre style=\"background:#f6f8fa;padding:1em;border-radius:6px;line-height:1.7;overflow-x:auto;font-size:.9em;\"\u003e\u003ccode\u003evar fields = [\n  { type: 'tel', label: '電話番号', placeholder: '例：090-1234-5678', pattern: '[0-9\\\\-]*' }\n];\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch3\u003e例2：問い合わせ種別 + 注文番号\u003c\/h3\u003e\n\u003cpre style=\"background:#f6f8fa;padding:1em;border-radius:6px;line-height:1.7;overflow-x:auto;font-size:.9em;\"\u003e\u003ccode\u003evar fields = [\n  {\n    type: 'select',\n    label: '問い合わせ種別',\n    required: true,\n    options: ['商品について', '注文・配送について', '返品・交換について', 'その他']\n  },\n  { type: 'text', label: '注文番号', placeholder: '注文番号（例：#1234）' }\n];\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch3\u003e例3：select・radio・text のフル構成（購入コードのデフォルト）\u003c\/h3\u003e\n\u003cpre style=\"background:#f6f8fa;padding:1em;border-radius:6px;line-height:1.7;overflow-x:auto;font-size:.9em;\"\u003e\u003ccode\u003evar fields = [\n  {\n    type: 'select',\n    label: '問い合わせ種別',\n    required: true,\n    options: ['商品について', '注文・配送について', '返品・交換について', 'その他']\n  },\n  {\n    type: 'radio',\n    label: '返信方法',\n    options: ['メール', '電話']\n  },\n  { type: 'text', label: '注文番号', placeholder: '注文番号（例：#1234）' }\n];\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eフィールドタイプ一覧\u003c\/h2\u003e\n\u003ctable style=\"width:100%;border-collapse:collapse;font-size:.9em;\"\u003e\n  \u003cthead\u003e\n    \u003ctr style=\"background:#f6f8fa;\"\u003e\n      \u003cth style=\"padding:.5em .75em;text-align:left;border:1px solid #e0e0e0;\"\u003etype\u003c\/th\u003e\n      \u003cth style=\"padding:.5em .75em;text-align:left;border:1px solid #e0e0e0;\"\u003e入力要素\u003c\/th\u003e\n      \u003cth style=\"padding:.5em .75em;text-align:left;border:1px solid #e0e0e0;\"\u003e主なプロパティ\u003c\/th\u003e\n    \u003c\/tr\u003e\n  \u003c\/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e\u003ccode\u003eselect\u003c\/code\u003e\u003c\/td\u003e\n      \u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003eプルダウン\u003c\/td\u003e\n      \u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e\n\u003ccode\u003elabel\u003c\/code\u003e \/ \u003ccode\u003erequired\u003c\/code\u003e \/ \u003ccode\u003eoptions\u003c\/code\u003e（配列）\u003c\/td\u003e\n    \u003c\/tr\u003e\n    \u003ctr\u003e\n      \u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e\u003ccode\u003eradio\u003c\/code\u003e\u003c\/td\u003e\n      \u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003eラジオボタン\u003c\/td\u003e\n      \u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e\n\u003ccode\u003elabel\u003c\/code\u003e \/ \u003ccode\u003eoptions\u003c\/code\u003e（配列）\u003c\/td\u003e\n    \u003c\/tr\u003e\n    \u003ctr\u003e\n      \u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e\u003ccode\u003etext\u003c\/code\u003e\u003c\/td\u003e\n      \u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003eテキスト入力\u003c\/td\u003e\n      \u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e\n\u003ccode\u003elabel\u003c\/code\u003e \/ \u003ccode\u003eplaceholder\u003c\/code\u003e \/ \u003ccode\u003erequired\u003c\/code\u003e\n\u003c\/td\u003e\n    \u003c\/tr\u003e\n    \u003ctr\u003e\n      \u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e\u003ccode\u003etel\u003c\/code\u003e\u003c\/td\u003e\n      \u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e電話番号入力\u003c\/td\u003e\n      \u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e\n\u003ccode\u003elabel\u003c\/code\u003e \/ \u003ccode\u003eplaceholder\u003c\/code\u003e \/ \u003ccode\u003epattern\u003c\/code\u003e\n\u003c\/td\u003e\n    \u003c\/tr\u003e\n  \u003c\/tbody\u003e\n\u003c\/table\u003e\n\n\u003ch2\u003e挿入位置について\u003c\/h2\u003e\n\u003cp\u003eフィールドは常に本文テキストエリア（\u003ccode\u003etextarea[name=\"contact[body]\"]\u003c\/code\u003e）の直前に挿入されます。このセレクタはHorizonの標準実装で固定されているため、テーマアップデート後も位置が変わりません。\u003c\/p\u003e\n\n\u003ch2\u003e注意事項\u003c\/h2\u003e\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003eカスタムLiquidは「問い合わせフォーム」セクション内に追加すること\u003c\/strong\u003e：他のセクションに追加すると \u003ccode\u003e.contact-form__form\u003c\/code\u003e が見つからず動作しません。\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003elabel の値が通知メールの項目名になる\u003c\/strong\u003e：\u003ccode\u003econtact[問い合わせ種別]\u003c\/code\u003e のように送信されるため、わかりやすい名前を設定してください。\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eテーマアップデートの影響なし\u003c\/strong\u003e：テーマファイルを変更しないため、Horizonのアップデート後も動作し続けます。\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003erequired バリデーション\u003c\/strong\u003e：プルダウンの \u003ccode\u003erequired: true\u003c\/code\u003e はブラウザのネイティブバリデーションで動作します（未選択のまま送信するとエラーが表示されます）。\u003c\/li\u003e\n\u003c\/ul\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48820428439803,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-29_1.png?v=1777440739","url":"https:\/\/store-dojo.com\/products\/2026-04-29","provider":"STORE DOJO","version":"1.0","type":"link"}