Handling form errors on a page with multiple contact forms

[Sambdev]

Good evening Shopifyer's

I have one page with 3 contact forms, all with unique IDs set like so:

{% form 'contact', id: section.settings['form-id'] %}

I am having issues getting the form errors because each form is displaying the form errors because the form object is being picked up.

{%- if form.errors -%}

That is present between each form tag and so is showing up in all the forms.

Is there a way to differentiate between the form errors being received like checking what form ID they have/relate to?

Any pointers to get that working?

Many thanks

[PaulNewton · Accepted solution]

Evening, this line gives all forms the same exact same ID attribute value,  unless they are all unique sections with unique settings.  

{% form 'contact', id: section.settings['form-id'] %}

 Generally it should be

{%- assign form_id = section.settings['form-id'] | append: '-' | append: section.id -%}
{% form 'contact', id: form_id  %}

 How dawn's handles product form name-spacing

https://github.com/Shopify/dawn/blob/main/sections/main-product.liquid#L69 

Beyond that I don't think form_errors return any identifying reference information about a form

https://shopify.dev/docs/api/liquid/objects/form_errors , just spit out the object and see if it does.

You may just need to track the state of which form was submitted to associate the errors to the proper form. Spitball  - for javascriptless maybe see if you can set a cart-attribute using return_to redirects to indicate the "active" form in liquid.

When dot notation would work fine to get a value avoid using square bracket [ ] notation.

SBN generally indicates something is being hardcoded like a handle , or the value passed to SBN will be dynamic.

{% form 'contact', id: section.settings.form_id %}

[Sambdev]

Thanks for your time on this Paul.

Actually using the SBN in this line was only being used on one contact form.

{% form 'contact', id: section.settings['form-id'] %}

So I am using this on all the contact forms.

{% form 'contact', id: section.settings.form-id %}

I'm also having issues with the form not persisting the data. It shows up in the URL bar though.

But more specifically, I am constantly getting an invalid email error on this form and not sure why. The email is correct when I enter it. If you can help on this one big thanks!

<article class="section-content">
        {% form 'contact', id: section.settings.form-id %}

          {%- if form.posted_successfully? -%}
            <h3 class="form-status form-status-list form__message" tabindex="-1" autofocus>
              {{ 'contact.form.post_success' | t }}
            </h3>
            {%- elsif form.errors -%}
            <div class="form__message">
              <h2 class="form-status caption-large text-body" role="alert" tabindex="-1" autofocus>
                {{ 'contact.form.error_heading' | t }}
              </h2>
            </div>
          {%- endif -%}

          <label for="corporateName" class="hide">{{ 'contact.form.name' | t }}</label>
          <input
            id="corporateName"
            type="text"
            name="contact[corporate_name]"
            placeholder="{{ 'contact.form.name' | t }}"
            autocomplete="name"
            value="{% if form.corporate_name %}{{ form.corporate_name }}{% elsif customer %}{{ customer.name }}{% endif %}"
            tabindex="1"
          >

          <label for="corporateEmail" class="hide">{{ 'contact.form.email' | t }}</label>
          {%- if form.errors contains 'email' -%}
            <small class="contact__field-error" id="contact-email-error">
              <span class="visually-hidden">{{ 'general.accessibility.error' | t }}</span>
              <span class="form__message">
                {{- form.errors.translated_fields.email | capitalize }}
                {{ form.errors.messages.email -}}
              </span>
            </small>
          {%- endif -%}
          <input
            id="corporateEmail"
            type="email"
            name="contact[corporate_email]"
            placeholder="{{ 'contact.form.email' | t }}"
            autocapitalize="off"
            value="{% if form.corporate_email %}{{ form.corporate_email }}{% elsif customer %}{{ customer.email }}{% endif %}"
            required="required"
            aria-required="true"
            {% if form.errors contains 'email' %}
              aria-invalid="true"
              aria-describedby="corporate-email-error"
            {% endif %}
          >

          <label for="corporatePhone" class="hide">{{ 'contact.form.phone' | t }}</label>
          <input
            type="tel"
            id="corporatePhone"
            autocomplete="tel"
            name="contact[corporate_phone]"
            pattern="[0-9\-]*"
            placeholder="{{ 'contact.form.phone' | t }}"
            value="{% if form.corporate_phone %}{{ form.corporate_phone }}{% elsif customer %}{{ customer.phone }}{% endif %}"
          >

          <label for="numOfRecipients">{{ 'contact.form.num_of_recipients' | t }}</label>
          <input id="numOfRecipients" type="text" name="contact[num_of_recipients]" autocomplete="off" value="{% if form.num_of_recipients %}{{ form.num_of_recipients }}{% endif %}">

          <label for="oneAddressOrMultiple">{{ 'contact.form.one_address_or_multiple' | t }}</label>
          <input id="oneAddressOrMultiple" type="text" name="contact[one_address_or_multiple]" autocomplete="off" value="{% if form.one_address_or_multiple %}{{ form.one_address_or_multiple }}{% endif %}">

          <label for="giftNote">{{ 'contact.form.handwritten_gift_note' | t }}</label>
          <input id="giftNote" type="text" name="contact[handwritten_gift_note]" autocomplete="off" value="{% if form.handwritten_gift_note %}{{ form.handwritten_gift_note }}{% endif %}">

          <label for="whatGift">{{ 'contact.form.know_what_gift' | t }}</label>
          <input id="whatGift" type="text" name="contact[what_gift]" autocomplete="off" value="{% if form.what_gift %}{{ form.what_gift }}{% endif %}">

          <label for="delivery">{{ 'contact.form.delivered_when' | t }}</label>
          <input id="delivery" type="text" name="contact[delivery_when]" autocomplete="off" value="{% if form.delivery_when %}{{ form.delivery_when }}{% endif %}">

          <label for="otherDetails">{{ 'contact.form.other_details' | t }}</label>
          <input id="otherDetails" type="text" name="contact[other_details]" autocomplete="off" value="{% if form.other_details %}{{ form.other_details }}{% endif %}">

          <input class="btn" type="submit" value="{{ 'contact.form.submit' | t }}">
        {% endform %}
      </article>

[rogerwin]

Hi Sam.

I am having a similar error with my form "I am constantly getting an invalid email error on this form and not sure why. The email is correct when I enter it."

In my case, I have a new contact form and when submit it I get an email error in the newsletter subscription at the footer, not in the one I have as a field in the contact form.

Were you able to solved your issue? Maybe I can try with a similar solution.

Thanks in advance!

Roger