Custom member form

I created a custom member form for users to request a membership to my site. I set the member settings to “people I approve”. At first, I only created two fields: for email, password, and “register” button. When users clicked the “register” button it directed them to another lightbox called “thanks”. I worked perfectly until I added more fields. Now the “register” button doesn’t link to anything. The form still works properly on the backend, but not longer links to the “thanks” page. I’ve tried to troubleshoot in various ways. I don’t if it needs to be debugged and I don’t know how to do that.
Please see the page code below. I will also include a few screen shots.

import wixUsers from ‘wix-users’;
import wixLocation from ‘wix-location’; // For full API documentation, including code examples, visit Velo API Reference - Wix.com

$w.onReady( function () {
$w(‘#register’).onClick( function () {
let FullName = $w(‘#Full Name’).value;
let Credentials = $w(‘#Credentials’).value;
let Practice = $w(‘#Practice’).value;
let StateProvince = $w(‘#StateProvince’).value;
let Country = $w(‘#Country’).value;
let email = $w(‘#email’).value;
let password = $w(‘#password’).value;
wixUsers.register(FullName, Credentials, Practice, StateProvince, Country, email, password)
.then(() => {
wixLocation.to(‘/thanks’);
})
})
})

Hi JoGirl

The problem you are having is likely to be that you are not using the register function correctly.

Your code says…
wixUsers.register(FullName, Credentials, Practice, StateProvince, Country, email, password)

The wix-users register function api is defined as…
function register(email: String, password: String, [options: RegistrationOptions])

So basically when you had email and password as the first two arguments all would work well.

Now you have pushed them to the end of the argument list and added five additional arguments. The register function only takes three arguments. The register function expects an object as the third argument you are sending a string so the function is probably crashing.

What you need to do is add the new properties to the options argument. The options argument is a contactInfo structure . Also since the fields you are looking to add are not standard contactInfo properties you may need to add CustomFields to meet your requirements.

Another approach and one that will give you more flexibility with the data you collect is to create your own members area using this tutorial as a model…

Steve

1 Like

HI Steve,

Thanks for getting back to me. Sorry it took so long to reply. I was away for the weekend. Please bear with me, as I am not that familiar with writing code. But, I think I understand what you re saying. We must gather the additional information (ie. name, credentials, name of practice, etc.) about those who wish to be members in order to approve them because this is a forum for veterinarians only.

Can you show me how to write the code correctly? I’m not sure where I need to include the additional options to the wix-users register function api… " function register(email: String, password: String, [options: RegistrationOptions])

I can also set up the page differently, if need be. Another words, I can put the “email” and password" fields on top of the additional fields, if it will help. Also, I went into the contacts properties and added the custom fields.

As I said, I am not familiar with writing code. I have copied and pasted the existing code below. It would be SO HELPFUL if you could tweak my existing code, so it looks the way it needs to look to work properly!

Please let me know if you need any more info to help me get this figured out.

Thanks, again!
Johanna

import wixUsers from ‘wix-users’;
import wixLocation from ‘wix-location’; // For full API documentation, including code examples, visit Velo API Reference - Wix.com

$w.onReady( function () {
$w(‘#register’).onClick( function () {
let FullName = $w(‘#Full Name’).value;
let Credentials = $w(‘#Credentials’).value;
let Practice = $w(‘#Practice’).value;
let StateProvince = $w(‘#StateProvince’).value;
let Country = $w(‘#Country’).value;
let email = $w(‘#email’).value;
let password = $w(‘#password’).value;
wixUsers.register(FullName, Credentials, Practice, StateProvince, Country, email, password)
.then(() => {
wixLocation.to(‘/thanks’);
})
})
})
//TODO: write your page related code here…

export function register_click(event) {$w(‘#register’)}

1 Like

JoGirl: Please post the published url of the page you are having problems with so I can see what the code connects to.
Cheers
Steve

vitalvet.org

The websit’s homepage is vitalvet.org. If you click the login button at the top right corner, it will take you to the member sign up page that I’m refering to.

Hi Johanna

Something to get yourself familiar with is reading the Wix API documents which will tell you what functions to call and with what arguments.

In your code you have decided to use wix-users.register().
Let’s take a look at the API documentation for this function.

register( )

Registers a new site member.

function register(email: String, password: String, [options: RegistrationOptions]): Promise

Description

The register() function returns a Promise that resolves to a RegistrationResult object when the user is either registered or is pending registration.
So breaking this call down: function register( email : String, password : String, [ options : RegistrationOptions]): Promise

Register takes three arguments in this order email, password, options. So to begin with, when you call register you should always have email and password as your first two arguments.

So now let’s look at the third argument options . This is shown with square brackets [] . These signify that the argument is optional and so doesn’t need to be there if you don’t need it. We do so let’s have a look and see why.

Now email and password are typed as String which we can handle easily. We need to figure out how to create this thing called RegistrationOptions . Well let’s look at the documentation for RegistrationOptions:

RegistrationOptions
An object that contains information about a site registration.
Type
Object
Properties
contactInfo  ContactInfo Contact information.

So RegistrationOptions are really just the same ContactInfo that is typically used with the wix-crm.createContact function. Let’s look at the ContactInfo documentation.

ContactInfo
An object that contains information about a site contact.
Type
Object
Properties
firstName    String - Contact's first name.
lastName     String - Contact's last name.
picture      String - Contact's image source.
emails       String[ ] - List of contact's email addresses.
loginEmail   String - Email address the contact who is also a member uses to log into the system.
phones       String[ ] - List of contact's phone numbers.
labels       String[ ] - List of contact's labels. Labels are used to organize contacts. When setting the labels property, you can only list labels that already exist in your site's Contacts List.
language     String - Contact's language.
customFields String | - Any number of custom fields. Customs fields are
             Number | - used to store additional information about your
             Date     - site's contacts. When setting a custom field, use key:value pairs where the key matches the names defined in your site's Contacts List. You can only set values for custom fields that already exist in the Contacts application.

Now you have the following properties that you are trying to save into the CRM using register: FullName, Credentials, Practise, StateProvince, Country. The problem we have is that the properties that are available to us in the ContactInfo object are not listed as the ones you want. You could map FullName to firstName and lastName but that might not meet your needs.

This is what the customFields property is for. Custom fields allows you to create a special object containing the custom fields that you want to add to your CRM. IMPORTANT NOTE: These fields MUST be predefined in your CRM for this to work. So if you haven’t created the custom fields for FullName, Credentials, Practise, StateProvince, Country in your contacts then you need to do this or the code I propose below will not work.

OK so let’s fix your code!

import wixUsers from 'wix-users'; 
import wixLocation from 'wix-location'; 
// For full API documentation, including code examples, visit http://wix.to/94BuAAs  
$w.onReady(function () {
     $w('#register').onClick(function () {
         let FullName = $w('#Full Name').value;
         let Credentials = $w('#Credentials').value;
         let Practice = $w('#Practice').value;
         let StateProvince = $w('#StateProvince').value;
         let Country = $w('#Country').value;
         let email = $w('#email').value;
         let password = $w('#password').value;
         
         // Here we create the contactInfo Object
         let contactInfo = { 
         "emails": [email],
         "FullName": FullName,
         "Credentials": Credentials,
         "Practice": Practice,
         "StateProvince":StateProvince,
         "Country":Country
          };
          
          // Include the contactInfo in registration
         wixUsers.register(email, password, contactInfo)          .then(() => {
             wixLocation.to('/thanks');
         });
       });
 }); 
 //TODO: write your page related code here..  
 export function register_click(event) {
     $w('#register');
 }

Hopefully this will do what you want.

Now one last thing. These values will ONLY be available to you in the dashboard view of the contacts in your CRM. They will not be available to read from the CRM. To do this you will need to use your own local data collection.

Cheers
Steve

1 Like

Hi Steve,
I’ve wanted to let you know that I’ve changed the url of the page I’m having problems with to vitalvet.org/testing, so that it’s no longer the homepage. I created a “coming soon page” page as the homepage until I get things working properly. So, please go to www.vitalvet.org/testing and click on the top right corner, where it says to “login” to see the page custom member sign-up form that I’m having problems with. I really can’t move forward with anything, until I can figure this out. Really appreciate your help!

Thanks, again.
Johanna

Hi Steve,
Thank you so much for this detailed explanation! I will look everything and see if I can make it work!

Thanks,
Johanna

hi steve,
maybe this is one of the best detailed explanation i have come across so far, u made my life easier with connecting the custom registration form to wix CRM.
i applied your code and it seems that it works well however im facing two issues:-

1- even though i know that the password is saved in the crm as i tried to login and it works, however im not able to see the password in the wix crm contact list details.

2- the first name, second name, email are showing in the crm, however all the other values are not showing in the wix crm contact list.

is this normal? or there is something missing in the code?

Hi There. OK what is the web page you are working on? With this any developer on the forum can review your code and get a feel for what might be wrong. Additionally Wix Moderators can look behind the scenes at how you have structured your Contacts in the CRM.

Also can I make a suggestion?

Can you start a new post that refers to this post as we continue? If we make a post too long with multiple answers it can make it hard for other forum members to review problems and solutions. Hope we can resolve your challenge!

@stevendc , thank your for your reply, i will start a new post with all the details