Editor X: Creating a Custom Signup Form With Code

3 min read
Editor X is transitioning to Wix Studio, our new platform for agencies and freelancers.Learn more about Wix Studio
A signup form lets your visitors register to become members of your site. Design a custom registration form that opens as a pop-up, collecting any info you need using input elements. 

Step 1 | Enable Velo and Add a Members Area

Make sure you have everything you need to create a custom signup form. Turn on Dev Mode so you can enter code and add a Members Area so visitors can register as members. 

To enable Dev Mode and Members Area:

  1. Click Dev Mode at the top of the Editor.
  2. Click Turn on Dev Mode.
  3. Click Add  at the top left.
  4. Click Members.
  5. Click Add to Site.

Step 2 | Create the Form in a Lightbox

Get started by adding a new lightbox to your site. This is where you create and design your custom registration form. 

To add a lightbox and create the form:

  1. Click Add  at the top left.
  2. Click Layout Tools.
  3. Click Lightboxes.
  4. Click any lightbox to select it. 
  5. Follow the steps in this article to create a custom registration form with code. 
  6. (Optional) Design the lightbox as you wish. 
Tips:
  • Drive visitors to sign up by linking elements and menu items to this lightbox. Learn How
  • The custom registration form is based on Input elements which are connected to a database collection. Click here to learn more about creating an input form.

Step 3 | Enable Custom Signup

Now that your form is ready, enable Custom Signup and choose the lightbox you just created so visitors can use it to register.

To enable Custom Signup:

  1. Click the Pages icon  at the top left.
  2. Hover over Members Area and click the Show More icon .
  3. Select Member Signup Settings.
  4. Click Enable Custom Signup at the bottom. 
  5. Click the Exit icon  at the top right.
  6. Click the Enable Custom Signup toggle.
  7. Click Choose a Lightbox and select your new lightbox from the drop-down.
  8. Click Done.
  9. Click Save.
What's next?
When new members fill in the registration form, their information is automatically saved in your database collection.

Did this help?

|