Hi all, I have created a customized email sign-up form on my header. I am using the ride theme, and the code I used is a light variation of the code in contact-form.liquid that came with the same.
I have 2 questions.
1. I am receiving a notification email 2 hours after my test entry, is it normal?
2. I don't see a new customer entry in my customer list (I have a few entries from previous tests, but I have altered the code afterwards, and wonder if that changes the receiving end behavior pattern).
Here is the code for the form:
{% form 'contact', id: 'contact_form', class: contact_form_class%}
{{ form.errors | default_errors }}
{%- if form.posted_successfully? -%}
<h2 class="form-status form-status-list form__message" tabindex="-1" autofocus>
{% render 'icon-success' %}
{{ 'templates.contact.form.post_success' | t }}
</h2>
{%- elsif form.errors -%}
<div class="form__message">
<h2 class="form-status caption-large text-body" role="alert" tabindex="-1" autofocus>
{% render 'icon-error' %}
{{ 'templates.contact.form.error_heading' | t }}
</h2>
</div>
{% endif %}
{% comment %}<h4>Sign up for updates! </h4> {% endcomment %}
<div class= 'inputcontents'>
{% comment %}<label for="email">Email: </label>{% endcomment %}
<div class='spacealign'>
<div id="email-error" style="color: red; display: none; font-size:0.8rem;">Please enter a valid email address</div>
<input type="email" name="contact[email]" id="email" required />
<input type='submit' value="Subscribe" class="btn"/>
</div>
</div>
{% endform %}
here is the JS code:
document.getElementById('contact_form').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from submitting normally
console.log('Form submission prevented');
var formData = new FormData(this);
console.log('Form data created:', formData);
fetch('/contact', {
method: 'POST',
body: formData
}).then(response => {
console.log('Fetch response received:', response);
if (response.ok) {
console.log('Response is Ok');
document.getElementById('contact_form').innerHTML = '<p>Thank you for signing up!</p>'; // Display the message
} else {
console.log('response is not ok');
document.getElementById('contact_form').innerHTML = '<p>Subscription failed. Please try again.</p>';
}
}).catch(error => {
console.error('Fetch error',error);
console.error('Error:', error);
});
});
</script>
