Redirect Shopify Forms

Our Goal

Our goal here is to be able to redirect our shopify forms to another url within our site. In this example we will redirect the Customer Registration Form

Why?

We don't always need what shopify offers us by default. Maybe sometimes we need to make another form that just stays on the current page and displays a message. Or also, we want to know if we can do it and not die trying.

What else am I going to learn?

In this example, we will learn how to send additional customer data, and see where it is stored.

Let's start.

The Form

Let's say we want to send: First Name, Last Name, Email, Password and two extra fields (Address and Phone)

In the name of the extra fields you can see the following syntax customer[note][Phone]. This tells shopify to add the value of that field in the Customer Notes.

In this way we can save all the additional data that we want.

{% form 'create_customer' %}

{{ form.errors | default_errors }}

<label for="FirstName">First Name <span style="color:red">*</span></label>
<input type="text" name="customer[first_name]" id="FirstName" required="required" 
class="input-full"  {% if form.first_name %}value="{{ form.first_name }}" {% endif %} 
autocapitalize="words" autofocus>

<label for="LastName">Last Name <span style="color:red">*</span></label>
<input type="text" name="customer[last_name]" id="LastName" required="required" 
class="input-full"  {% if form.last_name %}value="{{ form.last_name }}" {% endif %} 
autocapitalize="words"/>

<label for="Email">Email Address <span style="color:red">*</span></label>
<input type="email" name="customer[email]" id="Email" required="required"
  class="input-full{% if form.errors contains 'email' %} error{% endif %}" 
{% if form.email %}   value="{{ form.email }}" {% endif %} 
autocorrect="off" autocapitalize="off"/>

<label for="StreetAddress">Street Address:</label>
<input type="text" value="" name="customer[note][StreetAddress]" 
id="StreetAddress" class="input-full" size="30" />

<label for="Phone">Phone:</label>
<input type="text" value="" name="customer[note][Phone]" 
id="Phone" class="input-full" size="30" />

<label for="Password">Password: (min.5 characters) <span style="color:red">*</span></label>
<input type="password" minlength="5" name="customer[password]"
 id="CreatePassword" required="required"   class="input-full"/>

<p>
  <input type="submit" value="{{ 'customer.register.submit' | t }}" id="contactFormSubmit"
    class="btn btn--full btn--no-animate" />
</p>

{% endform %}

Our JavaScript Code

<script>

(function() {
    jQuery('#create_customer').submit(function(event) {
        event.preventDefault();
        var data = jQuery(this).serialize();

       //create new account
        jQuery.post('/account', data)
          .done(function(data){
          var logErrors = jQuery(data).find('.errors').text();

          //if there are errors show them in the html form
          if (logErrors != "" && logErrors != 'undefined'){
              jQuery('#create_customer .errors').html(logErrors);
              jQuery('#create_customer .errors').show();

          //if account creation is successful rediret to any page (in this case we stay in the same page)
          }else{
             console.log('success');
            document.location.href = '/pages/signup';
          }
          }).fail(function(){console.log('error');});
         return false;
      }); 
})();

</script>

Thank you very much for reading. I hope this helps. I see you in the next post.