Phone Number input not saving correcttly

I created a custom sign up form for my website’s users and I need to have their phone number stored so we can send them automated sms. For some reason when they enter their phone number on mobile it separates the first couple digits of the phone number and registers them as area codes. For example if I enter 123-456-7890 the number that would be saved in the users contact information will appear as +1 234-567-890 or even +12 345-678-90. This causes my automated text messages to fail because it’s not sending the text to these random number variations instead. Anyone know how to fix this issue? I attached the code I have below. The signup form collects the name, email, phone number, birthday and password. Part of the code also takes the user data and puts it into a CMS. I also added two images of what I typed in and what I see in the user’s contact information. In this case it just randomly duplicated the 7 as the country code. If there is a way to either drop the country code or just set it automatically to +1 instead it would be really helpful. Thanks!

import { authentication } from 'wix-members-frontend';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
import wixUsers from 'wix-users';
import { contacts } from 'wix-crm-frontend';

let emails = [];

$w.onReady(function () {
    $w('#button1').onClick(() => {
        const contactInfo2 = {
            name: {
                first: $w('#registerFirstName').value,
                last: $w('#registerLastName').value
            },
            emails: [
                {
                    email: $w('#registerEmail').value,
                },
            ],
            phones: [
                {
                    phone: $w('#registerPhoneNumber').value,
                    primary: true
                }
            ],
            birthday: [
                {
                    birthday: $w('#registerBirthday').value,
                    primary: true
                }
            ]
            
        };

        // Creating or updating contact
        contacts.appendOrCreateContact(contactInfo2)
            .then((resolvedContact) => {
                return resolvedContact;
            })
            .catch((error) => {
                console.error(error);
            });

        const password = $w('#registerPassword').value;
        const email = $w('#registerEmail').value;
        let birthday = $w('#registerBirthday').value;
        let phoneNumber = $w('#registerPhoneNumber').value;
        let firstName = $w('#registerFirstName').value;
        let lastName = $w('#registerLastName').value;
        emails.push(email);

        let contactInfo = {
            "email": email,
            "firstName": firstName,
            "lastName": lastName,
            "birthday": birthday,
            "phoneNumber": phoneNumber,
        };

        let options = {
            contactInfo: {
                firstName: firstName,
                lastName: lastName,
                birthday: birthday,
                emails: emails,
                phoneNumber: phoneNumber,
            },
            privacyStatus: 'PUBLIC'
        };

        authentication.register(email, password, options)
            .then((registrationResult) => {
                const status = registrationResult.status;
                console.log('Member registered and logged in:', registrationResult);

                wixData.insert("Registration", contactInfo)
                    .then((item) => {
                        console.log("done");
                        wixLocation.to("/page")
                    })
            })
            .catch((error) => {
                console.error(error);
            });
    });
});

So your → phoneNumber is the issued value in your project.

How to solve it?

Well, first of all → why you are not working with the → CONSOLE <— ???
I do not recognize any CONSOLE-LOGS for → DEBUGINGS ← on your CODE.

Instead of…
let phoneNumber = $w('#registerPhoneNumber').value;
…use…
let phoneNumber = $w('#registerPhoneNumber').value; console.log('phone:' phoneNumber);

Check the CONSOLE for RESULTING-OUTPUT.

So let’s reconstruct your issue…

-we are typing in → 123-456-7890 <------------ let it be our phonenumber.
-system automaticaly recognizes the COUNTRY and adds the COUNTRY-PREFIX (+33).
-at the end, you get → +33 123-456-7890 → but you wanted to have → 0123-456-7890

So let’s optimize it. Since you are using code to fill your CMS-DATA, you can manipulate your inputs, before you make outputs (input → manipulation → output)

The main question here will be → at which point exactly does the automatic manipulation take place by the system ?

-after input?
-after save?

For some reason when they enter their phone number on mobile it separates the first couple digits of the phone number and registers them as area codes. For example if I enter 123-456-7890 the number that would be saved in the users contact information will appear as +1 234-567-890 or even +12 345-678-90.

When does the automatic change takes place?
a) while you do the input?
b) after data has been changed?

