Editor X: Creating a Custom Signup Form With Code
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:
- Click Dev Mode at the top of the Editor.
- Click Turn on Dev Mode.
- Click Add
at the top left. - Click Members.
- 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:
- Click Add at the top left.
- Click Layout Tools.
- Click Lightboxes.
- Click any lightbox to select it.
- Follow the steps in this article to create a custom registration form with code.
- (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:
- Click the Pages icon
at the top left. - Hover over Members Area and click the Show More icon
. - Select Member Signup Settings.
- Click Enable Custom Signup at the bottom.
- Click the Exit icon
at the top right. - Click the Enable Custom Signup toggle.
- Click Choose a Lightbox and select your new lightbox from the drop-down.
- Click Done.
- 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?
|