Horizon v3.3.1 以降で、お問い合わせフォームの送信完了メッセージが表示されない不具合を、テーマ側でテンポラリーに修正する方法です。本来は Horizon 本体で直されるべき内容ですが、現時点で Shopify は Horizon リポジトリへの外部 PR を受け付けていないため、上流での修正が降ってくるまでのつなぎとして本対応を行います。
症状
Horizon v3.3.1 以降の blocks/contact-form.liquid でお問い合わせフォームを設置した場合、フォームを正しく送信しても「お問い合わせいただきありがとうございます。早急に返信いたします。」というメッセージが 一切表示されない 状態になります。送信自体は成功しており、Shopify Admin の「お問い合わせ」セクションには通知が届いていますが、ユーザー側には何も返らないため「送れていないのでは？」という不安を残してしまいます。
v3.2.1 以前では正常に送信完了メッセージが表示されていました。v3.3.1 で導入された変更が原因のリグレッションです（後述）。
原因 — v3.3.1 で追加された form.id == form_id チェック
v3.2.1 → v3.3.1 で blocks/contact-form.liquid に以下の変更が加えられました：
- 同一ページに複数の contact form が共存する状況を想定して
contact[id]という hidden input が追加された - その自分自身の
form_idと Shopify が返すform.idを比較し、一致したときだけ エラー表示／送信完了メッセージを出すように変更された
このロジック自体の意図は理解できます。ただし問題は、Shopify の Liquid Drop である {% form 'contact' %} から取得できる form.id が、id: パラメータで渡した値ではなく 常に空文字列 を返してしまう点です。結果、form.id == form_id が決して true にならず、送信完了メッセージが表示されない、という状況になっています。
デバッグ出力で実証
暫定対応のブランチ上で contact-form.liquid にデバッグ用の HTML コメントを仕込み、実際のフォーム送信後に DevTools の Elements タブから値を確認したところ、以下のような出力が得られました：
<!-- SH-DEBUG-CONTACT-FORM
block.id = "shopify://apps/..."
section.id = "template--..."
form_id = "ContactForm-shopify://apps/..."
form.id = "" ← 期待値: "ContactForm-..."
form.id == form_id = false ← 常に false
form.posted_successfully? = true ← 送信自体は成功
form.errors = null
-->form.posted_successfully? は正しく true を返しているため、Shopify 側はフォーム送信を正常に検知しています。「送信完了したか」の情報はテンプレートに到達しているのに、続く form.id == form_id ガードでブロックされているのが本症状の正体です。
暫定対応 — and form.id == form_id を取り除く
修正対象は blocks/contact-form.liquid 内の 2 箇所 のガード条件のみ。各 {%- if ... -%} から and form.id == form_id を削除し、v3.2.1 以前と同じシンプルな条件に戻します。
修正内容（赤の打ち消し線部分を削除）
{%- if form.errors and form.id == form_id -%}
<div class="contact-form__error" tabindex="-1" autofocus>
{{- 'icon-error.svg' | inline_asset_content -}}
{{ form.errors.translated_fields.email | capitalize }}
{{ form.errors.messages.email }}
</div>
{%- endif -%}
{%- if form.posted_successfully? and form.id == form_id -%}
<div class="contact-form__success" tabindex="-1" autofocus>
{{- 'icon-checkmark.svg' | inline_asset_content -}}
{{- 'blocks.contact_form.post_success' | t -}}
</div>
{%- endif -%}赤い打ち消し線が引かれた and form.id == form_id（同じ文字列が 2 箇所）を削除するだけ。それ以外の行はそのままで OK です。
修正後の最終形（コピペ用）
{%- if form.errors -%}
<div class="contact-form__error" tabindex="-1" autofocus>
{{- 'icon-error.svg' | inline_asset_content -}}
{{ form.errors.translated_fields.email | capitalize }}
{{ form.errors.messages.email }}
</div>
{%- endif -%}
{%- if form.posted_successfully? -%}
<div class="contact-form__success" tabindex="-1" autofocus>
{{- 'icon-checkmark.svg' | inline_asset_content -}}
{{- 'blocks.contact_form.post_success' | t -}}
</div>
{%- endif -%}同一ページに複数の contact form を置かない通常の運用であれば、これで送信完了メッセージが正しく表示されるようになります。
注意事項 — これはテンポラリー対応です
-
本対応はあくまでテンポラリーです。Horizon 本体（
Shopify/horizon）でform.idが期待通りの値を返すよう修正される、もしくはガード条件自体が見直されることが本来の解決策です。 - 2026年4月時点で Shopify は Horizon リポジトリに対する外部からの Pull Request を「現時点では受け付けていない（We are not accepting contributions to Horizon at this time）」と明言しています。Issue を立てることはできますが、修正タイミングは Shopify 次第になります。
- 同一ページに複数の contact form を共存させる必要がある場合は、本対応を行わず、別の判別ロジック（例えば自前で隠し input を持たせて Liquid 側で判定する等）を検討してください。
- Horizon が新しいバージョンで上記ガードを見直した場合、このテンポラリー対応は速やかに巻き戻し、上流の挙動に合わせてください。
テーマファイルへの影響
修正対象は blocks/contact-form.liquid の 1 ファイルのみです。Horizon のテーマ更新時には上書きされるため、更新後に毎回再適用するか、上流が直っていれば外す、という運用になります。
結論
あくまで Horizon 本体が修正されるまでのテンポラリーな対応として、blocks/contact-form.liquid から壊れているガード条件を取り除き、ユーザーに送信完了メッセージが届く状態を最低限の改修で取り戻します。上流の修正が降ってきたら、この対応は不要になります。