If it is → (a) ← then you are lucky and you can simply REMANIPULATE it again, by usage of some code.

let phoneNumber = $w('#registerPhoneNumber').value ---> **+33** 123-456-7890
let manipulatedNumber = manipulate_phoneNumber($w('#registerPhoneNumber').value)
function manipulate_phoneNumber(phoneNumber) {
  phoneNumber = phoneNumber.replace(/^\+\d+\s/, '');
  console.log(phoneNumber);
  return phoneNumber;
}

//calling the function with ...
manipulate_phoneNumber(phoneNumber)
//...or....
manipulate_phoneNumber('+33 123-456-7890')
//...or...
manipulate_phoneNumber($w('#registerPhoneNumber').value)

If it is (b) ← this will be a little bit harder to REMANIPULATE it.

Hi Russian-dima, Thank you for taking the time to reply to my post :blush: This is my breakdown to hopefully clarify some things

Yes phoneNumber seems to be the issue.

Honestly I’m very new to coding and have been learning as I go so I was never really sure how to use the console. I’ll study it and try to use it more in my code.

Sorry, I’m not quite sure I understand what you mean by after input and after save. From what I think happens is after the user presses the submit button, the automatic manipulation takes place and saves the phone number into the contact with the incorrect country code.

Again not quite sure what you mean, but based off of my explanation in the last quoted response above I think the automatic change takes place after the user input the phone number into the input field and press the submit button.

I tried implementing the functions you wrote into my code but it seems like nothing has changed as the country code is still incorrect. The contact phone number is still saved as with the wrong country code (exact same as my member contact page screenshot in my initial post). Here is how I implemented the code

import { authentication } from 'wix-members-frontend';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
import wixUsers from 'wix-users';
import { contacts } from 'wix-crm-frontend';

let emails = [];

function manipulate_phoneNumber(phoneNumber) {
    phoneNumber = phoneNumber.replace(/^\+\d+\s/, '');
    console.log(phoneNumber);
    return phoneNumber;
}

$w.onReady(function () {
    $w('#button1').onClick(() => {
        
        const password = $w('#registerPassword').value;
        const email = $w('#registerEmail').value;
        let birthday = $w('#registerBirthday').value;

        let phoneNumber = manipulate_phoneNumber($w('#registerPhoneNumber').value)

        let firstName = $w('#registerFirstName').value;
        let lastName = $w('#registerLastName').value;
        emails.push(email);

        const contactInfo2 = {
            name: {
                first: $w('#registerFirstName').value,
                last: $w('#registerLastName').value
            },
            emails: [{
                email: $w('#registerEmail').value,
            }, ],
            phones: [{
                phone: manipulate_phoneNumber($w('#registerPhoneNumber').value),
                primary: true
            }],
            birthday: [{

                birthday: $w('#registerBirthday').value,
                primary: true
            }]

        };

        // Creating or updating contact
        contacts.appendOrCreateContact(contactInfo2)
            .then((resolvedContact) => {
                return resolvedContact;
            })
            .catch((error) => {
                console.error(error);
            });

        let contactInfo = {
            "email": email,
            "firstName": firstName,
            "lastName": lastName,
            "birthday": birthday,
            "phoneNumber": phoneNumber,
        };

        let options = {
            contactInfo: {
                firstName: firstName,
                lastName: lastName,
                birthday: birthday,
                emails: emails,
                phoneNumber: phoneNumber,
            },
            privacyStatus: 'PUBLIC'
        };

        // Note: Do not set approvalToken to remove email confirmation
        // options.approvalToken = 'AUTO';

        authentication.register(email, password, options)
            .then((registrationResult) => {
                const status = registrationResult.status;
                console.log('Member registered and logged in:', registrationResult);

                wixData.insert("Registration", contactInfo)
                    .then((item) => {
                        console.log("done");
                        wixLocation.to("/page")
                    })
            })
            .catch((error) => {
                console.error(error);
            });
    });
});

Back to your issue.

  1. To use the console is not that difficult. You can use the console either directly inside of your Wix-Editor (integrated console), or you do it on your published live site. I would recommend always to do it on live-site.

