Question:
Why is the custom UI element not being hidden on default and not going away?
Product:
Wix Editor (Not Studio)
What are you trying to achieve:
Goal is to have a custom submittal message for my form, upon submit of post.
What have you already tried:
I have 2 frontend pages of page code and 3 backend .JS files. I am leveraging the Wix UI element IDs for identifying the form, the standard success message, and my grouped UI elements I grouped together to form a much more aesthetically pleasing confirmation to look at other than the standard little pieces of ugly text generated with the off the shelf form Wix offers.
To do this, I have logic in file number two of three .JS files that is listening for the standard success message to appear. If it appears then hide the standard success message, change boolean “A” to true, and re-direct the user from UI page 1 to UI page 2, here is the code.
import wixLocationFrontend from ‘wix-location-frontend’; // Import wixLocationFrontend module
import wixData from ‘wix-data’; // Import the wixData module to work with data.
import { formSubmitted } from “GloballyAvailable.js”;
// Add a listener for the standard success message
$w.onReady(function () {
// Define SuccessfulSubmission function
function SuccessfulSubmission() {
// Hide the standard success message
$w(“#text264”).hide();
// Set the boolean value to true
wixData.set(‘formSubmitted’, formSubmitted());
// Redirect the user to page 2
wixLocationFrontend.to(‘https://www.someurl/blah/’);
}
// Add a listener for the standard success message
$w("#section1col2form1").onAfterSave(() => {
SuccessfulSubmission();
});
// Export SuccessfulSubmission function
export { SuccessfulSubmission };
});
Boolean “A” is defaulted to false in one of the three backend .js files, here is my code.
let formSubmitted = false;
$w.onReady(function successBoolean() {
export { formSubmitted };
});
When the user is re-directed to page 2 I have a listener on screen load to check if the boolean is true or false, if true the custom UI element I created will “un-hide”/show for a totality of 4 seconds then disappear and reset the boolean back to false so the notification doesn’t stay there every time page 2 is accessed via other means or refreshes, here is my code.
import wixData from ‘wix-data’; // Import the wixData module to work with data.
import { formSubmitted } from “GloballyAvailable.js”;
$w.onReady(function z() {
$w.(function SuccessMessage () {
wixData.get(formSubmitted)
.then((result) => {
// If the form was successfully submitted, show the custom success message
if (result && result.formSubmitted) {
$w("#group2").show();
// Set a timer to hide the custom success message after 4 seconds
setTimeout(function () {
$w("#group2").hide();
// Reset the boolean value to false
wixData.set('formSubmitted', formSubmitted());
}, 4000); // 4000 milliseconds = 4 seconds
}
})
.catch((err) => {
console.error(err);
});
});
});
Now, for the page code of the two pages. Page one with the form, see my code below.
import {SuccessfulSubmission} from ‘backend/MyForm.js’
SuccessfulSubmission();
});
Page 2, see my code below.
import {SuccessMessage} from ‘backend/MyThankYouPage.js’
SuccessMessage();
});
Additional information:
For some reason when I run the code the custom UI element I made is loading right away even though I did not fill out the form, meaning when I publish the site and go to the thankYouPage it is not hidden for some reason and it does not go away after 4 seconds.
Thoughts?
I have not tried submitting the form yet as I am not ready to test that piece yet.