We're creating a custom user registration form for an upcoming sale campaign.
The form has been created in a custom theme file and is situated on a specific landing page for the sale.
The theme (Responsive) uses jquery validation for most fields which occurs prior to form submission which is handy. However, when a user inputs an email address that is already associated with an account the form first submits and then displays the error "email address is already associated with an account" after a page reload has occurred. This page reload is taking users to the URL of the default user account registration form. This destroys the funnel of our sale campaign.
So this is an example of the URL of our custom user registration form - www.example.com/pages/sale
And this is an example of where users are being redirected to for the display of the error message when an email address that is already associated with an account is used - www.example.com/account/register
We require the "email address is already associated with an account" error message to display on the same page as the custom registration form - www.example.com/pages/sale
I've been researching this the last few days without much luck. I've also reached out to a few Shopify experts without any response.
Is it possible to amend this redirection for the custom form? Here's the code we're using so far, it's just your basic user registration form. Aside from the fact that it's located at a unique URL.
{% form 'create_customer' %}
{% if form.errors %}
{{ form.errors | default_errors }}
{% endif %}
<div id="first_name">
<label for="first_name" class="login">{{ 'customer.register.first_name' | t }}</label>
<input type="text" value="" name="customer[first_name]" id="first_name" class="large" size="30" required/>
</div>
<div id="last_name">
<label for="last_name" class="login">{{ 'customer.register.last_name' | t }}</label>
<input type="text" value="" name="customer[last_name]" id="last_name" class="large" size="30" required/>
</div>
<div id="email">
<label for="email" class="login">{{ 'customer.register.email' | t }}</label>
<input type="email" value="" name="customer[email]" id="email" class="large" size="30" required/>
</div>
<div id="password">
<label for="password" class="login">{{ 'customer.register.password' | t }}</label>
<input type="password" value="" name="customer[password]" id="password" class="large password" size="30" required/>
</div>
<div id="accepts_marketing_checkbox" style="margin-bottom: 15px;">
<input style="float: left;margin-top: 3px;" type="checkbox" name="customer[accepts_marketing]" checked="checked" value="true" id="marketing" required/>
<label for="marketing" style="font-weight: 400;line-height: 22px;">I agree to receive the newsletter.</label>
</div>
<p class="action_bottom">
<input class="btn action_button" type="submit" value="Submit" />
</p>
<script>
window.addEventListener('load', function () {
document.addEventListener("DOMContentLoaded", function() {
$(":submit").click(function(e) {
if ($("#marketing").is(':checked')) {
e.preventDefault();
var email = $('input#Email').val();
var firstname = $('input#FirstName').val();
var lastname = $('input#LastName').val();
var settings = {
"async": true,
"crossDomain": true,
"url": "https://manage.kmail-lists.com/ajax/subscriptions/subscribe",
"method": "POST",
"headers": {
"content-type": "application/x-www-form-urlencoded",
"cache-control": "no-cache"
},
"data": {
"g": "XXXXX",
"email": email,
"$fields": "$source, $first_name, $last_name",
"$source": "Account Creation",
"$first_name": firstname,
"$last_name": lastname
}
};
$.ajax(settings).done(function(response) {
console.log(response);
// select and submit form after subscribing
$("#create_customer").submit();
})
}
})
});
});
</script>
{% endform %}Is there a function in {% form 'create_customer' %} that I can hook into and amend to achieve this?
The script at the bottom of the form is adding users to a specific Klaviyo list that I've obfuscated the ID for.
We'd like to avoid using an app for this if possible.
Any help would be greatly appreciated. Thanks!!
