Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hello Shopify World,
My team been looking at this issue for a while and hoping someone online can help us. We have this newsletter section created for our home page, and upon submission (after the captcha step) the user should either get a "Toast trigger" of form successful (Newsletter subscribed) OR ... error message and having the {{ form.errors | default_errors }} message pop up inside the toast.
So far the toasts triggers, and the successful message works great. However, the error validation keeps triggering (even if we visit the page for the first time) AND we don't see any error message but just "{{ form.errors | default_errors }}". I've attached the sections code in case anyone notices any coding issues:
Appreciate any help like always!
Vince
<div class="container py-5">
<div class="row">
<div class="col-md-4">
<h5>{{set.title}}</h5>
</div>
<div class="col-md-1"></div>
<div class="col">
{% form 'customer' %}
<div class="row g-2 d-flex align-items-end">
<div class="col-8">
<label for="customerEmail" class="news_label--style"><p>{{set.form_label}}</p></label>
<input id="customerEmail" type="email"
name="contact[email]"
class="form-control news_input--style"
value="{%- if customer -%}{{ customer.email }}{%- endif -%}"
autocorrect="off"
autocapitalize="off" required>
</div>
<div class="col-4">
<button type="submit" class="btn primary_btn--style news_btn--style" value="{{contact.form.send | t }}">SUBSCRIBE</button>
</div>
</div>
{% if form.posted_successfully? %}
{% assign toast_title = 'Success' %}
{% assign toast_message = 'Thank you for signing up to our newsletter!' %}
{% render 'toasts-module' toast_title: toast_title, toast_message: toast_message %}
{% else %}
{% assign toast_title = 'Fail' %}
{% assign toast_message = "Something went wrong. {{ form.errors | default_errors }}" %}
{% render 'toasts-module' toast_title: toast_title, toast_message: toast_message %}
{% endif %}
{% endform %}
</div>
</div>
</div>
Solved! Go to the solution
This is an accepted solution.
It might be because toasts doesn't work when you reload the content. Please contact toasts for better support 🙂
Hi leungvi8,
You can change the code at if:
{% if form.posted_successfully? %}
{% assign toast_title = 'Success' %}
{% assign toast_message = 'Thank you for signing up to our newsletter!' %}
{% render 'toasts-module' toast_title: toast_title, toast_message: toast_message %}
{% elsif form.errors %}
{% assign toast_title = 'Fail' %}
{% assign toast_message = "Something went wrong. {{ form.errors | default_errors }}" %}
{% render 'toasts-module' toast_title: toast_title, toast_message: toast_message %}
{% endif %}
Unfortunately, I did try this, but what tends to happen is the error message doesn't register right away (toast does not trigger). However, if i refresh the page... than i see the error.
Oh and the Success seems to work now, but fail trigger doesn't seem to popup right away.
This is an accepted solution.
It might be because toasts doesn't work when you reload the content. Please contact toasts for better support 🙂
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025