Issues with custom fields on Lightbox Sign Up Form

Ask the community
, , ,
1

Question:
I’m wanting to add a custom text input field to to my Lightbox sign up form but when the form is submitted, the field information is not sent to the Site Members page.

Becoming a member of my community site is subject to approval based on what the user types in the custom field. This field is called “Whanau Connection”. Basically it’s just asking how you’re connected to the community.

When a moderator or site admin goes to the Site Members page and looks at the pending submissions they should see the response to the Whanau Connection field but it doesn’t show up.

SITE MEMBERS
SITE MEMBERS2164×416 55.2 KB

The following fields have no problem showing up:

First Name
Last Name
Email
Phone

As a work-around, I’ve renamed the Phone field to Whanau Connection so the user can describe their connection there but I don’t want this to be a long term solution.

Here’s the code I’m using:

Front End

// Import the backend function at the top of your page code
import { registerMember } from ‘backend/registrationBackend’;

$w.onReady(function () {
$w(‘#register’).onClick(() => {
// Retrieve input values
const name = $w(‘#name’).value; // Updated to reflect the #name ID
const email = $w(‘#email’).value;
const phone = $w(‘#phone’).value; // Optional
const password = $w(‘#password’).value;
const whanauConnection = $w(‘#whanauConnection’).value;

    // Check required fields
    if (!email || !password || !name || !whanauConnection) {
        console.error('Missing required fields');
        // Provide user feedback here, e.g., through a text element on the page
        return;
    }

    // Call the backend function to register the member
    registerMember(email, password, name, phone, whanauConnection)
      .then((registrationResult) => {
        // Handle the successful registration case
        console.log('Registration successful, pending approval:', registrationResult);
        // Provide user feedback here, e.g., display a success message to the user
      })
      .catch((error) => {
        // Handle the error case
        console.error('Error during registration:', error);
        // Provide user feedback here, e.g., display an error message to the user
      });
});

});

Back End:

// Filename: registrationBackend.jsw
import { authentication } from ‘wix-members-backend’;

export function registerMember(email, password, name, phone, whanauConnection) {
const options = {
contactInfo: {
name, // Using the name field for both first and last names
emails: [email],
phones: phone ? [phone] : ,
customFields: {
whanauConnection
}
}
// approvalStatus: ‘PENDING’ might be omitted since you want manual approval, and it’s the default
};

return authentication.register(email, password, options)
.then((registrationResult) => {
// The member’s status will be “PENDING” since manual approval is enabled
return registrationResult;
})
.catch((error) => {
console.error(‘Registration error:’, error);
throw new Error(‘Registration failed.’);
});
}

Product:
Editor X

What are you trying to achieve:
[Explain the details of what you are trying to achieve. The more details you provide, the easier it is to understand what you need.]

What have you already tried:
I’ve already tried this guide but haven’t been successful: Creating a Custom Registration Form with Code