Hi everyone,
I would like to ask if it is possible to create a form with the Wix Code inputs and connect it to member login without inserting the “member login” widget on my site.
Thank you for your response and collaboration!
I wish you a good day.
Hi! I believe what you said is described here
Or you wnat to implement something different?
Hi Mikhai. Been using your suggested link, however it doesn’t clearly delineate the wix intake form fields to the member profile fields https://hilaryjeon.wixsite.com/eagle1 - am i perhaps missing more details? please advise, thank you Mikhai.
You just need to take off the Wix member login bar and make your own custom login and signup lightboxes using the Wix Users register and login functions from the api.
https://www.wix.com/corvid/reference/wix-users.html
Then you just need to make sure that your member signup settings are setup for custom.
https://support.wix.com/en/article/about-the-member-signup-form
Although you can do it without using code and do the Wix Form route.
https://support.wix.com/en/article/creating-a-custom-signup-form-for-your-members-area
See more about members area here.
https://support.wix.com/en/site-members/setting-up-a-members-area
My custom login lightbox code
import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
$w.onReady(function () {
$w("#forgotPassword").onClick( (event) => {
//wixWindow.lightbox.close()
wixUsers.promptForgotPassword()
.then( ( ) => {
//
} )
.catch( (err) => {
let errorMsg = err; //"The user closed the forgot password dialog"
});
});
});
export function loginButton_onclick(event) {
let email = $w("#email").value;
let password = $w("#password").value;
wixUsers.login(email, password)
.then( () => {
console.log("User is logged in");
wixWindow.lightbox.close();
wixLocation.to(wixLocation.url); //This reloads the same page and allows code to show hidden member parts.
} )
.catch( (err) => {
console.log(err);
$w("#errorMessage").expand(); // You can delete this line if you are not going to add an error message. Use a regular text element set to 'collapse on load' from the Properties Panel.
} );
}
This works perfectly and closes after registering details before moving user to my signup status page, then both names will be saved in contacts and once site member is approved the member details will be added to ‘members’ database.
My signup/register lightbox code
import wixUsers from 'wix-users';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
$w.onReady(function () {
$w("#registerButton").onClick( (event) => {
let email = $w("#email").value;
let password = $w("#password").value;
let first = $w("#firstName").value;
let last = $w("#lastName").value;
wixUsers.register(email, password, {
contactInfo: {
"firstName": $w('#firstName').value,
"lastName": $w('#lastName').value,
}
} )
.then( (result) => {
let resultStatus = result.status;
wixWindow.lightbox.close();
wixLocation.to("/sign-in-status"); //Change the URL ending to whatever page you want to send the user to after they log in.
} );
} );
});
This is my members only page code which uses that profile tutorial as it’s basis to work from.
The only way members can login to my website is through thr login button on my members only page.
The only difference is that when users click on my login button, it then shows my custom login lightbox which will allow the user to log themselves in, then after that happens the lightbox closes itself and the members page is refreshed.
This allows the page code to be started (sort of kicked into gear) so that the login button changes the value to logout and all my member only parts of the page in my strip are now shown.
Without the refresh of the members page, then the member would still be logged into the site, however none of the events on the page would happen, the login button would still say login and the member only strip would stay hidden.
You might not have to do this yourself, so on your login lightbox you could change the url to whatever page you want it to go to, however, just note that if the above happens to you then you know how to fix it.
Also note that the user details when they register are saved in Wix Contacts (CRM), so the email and password is automatically saved along with anything you add to the contact info section like first and last name etc.
Then after they have logged in and gone to their own profile page, they will then have the change n the member profile update page, to change their first or last name and add all their other details as nothing will be there.
Then all this info will be saved into the ‘Members’ dataset from the profile tutorial, so that it will then show up on their profile page and be ready for them if they want to change or edit anything again.
Otherwise, you can just use the Wix Members own My Account page and do it all without code, obviously making sure that you don’t have the login bar on there and keep to your custom login and register lightboxes…
https://support.wix.com/en/article/about-members-area
Finally, if you want to be able to logout and take them to another page, then follow the post example here.
https://www.wix.com/corvid/forum/community-discussion/this-is-how-to-logout-and-go-to-the-page-of-your-choice
My members only page code
import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
$w.onReady( () => {
if(wixUsers.currentUser.loggedIn) {
$w("#loginbutton").label = "Logout";
$w("#membersareaonlystrip").expand();
$w("#whitegapforfooter").hide();
}
else {
$w("#loginbutton").label = "Login";
$w("#membersareaonlystrip").collapse();
$w("#whitegapforfooter ").show();
}
} );
export function loginbutton_onclick(event) {
// user is logged in
if(wixUsers.currentUser.loggedIn) {
// log the user out
wixUsers.logout()
.then( () => {
// update buttons accordingly
$w("#loginbutton").label = "Login";
$w("#membersareaonlystrip").collapse();
$w("#whitegapforfooter ").show();
} );
}
// user is logged out
else {
let userId;
let userEmail;
// prompt the user to log in
wixUsers.promptLogin( {"mode": "signup"} )
.then( (user) => {
userId = user.id;
return user.getEmail();
} )
.then( (email) => {
// check if there is an item for the user in the collection
userEmail = email;
return wixData.query("Members")
.eq("_id", userId)
.find();
} )
.then( (results) => {
// if an item for the user is not found
if (results.items.length === 0) {
// create an item
const toInsert = {
"_id": userId,
"email": userEmail
};
// add the item to the collection
wixData.insert("Members", toInsert)
.catch( (err) => {
console.log(err);
} );
}
// update buttons accordingly
$w("#loginbutton").label = "Logout";
$w("#membersareaonlystrip").expand();
$w("#whitegapforfooter").hide();
} )
.catch( (err) => {
console.log(err);
} );
}
}
export function profilebutton_onclick(event) {
wixLocation.to(`/Members/${wixUsers.currentUser.id}`);
}
export function entermembersbutton_onclick(event) {
wixLocation.to(`/members-area`);
}
export function myaccountbutton_onclick(event) {
wixLocation.to(`/account/my-account`);
}
export function websiteupdatebutton_onclick(event) {
wixLocation.to(`/website-update`);
}