Shopify Ajax Account Creation Form

In this article we cover the process, implementation, and reasons to use Shopify Ajax account creation and login forms.

The rate at which web technology progresses allows for an exciting and ever-evolving ecosystem of new tools, features, and capabilities, but something that will always be an important aspect of every business website (especially e-commerce websites) are forms. Forms come in all shapes, sizes, and UX flows, and do everything from processing credit card payments to updating your social media status. Shopify uses forms for a number of very important features, including contacting support, adding products to your cart, creating accounts, and logging in. With so many important features relying on forms inside a Shopify environment, we generally try not to attempt to fix what isn’t broken; that being said, we have found a few cases where the native functionality of these form submissions breaks a carefully structured UX flow (UX is very important to us, but we have another blog post for that).

A few examples of functionalities that get in the way of a desired UX flow are:

• Create account form redirects the user after submission
• On all forms, errors cannot be a customized structure
• You have no control over the next step after an account is created or a user is logged in
• The login form redirects the user upon success

How do we get around this?

One way is Ajax account creation and/or Ajax login forms.

Because we don’t have access to the Shopify backend form submission logic, we have to find a different solution than using the default forms. The first step to finding a way around this is to understand how these form submissions work. When you submit a form, the site sends serialized data from the form to a URL that is set aside to handle these form submissions. From there, the backend of the site handles the new data it receives by sending a response to the browser as well as completing the function that the URL is set up to do (create an account, send a contact form via email, etc.).

So how do we find out what gets sent to where?

To start, let’s look at a default Shopify account creation form.

<form method="post" action="/account" id="create_customer" accept-charset="UTF-8">
  <input type="hidden" name="form_type" value="create_customer">
  <input type="hidden" name="utf8" value="✓">
  <input type="text" placeholder="First Name" value name="customer[first_name]" id="customer_first_name">
  <input type="text" placeholder="Last Name" value name="customer[last_name]" id="customer_last_name">
  <input type="text" placeholder="Email" value name="customer[email]" id="customer_email">
  <input type="password" placeholder="Password" value name="customer[password]" id="customer_password">
  <input type="submit" value="Register">
</form>

In this form, you can find Where to send the data under the “action” attribute; in this case, it’s going to /account (other forms might go to /account/login or /cart). This is the first piece of info you need to get around the vanilla Shopify forms.

Next, we need to figure out the serialized data to send to that address and how to structure it. Luckily, we have a working form that we can use to generate a submission for us so we have the proper layout for the data we will be sending. What we are going to do is use javascript (and jQuery) to grab what the form submits and console.log it. For this, we will use a script like the one below.

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

    console.log(data);
  });
});

What this script does is stop the form from being submitted and instead serializes and logs the submitted data.

The string that this gives us is:

form_type=create_customer&utf8=%E2%9C%93&customer%5Bfirst_name%5D= firstName &customer%5Blast_name%5D= lastName &customer%5Bemail%5D= email &customer%5Bpassword%5D= password

So now we have the Where and the What that we need, now we need a How to submit it. We are going to use the “POST” HTTP method through the jQuery Ajax shorthand $.post function. The HTTP POST method allows the client to talk to the server the same way that a form submission does but allows us to control what happens with the server response.

Let’s build out a function that puts all of this together.

First, we are going to want to create an argument for each input and make sure to escape and sanitize those inputs so we don’t break the serialized data; then we are going to push that all into the string that we got earlier for the final data string that we are going to submit.

function createAccount(firstName, lastName, email, password){
  var escapedData = {
    firstName: escape(firstName),
    lastName: escape(lastName),
    email: escape(email),
    password: escape(password).replace(/\+/g, '%2B')
  }
  var data = 'form_type=create_customer&utf8=%E2%9C%93&customer%5Bfirst_name%5D=';
  data += escapeData.firstName;
  data += '&customer%5Blast_name%5D=';
  data += escapedData.lastName;
  data += '&customer%5Bemail%5D=';
  data += escapedData.email;
  data += '&customer%5Bpassword%5D=';
  data += escapedData.password;
}

Now, we need to send the data and do something with the response.

function createAccount(firstName, lastName, email, password){
  var escapedData = {
      firstName: escape(firstName),
      lastName: escape(lastName),
      email: escape(email),
      password: escape(password).replace(/\+/g, '%2B')
  }
  var data = 'form_type=create_customer&utf8=%E2%9C%93&customer%5Bfirst_name%5D=';
  data += escapeData.firstName;
  data += '&customer%5Blast_name%5D=';
  data += escapedData.lastName;
  data += '&customer%5Bemail%5D=';
  data += escapedData.email;
  data += '&customer%5Bpassword%5D=';
  data += escapedData.password;
  jQuery.post('/account', data)
  .done(function(response){
    var logErrors = jQuery(response).find('.errors').text();
    if (logErrors != '' && logErrors != 'undefined'){
      alert(logErrors);
    }
    else{
      alert('success!');
    }
  }).fail(function(){alert('error could not submit');});
  return false;
}

All we did with the response, in this case, was see if there was an error, and if there was, show them in an alert popup; if the account was created successfully, it alerts “success!” but you could run any function in there, including logging the user in with the same submitted credentials without redirecting the user at all. On top of all the benefits of being able to handle the logic of what happens after a form is submitted, this also gives you the freedom to set up your login inputs however you want in the page structure.

One big hurdle that we had to overcome when building this is the Shopify default captcha, which runs in the background. It won’t let you submit an account creation form more than a few times a day. You can contact Shopify support to get them to turn off the Captcha while you are developing or testing features like Ajax account creation; remember to have them turn it back on before you launch the site.

I hope you have found this info helpful. Creating Ajax carts on Shopify has plenty of info and resources all over the internet (a great javascript library that makes Ajax cart and buy flow easier is Cart.js), but the info on Ajax account creation or Ajax login forms is very hard to find, and there are no up-to-date solutions for how to accomplish this that we could find, so we decided to fix that by writing this blog post.