Yes, these parts in the script: ‘submit-form-success-form1’ and ‘submit-form-fail-form1’ refers to a form with the ID #form1
Hi Matthieu. This is very very Cool. I already implemented it in our app. Great! and Thanks! Is something like this also possible with the action button edit fprm. We want a message there if the user closes the form and something has changed and when he saves the form and something has changed. Now there is no message at all. This is also for @artur
Hi!
I’m sure this is possible.
If Artur lets me know what are the correct selectors for the action buttons (edit and create) success and fail, I will try.
1 Like
That would be great!!!
Note that this alert box workflow is also possible for add record,update record or delete record, within the action buttons, by changing:
window.addEventListener("submit-form-success-form1", function () {
by the right event listener
How can I do it when the form submission confirmation message is hidden, the application automatically returns to the home page?
Thanks
Hi Marcelo,
Can you describe exactly what would be the flow you would like to have? (The user submit the form then…)
I would like that at the moment of submitting the form, the user (non logged-in users) receives a confirmation and after 1 or 2 seconds, the app returns to the home page.
Today the alternatives of the “Customizable Form” (on form submit) are “Show the message” or " “Action”, what I am looking for is to execute both.
Click button “Send Form”–>Show Message–>Action
Okay,
This is easily doable
- Choose the option “On form submit” => action => “do nothing”
- Update the code this way (Only the script is actually updated):
Code to be inserted in the header custom code of the page =>
<div id="alertbox1" class="alertbox">
<div class="alertbox-header">Success</div>
<div class="alertbox-message">Your form has been submitted successfully.</div>
<button class="alertbox-close" onclick="document.getElementById('alertbox1').style.display='none';">×</button>
</div>
<div id="alertbox2" class="alertbox">
<div class="alertbox-header">Error</div>
<div class="alertbox-message">Sorry, there was an error submitting your form.</div>
<button class="alertbox-close" onclick="document.getElementById('alertbox2').style.display='none';">×</button>
</div>
<style>
.alertbox {
display: none;
position: fixed;
z-index: 1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 350px;
border: 1px solid #ebebeb;
border-radius: 10px;
background-color: #FFFFFF;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
padding: 15px;
text-align: center;
}
.alertbox-header {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
color: green;
}
.alertbox-message {
font-size: 16px;
margin-bottom: 20px;
color: #182939;
}
.alertbox-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
font-weight: bold;
border: none;
background-color: transparent;
cursor: pointer;
}
.alertbox.error {
background-color: #FFFFFF;
}
.alertbox.error .alertbox-header {
color: red;
}
</style>
<script>
window.addEventListener('block-loaded-form1', () => {
const alertbox1 = document.getElementById("alertbox1");
const alertbox2 = document.getElementById("alertbox2");
window.addEventListener("submit-form-success-form1", function () {
alertbox1.style.display = "block";
setTimeout(function() {
window.location.href = "/";
}, 2000);
});
window.addEventListener("submit-form-failure-form1", function () {
alertbox2.style.display = "block";
alertbox2.classList.add("error");
alertbox2.querySelector('.alertbox-header').classList.add("error");
setTimeout(function() {
alertbox2.style.display = "none";
alertbox2.classList.remove("error");
alertbox2.querySelector('.alertbox-header').classList.remove("error");
}, 6000);
});
});
</script>
Each time you see form1 => replace it with your form ID (it appears 3 times in the script)
This line }, 2000); decides of the duration before the redirection to the homepage (on form success only) happens.
Thanks!!!
Hey @matthieu_chateau, code looks great! However upon failure of updating the record, the other alertbox doesn’t display 
any idea why?
<script>
const alertbox1 = document.getElementById("alertbox1");
const alertbox2 = document.getElementById("alertbox2");
window.addEventListener("update-record-success-list2", function () {
alertbox1.style.display = "block";
setTimeout(function() {
alertbox1.style.display = "none";
}, 6000);
});
window.addEventListener("update-record-failure-list2", function () {
alertbox2.style.display = "block";
alertbox2.classList.add("error");
alertbox2.querySelector('.alertbox-header').classList.add("error");
setTimeout(function() {
alertbox2.style.display = "none";
alertbox2.classList.remove("error");
alertbox2.querySelector('.alertbox-header').classList.remove("error");
}, 6000);
});
</script>
Hi Josh,
What do you call a failure exactly? What do you see on the screen? How do you happen to create an error?
Hey again! @matthieu_chateau
Sorry I should’ve clarified, i’ll just explain my goal, its regarding the “edit record” button.
So upon clicking it and that window pops up with all the fields on, due to how many fields I have on there some fields need to be scrolled down too and if the user doesn’t notice this and tries submitting before filling all the other fields… I see that it turns red and says “this field is required” but if that field is currently below where they are on the field list, the error message isn’t seen unless its scrolled too. If that makes sense… so I recently stumbled across your code and figured it would suit my use case pretty well, it’s exactly what I need I’m just struggling with implementing it!
Thanks for any help!
Ahh!!!
I found a forum from quite awhile ago and it was labelled as “failure” i guess that has changed since.
I’ll give it a go and let you know!
Forgot what I wrote: It’s failure, not fail, I re-checked the post you mentioned.
Anyway => what you describe might not be considered as an error, let me give a try. It’s not an error on submission…as nothing is submitted.
No worries and yeah I was having this discussion with someone on the help desk thing, what you’re saying makes sense.
Do you think there’s a way to achieve what i want?
There is always a way, yes, but It would be too much time for me to find a solution or to think of the best way to do this for something that is not really a big problem (and that respects UX best practice).
= > Remember that most of the softwares don’t give more than this type of error indications, so it should be way enough for your users.
The only thing I can tell you is that you might use a mutation observer (mutation observer tied to the red error message “this field is required”).
I mean if a user doesn’t know what they need to do in order to submit I think that’s a pretty big problem, especially since our target audience for this app and I imagine many other apps aren’t people who would be inclined to scroll to investigate further.
My main point is that a user can attempt to edit a record and no error message is displayed unless the user scrolls down to then see the field that is required. I appreciate that the fact it states a field is required is useful but the usefulness ends when that message can no longer be seen unless scrolled… i don’t know, that seems like a flaw to me. Otherwise the user is just stuck in an endless loop of trying to update it without any notification to say otherwise!
However, thank you for that suggestion about the mutation observer, I will look into it!