Liquid form feedback when multiple forms the page

Liquid form feedback when multiple forms the page

Dayjo
Shopify Partner
4 0 1

Hello, 

 

The theme I am using - Refresh - has a newsletter (customer) form in the footer. 

 

I have a liquid template for outputting a contact form, customer form, or potentially multiple different forms.

 

According to the liquid documentation the form object provides; Information about a form created by a form tag.

 

However, the form.posted_successfully and form.errors etc do not seem to relate to the form created by the form tag at all, they related to whichever form has been posted. This causes errors (or success messages) to appear on every form, regardless of which form has been submitted. 

 

This is problematic in that if I have a newsletter sign up form (customer) form, and a contact form on the same page, there's feedback on both which is confusing to the user. 

 

Additionally, the form.id property is always blank, despite the fact that I am setting ids on each form

 

I'm not sure if this is bug, or just that the documentation is not really explaining that this is how the form submission works, but it would be good to get some clarification as to how I'm expected to show errors on the relevant form and not on other forms on the page.

 

Regards,

 

Joel

Reply 1 (1)

Dayjo
Shopify Partner
4 0 1

For anyone else having this issue, I am currently using a CSS 'solution' which hides all form__message elements and uses :target to show the ones related to the submitted form. I'm not counting this necessarily as a solution to the issue as either the documentation needs updating, or the form object bug needs fixing. 

 

<style>
  form .form__message {
    display: none;
  }
  form:target .form__message {
    display: block;
  }
</style>