Velo Tutorial: Creating a Custom Registration Form with Code
When you add membership functionality to your site, you receive a default form for registering site visitors as site members. Sometimes the standard form doesn't meet the specific needs of your site. In this article, we demonstrate how to build a custom registration form that you can design to match your site's branding, and use it to collect specific information from your site visitors in the registration process. Here we create an example custom registration form for a store called The Tall Shop.
To create a custom registration form we:
- Enable custom site registration using Velo Forms.
- Build a custom Velo Form with input and design elements.
- Set up the custom fields and labels in our site's Contact List.
- Write page code to perform membership registration using the information captured from our custom form.
Prerequisites
Make sure you’ve added a Members Area to your site.
This article assumes you are familiar with the following:
Step 1 | Enable Custom Site Registration
To get started, follow the steps below to enable custom site registration using Velo forms.
-
Add a lightbox to your site. In our example, we name our lightbox Custom Registration Form.
-
Navigate to your Pages on the left side of your Editor. Click the Signup & Login tab, and then click Member Signup Form.
-
In the dropdown menu, change the default form to Velo Form, and link it to the Custom Registration Form lightbox we created earlier. This step changes the default member signup form to the Velo custom registration form.
We can now go to our lightbox page to start building our form.
Step 2 | Build a Custom Form
Next, we set up our site's contact list so that we can specify additional information to the contact entry created when a member registers using our custom form. You can skip this step if you don't need any additional data from your site members. In our example, we set up some labels and a custom field.
Notes
- When a site visitor signs up using a Velo custom registration form, they automatically become a site member, as the member Signup Setting defaults to automatic approval for everyone who signs up. If you want to manually approve them before becoming a member, set your member Signup Setting to Only people who I approve manually.
- Choosing manual approval means that site visitors who register will have the status of ‘Pending’ until you manually approve them. You’ll have to go to your site's Contact List to approve them. To learn more, see the Automatic vs. Manual Approval section of the register() API.
- If you choose manual approval, you may want to use the register() API from the wix-members-backend module instead. This allows you to build more secure approval flows by keeping tokens hidden from the frontend.
Your site’s Contact List has multiple fields built in, such as ‘Name’, ‘Email,’ and ‘Phone’, shown below. If you want to collect this data from your site visitors, simply add input elements to your site for these fields. The data collected from the input elements is stored in the corresponding fields in your site’s Contact List.
Important Your form must include at least 2 input elements to collect your site visitor’s email and password. This data is required for adding a new contact entry for your site visitor in your site’s Contact List, and for registering them as a site member.
If you want to collect additional data from your site visitors aside from the default fields in your site’s Contact List, you’ll need to add custom fields to your site’s Contact List. In our example, we create a custom field to store our site visitor’s height, and we add an input element to our form to collect this information.
To build our custom registration form, we add input elements to our lightbox page. We include inputs for required fields (email and password), for existing fields in your site’s Contact List (first name and last name), and we add an additional input element for collecting our site visitor’s height. Lastly, we add a register button to submit the form and register the site visitor as a new member.
Add the following elements to your lightbox page:
- First Name
- Last Name
- Email address
- Password
- Height
- Register button
Your custom registration form should look something like this:
| Type | ID | Usage |
|---|---|---|
| Input - Text | firstName | For entering a first name |
| Input - Text | lastName | For entering a last name |
| Input - Email | For entering an email address | |
| Input - Password | password | For entering a password |
| Input - Number | height | For entering a height |
| Button | register | For triggering the registration code |
Step 3 | Create a Custom Field
Custom fields are used to store additional information about your site's contacts.
In the previous step, we added an additional input element to our form to collect our site visitor’s height. Now we add a corresponding custom field in our site’s Contact List to store our contact’s height. In your site’s Dashboard, go to your contact list and click More Actions > Manage custom fields and add a new field named height. Set the height field's type to Number. Note that you can add any custom fields that suit the needs of your site.
Step 4 | Add Labels
Labels are used to organize your contacts into meaningful groups. In our example, we use labels to organize our members into different height groups. In our code, we calculate a new member's label based on the height they provide in our registration form.
In your site’s Dashboard, go to your site’s Contact List and click More Actions > Manage labels. Add the following labels in your site’s Contact List:
- Not Tall
- Tall
- Very Tall
- Too Tall
Step 5 | Add Code
The last step is writing the code for our lightbox page. Let's first take a look at this code piece by piece to understand what it's doing.
Import the API and Declare Variables
Line 1: First, we import the authentication API from the wix-members-frontend module.
Lines 3- 4: We declare 2 arrays to store the new member's email address and label. Note that in our example, new members will have only one email address and one label. However, the API requires that both of these are passed as arrays.
Set up the Form Event Handler to Retrieve Input Values
Lines 1- 2: In the onReady() function, we add an onClick() event handler to the register button. When a site visitor finishes entering their information in our form and clicks Register, the data they provided for each input element is used to automatically add a new contact to our site's contact list.
Line 3- 5: In the event handler, we set the password, height, and email variables to the corresponding input values.
Line 6: We take the email address the site visitor provided in the form, and store it in the emails array.
Add a Height Label to the Contact
To learn more about the register function, see the register() function in the API Reference.
Lines 1- 10: We calculate which label (‘Not Tall’, ‘Tall’, ‘Very Tall’, or ‘Too Tall’), to add to the new contact based on the height value provided in the form. This height label is added to the contact’s entry along with the other data provided in the form.
Register Site Visitor with the Details Provided in the Form
Lines 1- 10: Before calling the register() function, we first set the options we want to pass in. The options object includes a contactInfo object with the fields and labels in our site’s Contact List, and their corresponding data values collected from our form. We also set the new member’s privacy status to 'PUBLIC' upon registering. Note that our contactInfo object reflects the information we collect in our form. It also reflects the specific labels and custom fields that we created in our site’s Contacts List.
Line 12: We call the authentication API’s register() function and pass the email and password collected in the form, as well as the registration options we set above.
Lines 13- 22: We use the .then() function to retrieve the registrationResult object returned by the register() function. If this object’s status property is ‘ACTIVE’, the member is approved and logged in. Last, we log the registrationResult object to the console.
Here is the complete code for this example: