Liquid error: new_comment form must be given an article

ambikamathur9
Visitor
1 0 0

 Hi,

When trying to add a contact form to my website, I get this error: "Liquid error: new_comment form must be given an article"

Here is my code on page.contact.liquid:

<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_id: formId %}

            <div class=“grid grid–half-gutters”>
                <div class=“grid__item medium-up–one-half”>
                    <label for=“{{ formId }}-name”>{{ ‘contact.form.name’ | t }}</label>
                    <input type=“text” id=“{{ formId }}-name” name=“contact[name]”>
                </div>
                <div class=“grid__item medium-up–one-half”>
                    <label for=“{{ formId }}-email”>{{ ‘contact.form.email’ | t }} <span aria-hidden=“true”>*</span></label>
                    <input required type=“email” id=“{{ formId }}-email” name=“contact[email]” autocorrect=“off” autocapitalize=“off” 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 }}-order” class=“hidden-label”>Order Number:</label>
            <input type=“text” id=“{{ formId }}-order” name=“contact[order]” placeholder=“#1234”>

            <label for=“{{ formId }}-phone”>{{ ‘contact.form.phone’ | t }}</label>
            <input type=“tel” id=“{{ formId }}-phone” name=“contact[phone]” pattern=“[0-9\-]*” >

            <label for=“{{ formId }}-message”>{{ ‘contact.form.message’ | t }}<span aria-hidden=“true”>*</span></label>
            <textarea required rows=“10” id=“{{ formId }}-message” name=“contact[body]”>{% if form.body %}{{ form.body }}{% endif %}</textarea>

            <input type=“submit” class=“btn” value=“{{ ‘contact.form.submit’ | t }}”>

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

 

I tried building my form based on this article: https://www.abetterlemonadestand.com/how-to-add-a-contact-form/#:~:text=If%20your%20Shopify%20theme%....

Does anyone know how I can get my form to show up and remove the error message?

Any help is much appreciated!

Replies 2 (2)

Bob-Rogers
Shopify Partner
2 0 0

Hey just figured it out. Just remove any class or id from the form tags.

like this.

{% form ‘contact’ %}

Bob-Rogers
Shopify Partner
2 0 0

Put quotes around the id value OR class value

from  this  {% form ‘contact’, id: formId %} 

To this     {% form ‘contact’, id: ' formId ' %}

Then it will work.