Skip to product information
1 of 1
Published:2026.04.27

[Horizon] Temporary Fix for Missing Contact Form Success Message

[Horizon] Temporary Fix for Missing Contact Form Success Message

Applications

  • お問い合わせフォーム編集
View full details

A temporary theme-side fix for the bug introduced in Horizon v3.3.1, where the contact form's success message no longer appears after submission. The proper fix should land in Horizon itself, but at the time of writing Shopify is not accepting external PRs against the Horizon repository, so this serves as a stopgap until the upstream fix arrives.

The success message that no longer appears in Horizon v3.3.1 and later

The symptom

With the contact form rendered via blocks/contact-form.liquid in Horizon v3.3.1 or later, submitting the form successfully shows no confirmation message at all — the "Thank you for your message. We'll be in touch as soon as we can." text never appears. The submission itself goes through (it lands in the Shopify Admin "Inbox / Contacts" area), but the customer is left wondering whether anything happened.

v3.2.1 and earlier displayed the success message correctly. This is a regression introduced by changes shipped in v3.3.1 (details below).

Root cause — the form.id == form_id guard added in v3.3.1

The diff between v3.2.1 and v3.3.1 introduces two changes to blocks/contact-form.liquid:

  1. A hidden contact[id] input is added so that multiple contact forms can coexist on the same page.
  2. The error / success branches are now gated by an extra condition that compares the block's own form_id against form.id returned by Shopify — only the matching form should render the message.

The intent makes sense, but in practice the Liquid {% form 'contact' %} Drop's form.id property does not return the value passed via id: — it returns an empty string. As a result, form.id == form_id is never true, and the success message is permanently suppressed.

Confirmed empirically via debug output

On a working branch I added a debug HTML comment to contact-form.liquid and inspected it via DevTools after submitting the form. The values were:

<!-- SH-DEBUG-CONTACT-FORM
  block.id                     = "shopify://apps/..."
  section.id                   = "template--..."
  form_id                      = "ContactForm-shopify://apps/..."
  form.id                      = ""                ← expected: "ContactForm-..."
  form.id == form_id           = false             ← always false
  form.posted_successfully?    = true              ← submission itself succeeded
  form.errors                  = null
-->

form.posted_successfully? correctly returns true, meaning Shopify is handing the success state to the template. The information is reaching the template — it's just being thrown away by the broken form.id == form_id guard.

The temporary fix — drop and form.id == form_id

The change is confined to two guards inside blocks/contact-form.liquid. Remove and form.id == form_id from each {%- if ... -%}, restoring the simpler v3.2.1-era condition.

What to remove (struck-through portions)

{%- 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 -%}

The struck-through and form.id == form_id appears twice — delete both occurrences. Every other line stays untouched.

Final form after the fix (copy-paste friendly)

{%- 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 -%}

For the typical case of one contact form per page, this is enough to restore the success message.

Caveats — this is a temporary fix

  • Treat this as temporary. The proper resolution is for Horizon itself (Shopify/horizon) to either return the expected value from form.id, or to revisit the guard condition altogether.
  • As of April 2026, Shopify states explicitly on the Horizon repository that "We are not accepting contributions to Horizon at this time." Issues can be opened, but the timing of any upstream fix is at Shopify's discretion.
  • If you actually need multiple contact forms on the same page, do not apply this fix — instead consider a different disambiguation strategy (e.g. a custom hidden input you compare yourself in Liquid).
  • When Horizon ships a release that revisits this guard, roll back this temporary fix promptly and follow upstream behaviour again.

Impact on theme files

Only blocks/contact-form.liquid is touched. Because that file is part of the upstream Horizon theme, Horizon updates will overwrite it — you'll either need to reapply this patch on every update, or drop the patch once upstream is fixed.

Conclusion

This is purely a temporary fix until Horizon itself is corrected. We strip the broken guard from blocks/contact-form.liquid with the smallest possible change so that customers see the success message again. Once the upstream fix lands, this patch should be removed.

After making a purchase (all items are ¥0), you will be able to view the sample code.

If you have already made a purchase, please login here.

Sample Codes

Test Theme :Horizon 3.4.0

blocks/contact-form.liquid(2 箇所のガード条件から and form.id == form_id を削除)

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