Skip to main content
RegisterForm Section
Updated over a year ago

๐Ÿšง For Shopify stores

Make sure the Customers Accounts permission is enabled. Check Shopify documentation for more details.

Used in this Section:

Customers may not have an account to log into. Let's create a Section that will allow your customers to create an account.

To create a Section:

  1. On your local environment, create a new folder inside src/sections and name it as RegisterForm.

  2. Create an index.js file inside the RegisterForm folder.

  3. Create a styles.module.css file inside the RegisterForm folder.

import * as React from 'react'
import { useCustomerActions } from 'frontend-customer'
import { useRouter } from 'frontend-router'
import Link from 'frontend-link'
import AuthGuard from 'Components/AuthGuard'

const RegisterForm = () => {
const [disabled, setDisabled] = React.useState(false)
const [isLoading, setIsLoading] = React.useState(false)
const [registerErrors, setRegisterErrors] = React.useState()
const [registerData, setRegisterData] = React.useState({
firstName: '',
lastName: '',
email: '',
password: '',
})

const { register } = useCustomerActions()
const router = useRouter()

React.useEffect(() => {
setDisabled(registerData.email === '' || registerData.password === '')
}, [registerData.email, registerData.password])

const handleSubmit = async event => {
event.preventDefault()

setRegisterErrors(null)
setIsLoading(true)

const { errors } = await register(registerData)

setIsLoading(false)

if (errors) {
setRegisterErrors(errors)

return
}

router.push('/account/login')
}

return (
<section>
<h1>Register</h1>

<AuthGuard allowedAuthStatus="unauthenticated" redirectUrl="/account">
<form onSubmit={handleSubmit}>
<label>
First name{' '}
<span>
(optional)
</span>
<input
type="text"
value={registerData.firstName}
onChange={(event) =>
setRegisterData(currentData => ({
...currentData,
firstName: event.target.value,
}))
}
/>
</label>
<label>
Last name{' '}
<span>
(optional)
</span>
<input type="text" value={registerData.lastName} onChange={(event) =>
setRegisterData(currentData => ({
...currentData,
lastName: event.target.value,
}))
}
/>
</label>
<label>
Email
<input placeholder="email@example.com" type="email" value={registerData.email}
onChange={(event) =>
setRegisterData(currentData => ({
...currentData,
email: event.target.value,
}))
}
required
/>
</label>
<label>
Password
<input placeholder="Enter your password" type="password" value={registerData.password}
onChange={(event) =>
setRegisterData(currentData => ({
...currentData,
password: event.target.value,
}))
}
required
/>
</label>
<button disabled={disabled} type="submit">
Register
</button>
{registerErrors && (
{/* Loop through the array of validation errors if needed */}
)}
<hr />
<p>
Already have an account?{' '}
<Link href="/account/login">
Login
</Link>
</p>
</form>
</AuthGuard>
</section>
)
}

export default RegisterForm

Register page

With the RegisterForm Section ready, we need to create a register page:

  1. Click on the Pages icon from the sidebar.

  2. Click ADD PAGE on the top right corner.

  3. Enter the PAGE NAME: Register.

  4. Enter the PAGE PATH: account/register.

  5. If desired, you can select a Frame from the Frame dropdown.

  6. Click ADD PAGE.

Now, add the RegisterForm section to your Register page (if you are already on the Register page, skip to step 4):

  1. Click on the Pages icon from the sidebar.

  2. Search for "Register".

  3. Open the "Register" page by clicking on its title.

  4. On the sidebar, click on the + (plus sign) where it says "Add sections to start building your page".

  5. A list with all our Sections will appear, search for and select RegisterForm.

  6. Click SAVE.

1622

Register page example

Did this answer your question?