Customer Registration Page

You can create a customer registration page where customers can register a new account. Some LemonStand themes combine this form with the login form on the /login page, but you can use the form on it's own page as well.

Here's some example code, taken from the Coastal theme:

<code class="language-twig">{{ open_form({'data-ajax-handler': 'shop:onSignup', 'data-validation-message' : '', 'class' : 'form-horizontal' }) }}
    <div class="form-group">
        <label class="col-sm-3 control-label">Your Name</label>
        <div class="col-sm-9 form-inline">
            <div class="form-group">
                <label for="signup[first_name]" class="control-label sr-only">First Name</label>
                <input type="text" class="form-control input-sm" id="signup[first_name]" name="signup[first_name]" value="{{ post('signup[first_name]') }}" size="20" placeholder="First Name" />
                <span class="error small text-danger"></span>
            </div>
            <div class="form-group">
                <label for="signup[last_name]" class="control-label sr-only">Last Name</label>
                <input type="text" class="form-control input-sm" id="signup[last_name]" name="signup[last_name]" value="{{ post('signup[last_name]') }}" size="20" placeholder="Last Name" />
                <span class="error small text-danger"></span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="signup[email]" class="col-sm-3 control-label">Email</label>
        <div class="col-sm-9">
            <input type="email" class="form-control input-sm" id="signup[email]" name="signup[email]" value="{{ post('signup[email]') }}" size="40" />
            <span class="error small text-danger"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="signup[password]" class="col-sm-3 control-label">Password</label>
        <div class="col-sm-9">
            <input type="password" class="form-control input-sm" id="signup[password]" name="signup[password]" value="" size="16" />
            <span class="error small text-danger"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="signup[password_confirmation]" class="col-sm-3 control-label">Confirm</label>
        <div class="col-sm-9">
            <input type="password" class="form-control input-sm" id="signup[password_confirmation]" name="signup[password_confirmation]" value="" size="16" />
            <span class="error small text-danger"></span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-3 col-sm-9">
            <button type="submit" class="btn btn-sm btn-dark">Submit</button>
        </div>
    </div>
    <input type="hidden" name="customer_group[]" value="5"/> 
    <input type="hidden" name="autologin" value="1" />
    <input type="hidden" name="redirect" value="{{ site_url('registered') }}"/>
{{ close_form() }}</code>

You'll notice at the bottom there are some hidden fields.

  • autologin - setting the value to 1 on this will automatically log-in the customer.
  • redirect - this field will redirect the customer to the URL specified in the value. In this example, it brings them to /registered.
  • customer_group - this field adds the customer to a specific customer group. The value attribute should use the customer group ID, which can be found in the admin area from the Shop > Customer Groups page by clicking on a group and looking at the number in the page URL. Example:/backend/shop/customergroups/ You can use more than one customer_group_id hidden fields, if you'd like to add a customer to multiple groups on registration.

Note: When a new customer registers, it automatically triggers the "shop:registration-confirmation" email template, which you can customize from Settings > Email Templates.


Customer registration in the Checkout

Customers can register during the checkout. If the checkout billing form contains the billingInfo[password] and billingInfo[password_confirmation] fields, those fields become required and the customer gets registered as soon as the order is paid. It makes sense to show those fields only for unregistered / guest customers. Example:

{% if not customer %}
  <label for="password">Password</label>
  <input type="password" name="billingInfo[password]" id="password"/>
  
  <label for="password_confirmation">Password confirmation</label>
  <input type="password" name="billingInfo[password_confirmation]" id="password_confirmation"/>
{% endif %}

The checkout address page now supports the billingInfo[register] field. If this field is presented in the form, and its value is 1, the customer should enter the password and its confirmation. If the field value is 0, the customer won't be registered. It makes sense to make this field a checkbox, with a hidden field:

<input type="hidden" name="billingInfo[register]" value="0">
<input type="checkbox" name="billingInfo[register]" value="1">

The hidden field needs to be there because checkbox fields don't send their value to the server if they are unchecked.

If the billingInfo[register] field is not presented in the POST, and the billingInfo[password] is presented, the customer registration is required, so unchecking the checkbox won't cancel the registration.