Custom Registration Form Debug?

Ask the community
,
1

Hi there. I’ve been trying to create a registration form by following the instructions and example provided at Velo Tutorial: Creating a Custom Registration Form with Code | Help Center | Wix.com . The user input form page I’m working on is currently at https://scottoffline.wixsite.com/homepower/copy-of-contact-1

Very new to JS, I quickly hit a wall and asked a developer friend (who’s not a Wix user) to review the code. He/We came up with the following code. I’ve cleared the errors (I think), but it still isn’t working.

Any suggestions or troubleshooting help is greatly appreciated. Thanks in advance.

Scott

import wixUsers from ‘wix-users’;

$w.onReady( function () {
$w(‘#button1’).onClick( () => {
let email = $w(‘#input3’).value;
let password = $w(‘#input4’).value;
let radioGroupSelection;
const selectionValue = $w(‘#radioGroup1’).value;

//determine mailing selection
if (selectionValue === “Both”) {
radioGroupSelection = “Home Power and its partners”;
} else if (selectionValue === “HP”) {
radioGroupSelection = “Just Home Power”;
} else if (selectionValue === “None”) {
radioGroupSelection = “No thanks”;
} else {
radioGroupSelection = “something went wrong if we got this far”;
}

// register as member using form data
wixUsers.register(email, password, {
“contactInfo”: {
“firstName”: $w(‘#input1’).value,
“lastName”: $w(‘#input2’).value,
“email”: [$w(‘input3’).value],
“labels”: [radioGroupSelection],

//still part of options hash passed into register function along with email and
// pw params, but we can’t use a number here due to the value of selectionValue
// coming from the radio group selection, which is gonna be a string.
“selectionValue”: $w(‘#radioGroup1’).value
}
}).then( (result) => {
let status = result.status; // “Active”
let user = result.user;
});
});
});

2

This is my code for my own custom signup lightbox:

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("/main-page");  //Change the URL ending to whatever page you want to send the user to after they log in.
      } );     
    } );
    
});

This works perfectly for me and closes after registering their details before returning to home page, then both names will be saved in contacts and once site member is approved the member details will be added to ‘members’ database.

Try using my code and adding your parts to it and see if you can get it to work then.

3

Try removing “labels”

4

Thanks so much for the reply, givemewhiskey. Super helpful. The key difference that’s hanging me up is that your code (and the sample code provided by Wix) seems to identify the input form fields as “#firstName”, “#lastName”, etc. When I use those names in my code they produce errors that are only resolved when I switch the names back to “#input1”, “#input2”, etc. I haven’t found any option to rename my user input fields (e.g. from input1 to firstName). Any guesses/ Am I building the form incorrectly in some way?

5

@scottoffline

#firstName, #lastName, #email and #password are just the input id names that I have called my user input elements.

No you are not building it incorrectly! All that is probably wrong with yours is that you have still got the user input elements as they were when you brought them into the Wix Editor and haven’t changed any of them.

When you add a user input element they are named as you place them, so #input1, #input2, #input3 etc, the same with dropdown, radio buttons and all the others.

You can name anything what you want to name, all you have to do is to change the element’s own id name in it’s properties. People will change the names so that they correspond to whatever they are being used for and are easier to remember and use within the code itself.

Check Wix Code Basics about properties here if you need to know more.

Just hover over the element you are using and the id name will show up in the top left as shown below:

Then simply right click on your element and choose properties and change the name to whatever you want, as shown below.

To fix the code to work for you, simply just check that all your id names match up with the code.

So if your user inputs are like this:
First Name user input: #input1
Last Name user input: #input2
Email user input: #input3
Password user input: #input4

Then simply change the values in the code to match up with your elements like this

  let email = $w("#input3").value;
   let password = $w("#input4").value;
   let first = $w("#input1").value;
   let last = $w("#input2").value;

   wixUsers.register(email, password, {
       contactInfo: {
        "firstName": $w('#input1').value,
        "lastName": $w('#input2').value,

The same with the button too, if your button is #button1, then simply change it like this too.

$w("#button1").onClick( (event) => {
6

@givemeawhisky Can NOT thank you enough for your generous time and support! I’ve got it working fine now, including labels. Would never have happened without your input. Best regards.