Custom Registration form

Ask the community
, ,
1

Hi, we have the following situation:
Our client has a members only area. To access these pages we use the WIX Member App to enable our users to login to the site.
We need the registration form to include two additional fields (firstname, lastname). To do so I followed this guide: Velo Tutorial: Creating a Custom Registration Form with Code | Help Center | Wix.com

So we want EVERYTHING in the registration process to be as it is now (Emails sent for confirmation, user added to the contact list) but with two additional fields (Firstname, Lastname)

This is my code for the new registration page:

import wixUsers from 'wix-users'; 
function formChanged() { 	
   const passwordValid = $w("#password").valid 	
   const emailValid = $w("#email").valid 	
   const dsgvoValid = $w("#dsgvoCheck").valid 	
   const isFormValid = passwordValid && emailValid && dsgvoValid  	

if (isFormValid) { 	    	
   $w('#submit').enable()         
   console.log('valid') 	} 
else { 		
   $w('#submit').disable() 	} 
} 

$w.onReady(function () {   
   $w('#submit').disable()   
   $w('#email').onChange(formChanged) 	
   $w('#password').onChange(formChanged) 	
   $w('#dsgvoCheck').onChange(formChanged)    

   $w('#submit').onClick( () => {     
      console.log('clicked')     
      // register as member using form data        
      wixUsers.register($w('#email').value, $w('#password').value, {       
         "contactInfo": {        
          "firstName": $w('#vorname').value,         
          "lastName": $w('#nachname').value,         
          "emails": [$w('#email').value],       }     })     
          .then( (result) => {     
          let status = result.status; // "Pending"    
          let approvalToken = result.approvalToken;     
          let user = result.user;     console.log(result)    
           console.log('registered')   } );    }); });

But nothing happens when I clickl submit. The first console logs fire (‘valid’, ‘clicked’ )but not the ones in the wixUsers.register. I have no idea where I am going wrong.

Thanks for any help

2

HI skrobek.

Can you please add a following catch clause to the register call?
Also, please note, you have an unnecessary comma after: “emails”: [$w(’ #email ').value] ,

wixUsers.register(
   $w('#email').value, 
   $w('#password').value, 
   { 
      "contactInfo": { 
         "firstName": $w('#vorname').value, 
         "lastName": $w('#nachname').value, 
         "emails": [$w('#email').value] 
       } 
    }
).then( (result) => { 
     let status = result.status; // "Pending"     
     let approvalToken = result.approvalToken; 
     let user = result.user;     
     console.log(result)                
     console.log('registered') 
  })
  .catch(err => console.log(JSON.stringify(err)));

Regards,
Genry.

3

Hi Genry,

thanks for the reply. I updated the code as suggested but all I get from the catch is: “Internal Server Error (500)”. The error log shows this:
POST https://www.REDACTED-MY-DOMAIN.de/api/wix-sm/v1/auth/register 500 (Server Error)

Any ideas? Thanks …

4

Hi skrobek,

as first step, u can console.log email, password and ContactInfo and make sure all values are valid (e.g. no null values, password is at least 5 chars, email is of valid format).
if problem still happens, u can send to my email (tomp@wix.com) your website and page where registration form is, and i will try to debug.

Thanks

5

Hey skrobek, I’m having a similar issue myself. Were you able to get this sorted out? Thanks in advance!

6

Hi Tom what happened, did it work and how ?

7

hello guys, do you have any update on this? I am having the same error as “Internal Server Error 500”.
thanks in advance.

8

Hi Mark,

I was able to get mine running. Unfortunately, I don’t remember the details. For what it’s worth, my current registration code looks like this:

let emails = [];
 let email = $w("#email").value;
 let password = $w("#password").value;
 let firstName = $w("#guardiansName").value.split(' ').slice(0, -1).join(' ');  //pulling first and last...
 let lastName = $w("#guardiansName").value.split(' ').slice(-1).join(' ');  // ...from full name

emails.push(email);


wixUsers.register($w('#email').value, $w('#password').value, {
 "contactInfo": {
 "firstName": firstName,
 "lastName": lastName,
 "emails": emails
                }
            })
            .then(() => {
                wixUsers.login(email, password)
                    .then(() => {
                        Send();  //calls function to send a confirmation email
                        console.log("logged in");
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            });

Hope that might help and sorry I couldn’t offer more insight.

Best of luck!

9

Hi Justin,

Thank you so much for taking the time sharing this. I really appreciate it :slight_smile:
I’m going to give it another try and hope everything will go well.