Hi im working on a newsletter signup in a modal pop up window. The site is using debut theme.
Example: https://dpf8jhebh6pybaaz-52123107526.shopifypreview.com
Below is the code from the newsletter.liquid file it is the form. if you try it in the link above it works but once the page reloads the modal gets messed up. How do i go about fixing this issue. Also need to validate the input to make sure a valid email address has been entered.
{%- assign formId = 'Contact_' | append: section.id -%}
{% form 'customer', id: formId, novalidate: 'novalidate', class: 'contact-form form-single-field' %}
{%- if form.posted_successfully? -%}
<p class="form-message form-message--success" tabindex="-1" data-form-status>
{{ 'general.newsletter_form.confirmation' | t }}
</p>
{%- endif -%}
<input type="hidden" name="contact[tags]" value="newsletter">
<div class="input-group {% if form.errors %} input-group--error{% endif %}">
<input type="email"
name="contact[email]"
id="{{ formId }}-email"
class="input-group__field{% if form.errors %} input--error{% endif %}"
value="{{ form.email }}"
placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}"
aria-label="{{ 'general.newsletter_form.email_placeholder' | t }}"
aria-required="true"
autocorrect="off"
autocapitalize="off"
{% if form.errors %}
aria-invalid="true"
aria-describedby="{{ formId }}-email-error"
data-form-status
{% endif %}
>
<span class="input-group__btn">
<button type="submit" class="btn" name="commit">
<span>{{ 'general.newsletter_form.submit' | t }}</span>
</button>
</span>
</div>
{%- 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 -%}
{% endform %}
<!-- End newsletter signup form -->
How would i do this? Im thinking i would need to check if an email address has been submitted and if successful then display an entirely different modal with the discount code and thank you message. if no successfully submitted show the modal as normal?
can someone help me please? @BSS-Commerce @EmmanuelFlossie
