Lightbox will not close after successful sign up form submit

Ask the community
, ,
1

I’m trying to get my Lightbox to close after as successful submission only. Right now, I’m just able to close the Lightbox by calling Lightbox.close() in the submitbutton_click event handler. The problem is, if the user doesn’t fill out all required fields, the Lightbox will still close erasing all the users details they entered and not allowing them to update the required fields. When I switch the Lightbox.close() to the wixFormSubmitted handler, nothing happens after a successful submission. It works in the editor preview but will not work in the live site. It seems like there’s a timeout or something when the data is actually sent to the database that skips over or doesn’t allow the code to execute in time. It’s just weird that both console.log calls get sent to the console and works in preview.

I’ve been going crazy the past few days trying to figure this out and cannot for the life of me get it to work. Any help is GREATLY appreciated! Thanks in advance for any help!

Here’s the code:

import wixWindow from ‘wix-window’ ;

$w . onReady ( function () {
console . log ( “onReady called” )
} );

export function registrationForm1_wixFormSubmitted () {
// This function was added from the Properties & Events panel.
// Add your code for this event here:
console . log ( “WixFormSubmitted called” )
wixWindow.lightbox . close ();
console . log ( “Lightbox close called” );
}
export function Submitbutton_click ( event ) {
// This function was added from the Properties & Events panel.
// This code works to close the lightbox, but will close it all the time even if the form submission is unsuccessful with errors
console . log ( “Submit Button Clicked” );
// setTimeout(function() {
// wixWindow.lightbox.close()
// }, 3000);
console . log ( “Lightbox from Button Click Closed” );
}

2

Hi there,

You should use the onWixFormSubmit( ) event handler to validate the fields and reject the values if one or more of the fields are invalid.

Assuming that we have a form with two fields, a name, and email, and the email must end with " @nasriya.net ", or whatever your organization maybe, this is how we validate the fields - though I’m not a fan of Wix Forms.

$w('#signupForm').onWixFormSubmit(({ wixFormFields }) => {
    // Get the fields from the form;
    const fields = wixFormFields; // An array of fields;
    
    // Get the fields selectors;
    const $name = $w(`#${fields.filter(items => items.name === 'Name')[0].id}`);
    const $email = $w(`#${fields.filter(items => items.name === 'Email')[0].id}`);
    
    // Validate the fields;
    if (!$name.value) { return false }
    if (!$email?.value?.endsWith('@nasriya.net')) { return false }
})

Even though you can technically stop/reject the submission with your validations, there’s no way to return an error message to display it to the user, and the user might be confused why their submission was rejected, how would they know that the email must end with “@nasriya.net” without an error message! You’re better off with a custom form.

Anyways, here you have it.

Hope this helps~!
Ahmad

3

Thanks for the reply Ahmad. The Wix form already automatically validates the fields if I check the box that the field is required in the custom form creator. Why would I need to do that again myself in code? Is there a function to check and see if ALL the required fields have been filled out? Or do you literally have to check each one yourself? Either way I still just need the Lightbox to close after a successful form submission…

I have a form with 6 fields and 10 multiple choice questions of which 5 fields are required and all MC questions are required. There are also 4 check boxes, 3 of which are required at the bottom as well which include agreeing to the Terms & Conditions, Privacy Policy, and Code of Conduct

Fields -
First Name: (Text)
Last Name: (Text)
Birthdate: (Date Picker)
Discord Username: (Text) NOT REQUIRED
Username: (Text)
Password: (Password Text)

MC Question 1-10: (MC Question)

CheckBox: (Subscribe to Newsletter) NOT REQUIRED
CheckBox: (Terms & Conditions)
CheckBox: (Privacy Policy)
CheckBox: (Code of Conduct)

So Wix already correctly validates the form. If all fields are correctly filled out the form submits successfully. If a field is missed it highlights it in RED and the form does not submit successfully.

The problem is, no matter what, the Lightbox never disappears. When the form successfully submits, a second “Submission Successful! Verify your Email” Lightbox pops up for 3 seconds or so and disappears. Then the original sign up form is still on the screen. I need this original signup Lightbox to close. If the user doesn’t fill out all the fields, it highlights them and keeps the form visible.

I can’t figure out the lifecycle of the form and where to put the Lightbox.close() function after the form has been validated as correct and having all required fields filled out AND successfully submitted and added to the database. I thought wixFormSubmitted() was the function called AFTER these conditions have been met, but it still will not close the Lightbox if I place the Lightbox.Close() call within that block.

4

@cryptokinfolkdev Did you ever figure this out?