liquid icon indicating copy to clipboard operation
liquid copied to clipboard

Form tag doesn't include the form.id

Open naxorn opened this issue 3 years ago • 5 comments

Issue

When creating a form such as

{% form 'customer', id: 'ContactFooter' %}
  <span>{{ form.id }}</span>
  [...rest of content...]
{% endform %}

the form.id is nil

Expected

The form object id should be the id of the submitted form and be available within the form. This is especially useful when you might have multiple forms on the page and you want to use form.errors or form.posted_successfully?. Currently, you cannot identify which form actually has the errors. If you try to use those properties, both forms display errors. It would be awesome, if you could do something like:


{% form 'customer', id: 'SomeOtherForm' %}
  {% if form.errors and form.id == 'SomeOtherForm' %}
  [...errors for SomeOtherForm...]
  {% endif %}
{% endform %}


[...more content on the same page...]

{% form 'customer', id: 'ContactFooter' %}
  {% if form.errors and form.id == 'ContactFooter' %}
  [...errors for ContactFooter...]
  {% endif %}
{% endform %}

Discussion

Is having form.id always equal to nil expected behaviour?

naxorn avatar Oct 31 '22 01:10 naxorn

Hi, did you ever managed to fix this? I having the exact same problem right now. Have two different customer subscribe forms on my page and every time when one getting submit, the other one also shows a succes massage.

nathanot14 avatar Jan 27 '23 20:01 nathanot14

No. Most of my hacks rely on the URL query parameters including 'unique' information. Of course, it would be fine if at least the URL always had the form id, such as "[url]?customer_posted=true#FORM-ID". Unfortunately, it is not always there such as when you encounter reCAPTCHA (#1511).

On my site, I limited myself to only a single customer subscribe form. Plus, I had to add javascript on the subscribe form to add back the URL hash when I see that the URL showed a 'customer' type form was posted. That way the page would jump back to the form on success.

Perhaps, you could have one 'form' and the rest of the subscribe parts as just links to the main form?

naxorn avatar Jan 27 '23 23:01 naxorn

Is there any news regarding this problem? I have the exactly same problem and knowing the form.id could resolve the situation.

spani85 avatar Jan 24 '24 13:01 spani85

I'm having the same issue. Any ideas at all? What is the purpose of {{ form.id }}? Documentation is sparse https://shopify.dev/docs/api/liquid/objects/form#form-id

It appears to be some sort of internal ID used in https://github.com/Shopify/dawn/blob/main/sections/main-addresses.liquid. It appears when I edit an address at /account/addresses. Screenshot: https://share.cleanshot.com/8qc1XKhTC4rfyz3kGLWs

ademers avatar Apr 26 '24 20:04 ademers

I'm having the same issue, it seems that it is not working for all the forms. I've just found that the product form use an id that is "product_form_{{ product.id }}". May be there is a similar trick for the rest of the forms.

eloyesp avatar Jun 10 '24 14:06 eloyesp