Liquid, JavaScript, themes, sales channels
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!
Hey just figured it out. Just remove any class or id from the form tags.
like this.
{% form ‘contact’ %}
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024