I’m new to coding, but I’ve been reading these forum posts for years and have learned a lot.
I created a custom Member Registration form on a Lightbox. I’m trying to find a way to sync data from the form to the Contact area on the Wix dashboard. I read a couple posts that I think relate to what I’m trying to do, but the code I have doesn’t work. It successfully registers users as members, but the info does not sync to the Contact area, or to the member’s Account Info page. Basically, they input their information and it goes nowhere except to the Database.
The code I have on the Lightbox is below, am I on the right track?
import wixUsers from 'wix-users';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
$w.onReady(function () {
$w('#submitButton').onClick(() => {
let email = $w("#email1").value;
let password = $w("#password").value;
let firstName = $w("#firstname").value;
let lastName = $w("#lastname").value;
let position = $w("#position").value;
let phone = $w("#phone").value;
let howTheyHeard = $w("#dropdown1").value;
let organization = $w("#organization").value;
let address = $w("#address").value;
let gradeLevel = $w("#gradeLevel").value;
let comments = $w("#moreinfo").value;
wixUsers.register(email, password, {
contactInfo: {
"first name": firstName,
"last name": lastName,
"email": email,
"position": position,
"phone": phone,
"how they heard": howTheyHeard,
"organization": organization,
"address": address,
"grade level": gradeLevel,
"comments": comments,
}
})
.then((result) => {
let resultStatus = result.status;
wixWindow.lightbox.close();
wixLocation.to("/member/me");
});
});
});
$w.onReady(function () {
$w('#submitButton').onClick(function () {
let email = $w('#email1').value;
let password = $w('#password').value;
wixUsers.register(email, password)
})
})
Also, when you work with custom fields in your Contact List, they must be written in the exact same way that you have added them.
So if your ‘how they heard’ field is written with caps at the start like this ‘How They Heard’, then it must be written in like that in your code.
This works perfectly and closes after registering details before moving the user onto the signup status page, then both names will be saved in Contacts from the Dashboard and once site member is manually approved by the client, the member details will be added to ‘members’ database which is from this tutorial here. https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area
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.
} );
} );
});
Finally, just so that you are aware, you don;t need the two submit button click events as they are doing the same thing.
$w('#submitButton').onClick(function () {
This is how it is added to your code automatically if you add the onClick event handler function to the element through the properties panel.
If you already have it in your code, say like you copied it from another page etc, then when you add the onClick event in the properties panel, it will add a ‘1’ to the end of the name as you already have that name used on your page.
It will also add this new export function line at the end of your current code, so make sure that you delete it if it is not needed.
If you have it already on your page, then simply delete the added ‘1’ from the end of the onClick name in the properties panel and it will be fine with your existing code and it won’t add an additional line.
$w("#submitButton").onClick( (event) => {
This is how you write it when you include the event handler function into your code itself.
With this method you do not need to add the event handler function through the properties panel for it as it is running through the code.
I changed my code to the following, and now it does not even register users as members. The data is submitted to the database, but users are no longer registered as a member.
import wixUsers from 'wix-users';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
$w.onReady(function () {
$w("#submitButton").onClick(() => {
let email = $w("#email1").value;
let password = $w("#password").value;
let firstName = $w("#firstname").value;
let lastName = $w("#lastname").value;
let position = $w("#position").value;
let phone = $w("#phone").value;
let howTheyHeard = $w("#dropdown1").value;
let organization = $w("#organization").value;
let address = $w("#address").value;
let gradeLevel = $w("#gradeLevel").value;
let comments = $w("#moreinfo").value;
wixUsers.register(email, password, {
contactInfo: {
"firstName": $w('#firstname').value,
"lastName": $w('#lastname').value,
"email": $w("#email1").value,
"position": $w("#position").value,
"phone": $w("#phone").value,
"how they heard": $w("#dropdown1").value,
"organization": $w("#organization").value,
"address": $w("#address").value,
"grade level": $w("#gradeLevel").value,
"comments": comments
}
})
.then((result) => {
let resultStatus = result.status;
wixWindow.lightbox.close();
wixLocation.to("/member/me");
});
});
});
It does register as members when I add the following code to the bottom, but the contact info still does not go anywhere.
$w.onReady(function () {
$w('#submitButton').onClick(function () {
let email = $w('#email1').value;
let password = $w('#password').value;
wixUsers.register(email, password)
})
})
Firstly, make sure that you are testing this on a live site and not in preview mode as Wix Users is only fully functional on a live site. The APIs in wix-users are only partially functional when previewing your site. View a published version of your site to see their complete functionality.
If you add the second piece of code you are basically doing what the first piece of code should be doing.
The fact that the second piece works which only contains the default user inputs that Wix normally collect with email and password, then it might be an error with the custom fields still that are throwing it.
I would suggest that you go through masking out all of the additional lines as below and then unmask one at a time and test it to see if it runs or not.
If one fails then double check your custom fields and make sure that they are exactly the same in the code and in your contact list.
How They Heard must be How They Heard;
How they heard must be How they heard;
So first time test like this…
import wixUsers from 'wix-users';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
$w.onReady(function () {
$w("#submitButton").onClick(() => {
let email = $w("#email1").value;
let password = $w("#password").value;
let firstName = $w("#firstname").value;
let lastName = $w("#lastname").value;
let phone = $w("#phone").value;
//let position = $w("#position").value;
//let howTheyHeard = $w("#dropdown1").value;
//let organization = $w("#organization").value;
//let address = $w("#address").value;
//let gradeLevel = $w("#gradeLevel").value;
//let comments = $w("#moreinfo").value;
wixUsers.register(email, password, {
contactInfo: {
"firstName": $w('#firstname').value,
"lastName": $w('#lastname').value,
//"phone": $w("#phone").value,
//"position": $w("#position").value,
//"how they heard": $w("#dropdown1").value,
//"organization": $w("#organization").value,
//"address": $w("#address").value,
//"grade level": $w("#gradeLevel").value,
//"comments": $w("#moreinfo").value
}
})
.then((result) => {
let resultStatus = result.status;
wixWindow.lightbox.close();
wixLocation.to("/member/me");
});
});
});
Second time test like this and so on…
import wixUsers from 'wix-users';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
$w.onReady(function () {
$w("#submitButton").onClick(() => {
let email = $w("#email1").value;
let password = $w("#password").value;
let firstName = $w("#firstname").value;
let lastName = $w("#lastname").value;
let phone = $w("#phone").value;
let position = $w("#position").value;
//let howTheyHeard = $w("#dropdown1").value;
//let organization = $w("#organization").value;
//let address = $w("#address").value;
//let gradeLevel = $w("#gradeLevel").value;
//let comments = $w("#moreinfo").value;
wixUsers.register(email, password, {
contactInfo: {
"firstName": $w('#firstname').value,
"lastName": $w('#lastname').value,
"phone": $w("#phone").value,
"position": $w("#position").value,
//"how they heard": $w("#dropdown1").value,
//"organization": $w("#organization").value,
//"address": $w("#address").value,
//"grade level": $w("#gradeLevel").value,
//"comments": $w("#moreinfo").value
}
})
.then((result) => {
let resultStatus = result.status;
wixWindow.lightbox.close();
wixLocation.to("/member/me");
});
});
});
@givemeawhisky Thanks for your response! I’m testing right now and it seems like you’re right. It successfully registers when I only ask for name and email, so I’m testing to find the one that’s throwing things off. Thanks!
I have it set to approve members automatically, should that change anything?
I realized that my “grade” field is also not syncing. I have it setup as a multiple-selection field with labels and values (see photos).
Right now the respective code is
let grade = $w("#gradeLevel").value;
and
"grade": $w("#gradeLevel").value,
But it does not sync to the contact field with the “grade” custom field I have in Contacts. Is there a different coding setup for a multiple-selection field like this, since it is not a text field?
A RadioButtonGroup is used to select one option from a group of options. For your purpose you should use a CheckBoxGroup. You can then set up as many options as you want, in whatever layout you want.
