Unable to select a custom signup form for members area.

Ask the community
, ,
1

I am trying to use the Wix Members app and create a custom sign up form to collect some more data when a user signs up. I have the form created and when I access it in a live version of the site, it work and adds a new contact/member. But when I try to enable the custom signup, it gives me the option to select a lightbox (so I made my form a light box), I can see the light box in the list, I can select it but every time I click done, the “What does it link to” field is still blank and I can’t click save. Below are some screenshots of what it looks like. Any help would be greatly appreciated.

1007×642 49.9 KB

896×637 50.6 KB

2

So somehow the custom sign up form now works. Well kind of. I am able to select a lightbox but when I click sign up on the login in page (the Wix default login page), my custom signup form/lightbox does not show up. I created my own login page and it works fine there but not when I use the default Wix login page.

My site is at www.mikenevitt.com and the lightbox is called Sign up.

Thanks!

3

Hi Mike,

While using lightbox as your own form its supposed to replace the wix default login page.

Instead of using the regular the wix default login page, you can create your own customized login form.
It lets you to create your on login and signup form without limitations, but still allow you to save your new member at the wix- crm module. Moreover, you can use all the wixUsers functions.

Here’s an example of a signup and login form with code snippets:

2422×1662 278 KB

1 . Add a lightbox, the signup and the login buttons. Afterwards, add the following code:

import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';

export function signUp_click(event) {

//example of fields
 let email = $w('#input6').value
 let password = $w('#input10').value
 let firstName = $w('#input4').value
 let lastName = $w('#input5').value
 let phone = $w('#input7').value

    wixUsers.register(email, password, {
            contactInfo: {
//all the fields beside email and password
 "firstName": firstName,
 "lastName": lastName,
 "phone": phone,
            }
        })
        .then((result) => {
 let resultStatus = result.status;
            wixWindow.lightbox.close(); // don't forget to close the lightbox
        });
}
  1. Connect your lightbox to one of your pages by entering to the
    “Member signup settings”-> “Edit custom signup” → at the fields “What does it link to” choose the desirable light box. It’s a one-time action that you can do on any member page.

3.Add a logIn and logout buttons to your home page (or any page that is going to be the entry one).
The login button’s event is going to open the lightbox.

4.Add an event handler that runs when the buttons are clicked and add the following code:

import wixWindow from 'wix-window';

export function logInButtton_click(event) {
    wixWindow.openLightbox("sighUp").then(() => {
           console.log("login succeed");
            })
}

export function logout_click(event) {
    wixUsers.logout();
}

Obviously, you can change the lightbox and the buttons as you wish. That’s the advantage of using a lightbox as your own login and signup page.

Have a nice day and best of luck!
Sapir

4

Sapir - thanks so much for the reply and info. When this originally wasn’t working I did create my own login page but I my login button simply redirected you to the Wix login page. In your example above you login button opens the lightbox. But I don’t see where in the code you handle the login part of the lightbox. Am I missing something there?

5

Hi Mike,

First of all, I believe your mistake was, that you add at the lightbox an login element instead of a regular button that it’s event is going to be the entry to the site.


This element automatic redirected you, to the wix login page while pressing on login.

Second, you correct ,at my example I only reference to the signup button.
The following code runs while clicking on the login button at the llightbox :

pay attention, if you use this example write the functions logIn_click() and signUp_click() inside the lightbox’s page, and the functions logInButtton_click() (that open the lightbox) and logout_click() at the entry page .


import wixUsers from 'wix-users';

export function logIn_click(event) {
 const email = $w('#email').value;
 const password = $w('#password').value;
 
wixUsers.login(email, password) . //if the member exist in the member  .        list, the lightbox will close and you will return to the preview page.                 
        .then(() => {
            console.log("User is logged in");
            wixWindow.lightbox.close();
        })
        .catch(err => {
            console.log(err)
        })
}

Hope its help!
Have a nice day and best of luck!
Sapir