# customers/register

> Shoplazza 主题的 customers/register template 渲染客户注册表单，并给出表单提交的 Ajax API 注册接口。

`customers/register` template 渲染客户注册页面，包含创建客户账户的表单。

该表单提交的 endpoint 的请求参数与响应见 [`POST /{locale}/api/customers/sign_up`](/zh-CN/docs/theme/references/ajax-api/customer#post-localeapicustomerssign_up)。

![](https://cnres.appracle.com/2be4feedcfbf4202c4378d3a41394dd5.png)

## 位置

`customers/register` template 位于 theme 的 `templates` > `customers` 目录下：

**目录**

```text
└── theme
    ├── layout
    ├── templates
    |   └── customers
    |     ├── register.liquid
    |     ...
    ...
```

## 内容

您应该在 `customers/register` template 或其内部的 section 中包含[客户注册表单](/zh-CN/docs/theme/architecture/templates/customers-register#%E5%AE%A2%E6%88%B7%E6%B3%A8%E5%86%8C%E8%A1%A8%E5%8D%95)。

### 客户注册表单

客户注册表单可以使用 [form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) 添加。在 form 标签块内，您需要包含以下输入项：

| 输入项 | type | name |
| --- | --- | --- |
| First name | `text` | `first_name` |
| Last name | `text` | `last_name` |
| Email | `text` | `email` |
| Password | `password` | `password` |
| Subscribe message | `checkbox` | `newsletter` |

例如：

**示例**

```html
<form method="POST" action="{{ '/api/customers/sign_up' | add_root_url }}">
  <div>
    <input id="first_name" type="text" name="first_name" required maxlength="50" pattern='[^~!@#$%\^&*()_+<>?:"{}\/;\[\]]*'>
    <label for="first_name">First name</label>
  </div>
  <div>
    <input id="last_name" type="text" name="last_name" required maxlength="50" pattern='[^~!@#$%\^&*()_+<>?:"{}\/;\[\]\s]*'>
    <label for="last_name">Last name</label>
  </div>
  <div>
    <input id="email" type="text" name="email" required pattern="[a-zA-Z0-9!#$%&'*+\\/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+\\/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9\-]*[a-zA-Z0-9])?">
    <label for="email">Email</label>
  </div>
  <div>
    <input id="password" type="password" name="password" required minlength="6" maxlength="16" pattern="[\s\S]{6,16}">
    <label for="password">Password</label>
  </div>
  <div>
    <input type="checkbox" id="newsletter" name="newsletter" checked>
    <label for="newsletter">Subscribe to get latest offers and discounts.</label>
  </div>
  <button type="submit" tabindex="5">Register</button>
</form>
```