Custom Registration Form - Email Address Validation Redirecting To Default Registration Form

Custom Registration Form - Email Address Validation Redirecting To Default Registration Form

gr5
Tourist
7 0 3

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!!

 

 

Replies 3 (3)

gr5
Tourist
7 0 3

I should also mention that adding an action attribute to the {% form 'create_customer' %} tag returns a 404.

Here's what I've tried.

 

{% form 'create_customer', action:'/pages/sale' %}

 

 

 

{% form 'create_customer', action:'https://www.example.com/pages/sale' %}

 

 

 

{% form 'create_customer', action:'#' %}

 

 

 

All returning a 404 when the form is submitted and the page is refreshed.

gr5
Tourist
7 0 3

And I should also add that the liquid file I've created for this is not situated within the /customers architecture of the templates directory. I'm not sure if it makes any difference, but the liquid file is simply sitting in the top level of the templates directory.

Krom
Shopify Partner
1 0 0

I know this is late already and I also have the same problem as before. You can use 

return_to: 'back'

instead of action:'/pages/sale'