Liquid syntax error Expected end_of_string but found pipe in "form.errors.translated_fields

HareeshTummala
Tourist
8 1 0

Liquid syntax error (sections/page-contact-custom.liquid line 22): Expected end_of_string but found pipe in "form.errors.translated_fields | size == 1 and form.errors.first == 'form'"

 

I have created an alternative contact form by copying the content from contact.liquid. The new page is giving teh above error. Any help ?

0 Likes
UmairA
Shopify Partner
797 80 152

Hi @HareeshTummala ,

Please post the complete code here so I can take a look and post the solution here. Also, are you sure you didn't make any mistakes while copying the code? 

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
0 Likes
Shmurgies
Tourist
3 0 2

Hi 

I'm receiving the same problem as a result of the same actions. Below is the code. Are you able to help me out? Many thanks!!

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      {% if page.content.size > 0 %}
        <div class="rte">
          {{ page.content }}
        </div>
      {% endif %}

      <div class="contact-form form-vertical">
        {%- assign formId = 'ContactForm' -%}
        {% form 'contact', id: formId %}
          {% include 'form-status', form: form, form_id: formId %}

          <div class="grid grid--half-gutters">
            <div class="grid__item">
              <label for="{{ formId }}-name">{{ 'contact.form.name' | t }}</label>
              <input type="text" id="{{ formId }}-name" name="contact[{{ 'contact.form.name' | t }}]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
            </div>
            <div class="grid__item">
              <label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>
              <input
                type="email"
                id="{{ formId }}-email"
                name="contact[email]"
                autocorrect="off"
                autocapitalize="off"
                value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
                aria-required="true"
                {%- if form.errors contains 'email' -%}
                  class="input--error"
                  aria-invalid="true"
                  aria-describedby="{{ formId }}-email-error"
                {%- endif -%}
                >
              {%- if form.errors contains 'email' -%}
                <span id="{{ formId}}-email-error" class="input-error-message">
                  <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                  {% include 'icon-error' %}
                  <span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
                </span>
              {%- endif -%}
            </div>
          </div>
          <label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label>
          <input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">
          <label for="{{ formId }}-message">{{ 'contact.form.message' | t }}</label>
          <textarea rows="10" id="{{ formId }}-message" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>

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

        {% endform %}
      </div>
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Sell with us form",
    "settings": [],
    "presets": [
    {
      "name": "Sell with us form",
      "category": "Promotional"
    }
  ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
UmairA
Shopify Partner
797 80 152

Hey there @Shmurgies ,

Welcome to the Shopify community!

Are you able to provide your store URL and the exact error you are facing (Usually it tells the line number with the error)?

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
0 Likes
Shmurgies
Tourist
3 0 2

Thanks UmairA!

The store isn't live yet but it's the same error that original poster was receiving:

Liquid syntax error (sections/contact.liquid line 22): Expected end_of_string but found pipe in "form.errors.translated_fields | size == 1 and form.errors.first == 'form'"

Does that help?

 

UmairA
Shopify Partner
797 80 152

I see @Shmurgies ,

Try replacing the following code with the code you posted above

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      {% if page.content.size > 0 %}
        <div class="rte">
          {{ page.content }}
        </div>
      {% endif %}

      <div class="contact-form form-vertical">
        {%- assign formId = 'ContactForm' -%}
        {% form 'contact', id: formId %}
          {% include 'form-status', form: form, form_id: formId %}

          <div class="grid grid--half-gutters">
            <div class="grid__item">
              <label for="{{ formId }}-name">{{ 'contact.form.name' | t }}</label>
              <input type="text" id="{{ formId }}-name" name="contact[{{ 'contact.form.name' | t }}]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
            </div>
            <div class="grid__item">
              <label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>
              <input
                type="email"
                id="{{ formId }}-email"
                name="contact[email]"
                autocorrect="off"
                autocapitalize="off"
                value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
                aria-required="true"
                {%- if form.errors contains 'email' -%}
                  class="input--error"
                  aria-invalid="true"
                  aria-describedby="{{ formId }}-email-error"
                {%- endif -%}
                >
              {%- if form.errors contains 'email' -%}
                <span id="{{ formId}}-email-error" class="input-error-message">
                  <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                  {% include 'icon-error' %}
                  <span>{{ "form.errors.translated_fields['email']" | capitalize }} {{ form.errors.messages['email'] }}.</span>
                </span>
              {%- endif -%}
            </div>
          </div>
          <label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label>
          <input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">
          <label for="{{ formId }}-message">{{ 'contact.form.message' | t }}</label>
          <textarea rows="10" id="{{ formId }}-message" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>

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

        {% endform %}
      </div>
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Sell with us form",
    "settings": [],
    "presets": [
    {
      "name": "Sell with us form",
      "category": "Promotional"
    }
  ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

 

Let me know if that helps, else, I would have to check the backend of your store myself.

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
0 Likes
Shmurgies
Tourist
3 0 2

Thanks for sending that @UmairA unfortunately it didn't work.

Let me finalize a few additional items on the page and I'll send you through the URL and pword. 

0 Likes
New-User-
New Member
3 0 0

Not perfect solution but you can delete you line 15 in code.

Actullay its another liquid file contain messages for you contact form.

Your Form will work properly but error message and submission messages will not appears.

 

0 Likes
David_Dale
Shopify Partner
11 0 16

I know this post is a bit old but I am always finding my problem on here but no answer so I thought I should provide one here for others.

The error is caused by the included 'form-status.liquid' file, change the following line:

{%- if form.errors.translated_fields | size == 1 and form.errors.first == 'form' -%}

 

To this: 

{%- if form.errors.translated_fields and form.errors.translated_fields.size == 1 and form.errors.first == 'form' -%}

 

Hope this helps someone

nashjoann
Tourist
3 0 1

Yes! This worked perfectly for me. Thank you!