> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Tutorial | Create a Custom Registration Form

## Article: Tutorial | Create a Custom Registration Form

## Article Link: https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/members-contacts/tutorial-create-a-custom-registration-form.md

## Article Content:

# Tutorial | Create a Custom Registration Form

When a site adds a [Members Area](https://support.wix.com/en/article/site-members-about-the-members-area), it includes a default registration form that allows site visitors to sign up as members. Sometimes the standard form doesn't meet the specific needs of a site. In this tutorial, we build a custom registration form that can be designed to match a site's branding, and use it to collect specific information from site visitors in the registration process. Here we create an example custom registration form that includes confirmation fields for email address and password.

In this tutorial, you'll learn how to:

- [Enable a custom site registration form.](#step-1--enable-custom-site-registration)
- [Build a custom form with custom input and design elements.](#step-2--build-a-custom-form)
- [Write page code to validate confirmation fields.](#step-3--add-frontend-code)
- [Write page code to register a new member](#step-4--add-registration-logic)

## Before you begin

It's important to note the following points before doing this tutorial:

- Your site must have [a Members Area](https://support.wix.com/en/article/site-members-add-and-set-up-a-members-area).

> The code in this tutorial was written using the following module versions:
>
> - @wix/sdk (v1.12.0)
> - @wix/members (v1.0.0)
>
> Learn how to install npm packages [in the editor](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/packages/npm/work-with-npm-packages-in-the-editor.md) or [using the CLI](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/packages/npm/work-with-npm-packages-with-the-cli.md).

## Step 1 | Enable custom site registration

To get started, follow the steps below to enable custom site registration using custom forms.

1. [Add a popup to a site](https://support.wix.com/en/article/studio-editor-using-popups#adding-a-popup). In our example, we [name our popup](https://support.wix.com/en/article/studio-editor-using-popups#customizing-a-popup) **Custom Registration Form**.

2. Navigate to **Pages** on the left side of your editor. Under **Signup & Login**, click **Signup (Default)**.

   ![Signup & Login pages menu](https://wixmp-833713b177cebf373f611808.wixmp.com/images/199c3d82b20e6efbe1f959706fd60839.png)

3. In the dropdown menu, change the default form to **Velo Form**, and link it to the **Custom Registration Form** popup created earlier. This step changes the default member signup form to the custom registration form.

   ![Link custom registration form](https://wixmp-833713b177cebf373f611808.wixmp.com/images/932470693e4303eabee3d13d516e066d.png)

> **Note:** When a site visitor signs up using a Velo custom registration form, they automatically become a site member, as the member signup settings default to automatic approval for `Everyone who signs up`. To require manual approval before becoming a member, adjust the settings in **Additional Signup & Login Settings**.

You can now go to the popup page to start building the form.

## Step 2 | Build a custom form

To add fields to a custom registration form:

1. Click on **Signup (Custom)**, under **Signup & Login**.

   This opens the popup.

2. To add fields to the popup, click Add Elements ![Add Elements icon](https://wixmp-833713b177cebf373f611808.wixmp.com/images/b720ae0219e0c5e373ab3fd18a634caf.png "Add Elements icon") on the left side of the editor. Then, drag and drop the relevant element.

3. Add the following fields:

   - A text input for entering a first name. Set the text ID to `firstName`.
   - A text input for entering a last name. Set the text ID to `lastName`.
   - An email input for entering an email address. Set the email ID to `email`.
   - An email input for confirming an email address. Set the email ID to `confirmEmail`.
   - A password input for entering a password. Set the password ID to `password`.
   - A password input for confirming a password. Set the password ID to `confirmPassword`.

4. Add text elements below the confirmation fields to display error messages if a site visitor's entries don't match. Set the default values for these text elements as "Hidden" in the [Properties & Events panel](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/ides/code-editor/about-the-properties-events-panel.md).

   - A text element for noting the 2 email fields don't match. Set the text ID to `emailMismatchText`.
   - A text element for noting the 2 password fields don't match. Set the text ID to `passwordMismatchText`.

5. Add a register button to submit the form and register the site visitor as a new member. Set the button ID to `register`.

The form should look like this:

  ![Custom registration form layout](https://wixmp-833713b177cebf373f611808.wixmp.com/images/4063bbb25ca381b916de21576067953e.png)

> **Note:** A registration form must include input elements to collect a site visitor's email and password. This data is required for adding a new contact entry for a site visitor in a site's Contact List, and for registering them as a site member.
>
> If you want to collect additional data from site visitors aside from the default fields in a site's Contact List, you'll need to add custom fields to the site's Contact List.

## Step 3 | Add frontend code

In this step, you'll add code to validate the confirmation fields in your popup.

1. Import the required module at the top of your page code.

   ```javascript
   import { authentication } from "@wix/site-members";
   ```

2. In the `onReady()` method, add an `onClick()` event handler to the register button, and retrieve the values from all input fields, including the confirmation fields.

   ```javascript
   $w.onReady(function () {
     $w('#register').onClick(async () => {
       const password = $w('#password').value;
       const confirmPassword = $w('#confirmPassword').value;
       const email = $w('#email').value;
       const confirmEmail = $w('#confirmEmail').value;
   ```

3. Reset and hide any error messages when they're no longer needed.

   ```javascript
   // Reset error messages.
   $w("#emailMismatchText").hide();
   $w("#passwordMismatchText").hide();
   ```

4. When a site visitor finishes entering their information and clicks **Sign Up**, first validate that the email and password confirmation fields match their respective original fields. If either validation fails, display the appropriate error message and stop the registration process.

   ```javascript
   // Validate email confirmation.
   if (email !== confirmEmail) {
     // Stop execution if emails don't match and display the error message for it.
     $w("#emailMismatchText").show();
     return;
   }

   // Validate password confirmation.
   if (password !== confirmPassword) {
     // Stop execution if passwords don't match and display the error message for it.
     $w("#passwordMismatchText").show();
     return;
   }
   ```

## Step 4 | Add registration logic

If the validation above passes, continue registering the new member.

1. Set the new member's contact info.

   > **Note:** The API requires that this is passed as an array. So even in our example, where new members only have 1 email address, this is passed as an array.

   ```javascript
   try {
     // Register the member using the members API.
     const registrationOptions = {
       contactInfo: {
         firstName: $w('#firstName').value,
         lastName: $w('#lastName').value,
         emails: [email]
       }
     };
   ```

2. Register the site visitor.

   ```javascript
   const registrationResult = await authentication.register(
     email,
     password,
     registrationOptions
   );
   ```

3. Check the registration status.

   ```javascript
   // Check the registration status.
   if (registrationResult.state === 'ACTIVE') {
     // Handle successful registration, like display a success message or redirect new member.
     console.log('Member registered successfully:', registrationResult);

   } else {
     // Handle pending registration cases, like email verification or manual admin approval.
     console.log('Registration requires additional steps:', registrationResult.state);

   }
   } catch (error) {
     // Handle registration errors.
     console.error('Registration failed:', error);
       }
     });
   });
   ```

## Complete code example

Here is the complete code for this example:

```javascript
import { authentication } from "@wix/site-members";

$w.onReady(function () {
  $w("#register").onClick(async () => {
    const password = $w("#password").value;
    const confirmPassword = $w("#confirmPassword").value;
    const email = $w("#email").value;
    const confirmEmail = $w("#confirmEmail").value;

    // Reset error messages.
    $w("#emailMismatchText").hide();
    $w("#passwordMismatchText").hide();

    // Validate email confirmation.
    if (email !== confirmEmail) {
      // Stop execution if emails don't match and display the error message for it.
      $w("#emailMismatchText").show();
      return;
    }

    // Validate password confirmation.
    if (password !== confirmPassword) {
      // Stop execution if passwords don't match and display the error message for it.
      $w("#passwordMismatchText").show();
      return;
    }

    try {
      // Register the member using the members API.
      const registrationOptions = {
        contactInfo: {
          firstName: $w("#firstName").value,
          lastName: $w("#lastName").value,
          emails: [email],
        },
      };

      const registrationResult = await authentication.register(
        email,
        password,
        registrationOptions
      );

      // Check the registration status.
      if (registrationResult.state === "ACTIVE") {
        // Handle successful registration, like display a success message or redirect new member.
        console.log("Member registered successfully:", registrationResult);
      } else {
        // Handle pending registration cases, like email verification or manual admin approval.
        console.log(
          "Registration requires additional steps:",
          registrationResult.state
        );
      }
    } catch (error) {
      // Handle registration errors.
      console.error("Registration failed:", error);
    }
  });
});
```