【Horizon】テーマファイルのコードは変更せずにお問い合わせフォームに項目を追加する設定例

Horizonテーマのお問い合わせフォームに「問い合わせ種別」「注文番号」などの独自項目を追加したい場合、通常はテーマファイルの編集が必要です。このTIPSでは、テーマファイルを一切変更せずにテーマエディタのカスタムLiquidブロックだけで項目を追加する方法と設定例を紹介します。Horizonのアップデートによる影響も受けません。

仕組み

お問い合わせページのセクションには「問い合わせフォーム」ブロックと並列でカスタムLiquidブロックを追加できます。このブロック内のJavaScriptが、ページ読み込み時に .contact-form__form を検索して各フィールドを動的に挿入します。挿入した要素はフォームのDOM内に入るため、送信時にShopifyが contact[項目名] として処理し、通知メールに自動で含まれます。

手順

1. Shopify管理画面 → テーマ → カスタマイズ
2. お問い合わせページを開く
3. 左パネルで「問い合わせフォーム」セクションを選択
4. 「ブロックを追加」→「カスタムLiquid」を選択
5. 購入後にダウンロードできるコードを貼り付けて保存

設定コード（購入後ダウンロード）

コード内の fields 配列を編集することで、追加する項目を自由に変更できます。

fields 配列のカスタマイズ例

1オブジェクト = 1フィールドです。配列に追記・削除するだけで項目を自由に増減できます。

例1：電話番号のみ追加

var fields = [
  { type: 'tel', label: '電話番号', placeholder: '例：090-1234-5678', pattern: '[0-9\\-]*' }
];

例2：問い合わせ種別 + 注文番号

var fields = [
  {
    type: 'select',
    label: '問い合わせ種別',
    required: true,
    options: ['商品について', '注文・配送について', '返品・交換について', 'その他']
  },
  { type: 'text', label: '注文番号', placeholder: '注文番号（例：#1234）' }
];

例3：select・radio・text のフル構成（購入コードのデフォルト）

var fields = [
  {
    type: 'select',
    label: '問い合わせ種別',
    required: true,
    options: ['商品について', '注文・配送について', '返品・交換について', 'その他']
  },
  {
    type: 'radio',
    label: '返信方法',
    options: ['メール', '電話']
  },
  { type: 'text', label: '注文番号', placeholder: '注文番号（例：#1234）' }
];

フィールドタイプ一覧

挿入位置について

フィールドは常に本文テキストエリア（textarea[name="contact[body]"]）の直前に挿入されます。このセレクタはHorizonの標準実装で固定されているため、テーマアップデート後も位置が変わりません。

注意事項

• カスタムLiquidは「問い合わせフォーム」セクション内に追加すること：他のセクションに追加すると .contact-form__form が見つからず動作しません。
• label の値が通知メールの項目名になる：contact[問い合わせ種別] のように送信されるため、わかりやすい名前を設定してください。
• テーマアップデートの影響なし：テーマファイルを変更しないため、Horizonのアップデート後も動作し続けます。
• required バリデーション：プルダウンの required: true はブラウザのネイティブバリデーションで動作します（未選択のまま送信するとエラーが表示されます）。