How to use the CONSOLE?
If you are working with GOOGLE-CHROME for example, all you have to do is …
-press F12 on your keyboard when you are inside your browser.
-navigate to → CONSOLE on the right menu-tab.
-Once clicked onto → CONSOLE ← you will see all the LOGS of your running script (programm). This way you can read your code and understand it much better to be able to do DEBUGGING on your own.

  1. Sorry, I’m not quite sure I understand what you mean by after input and after save.
    Such little details are very important in the world of coding.

Every little step inside your script can change everything. And in your case it is exactly the case i think. It is always important to know, when exacly do happen the action…

just to give you an example…
a) onMouseOver
b) onMouseOut
c) onClick
d) onDoubleclick
d) and so on…

In your case…

  1. onInput
  2. onChange
  3. onSave

Like already mentioned before, it will depend on when the manipulating action takes place.

For example:

  1. If the automatic phone-number manipulation takes place directly on or after INPUT (still before save process) → then you are able to use my provided code, which would change the automatic manipulation back to normal.

  2. If the automatic manipulation takes place later, that means after the data has been saved, that would change everything, because now you have to pay attention, when your automatic sms will be send (direcly after saving process?).

I need to have their phone number stored so we can send them automated sms.

So you have first to find out and make sure when exactly does the automatic manipulation of the code happen? If you can remanipulate the phoneNumber before the saving process, then you should use my provided code

If it happens in the saving-process (after data has been saved), then you should pay attention, not to start the automatic sms delivery, because at that point you still first have to REMANIPULATE your phone-number back to normal, right?

The code i provided does anything else then cut off the PREFIXES of any provided phonenumber.

So your job will be…

  1. Find the exact checkpoint, when the manipulation takes place.
  2. Make sure not to start the sms-send process, before not having done the remanipulation back to normal phone-number.

But since i do not know exactly what else has been used or done inside your project, it is difficult to help, especialy if you have used connected DATASETS and other out of the wix-box-elements aswell.

The phone-number is inside —> contact-info.

    contactInfo: {
        firstName: firstName,
        lastName: lastName,
        birthday: birthday,
        emails: emails,
        phoneNumber: phoneNumber,
    },

The data should be saved on registration-process…so this must be the right place to do the REMANIPULATION i think.

authentication.register(email, password, options)
            .then((registrationResult) => {
                const status = registrationResult.status;
                console.log('Member registered and logged in:', registrationResult);

                wixData.insert("Registration", contactInfo)
                  .then((item) => {
                      console.log("done");
                      wixLocation.to("/page")
                  })
            })
            .catch((error) => {
                console.error(error);
            });
    });

Try to use the console-log at this point. Check which value does have the PHONE-NUMBER at this point…

authentication.register(email, password, options)
            console.log(options);
            .then((registrationResult) => {console.log(registrationResult)
                const status = registrationResult.status; console.log(status);
                console.log('Member registered and logged in:', registrationResult);

                wixData.insert("Registration", contactInfo)
                  .then((item) => {
                      console.log("done");
                      wixLocation.to("/page")
                  })
            })
            .catch((error) => {
                console.error(error);
            });
    });

Ok, now i see that you are using — > INSERT(), that means you do not use DATASET

So that menas the saving process starts EXACTLY here at this point…

wixData.insert("Registration", contactInfo)
.then((item) => {
    console.log("done");
    wixLocation.to("/page")
})

…and exactly here you have to make sure that you have the right provided phone-number, you are going to save at that point.

Figure it out! Thanks for your help :slight_smile:

1 Like

A few things to check: 1. Console Logs: It’s really helpful to use console logs to debug. I noticed there aren’t any in your code. Adding console.log(phoneNumber) before saving it can show if the number is getting altered before it’s saved. 2. Input Formatting: You might want to ensure the phone number is formatted correctly before saving. There are libraries like libphonenumber that can help with this. This ensures you always store it in the same format. 3. Country Code: If all your users are from the US, you can set the country code to +1 automatically. Otherwise, you might need a dropdown for users to select their country code. Also, if you’re testing, using free uk number can be helpful. United Kingdom temporary phone numbers can be found online, and they’re great for testing purposes.