Add a fully customizable alert box on form submit or update or delete action (Failure & Success Scenarios)

Custom Coding
, ,
1

Hi all!

The “show message” option of the custom form block disappears too fast?

What about an alert box, fully customizable, that displays different texts and colors according to the failure or to the success of the form submit? Here we go!

Below or above your form block, add this code inside a custom code block.
Play with everything inside <style> </style> to customize the alert box

Texts displayed can be changed within <div

Note that the alert box (whether it’s a failure or success) is set to last 6 seconds. You can change it at the end of the code, within the <script by changing the value 6000 (which is 6000 milliseconds - 6 seconds)

If you want the alert boxes to be on the top right of the screen, replace, in the <style,

left: 50%; 
top: 50%;
 transform: translate(-50%, -50%);

by

top: 60px;
right: 80px; 
/*remove transform: translate*/

Ok, full code here :point_down:

<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';">&times;</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';">&times;</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>
const alertbox1 = document.getElementById("alertbox1");
const alertbox2 = document.getElementById("alertbox2");

window.addEventListener("submit-form-success-form1", function () {
  alertbox1.style.display = "block";
  setTimeout(function() {
    alertbox1.style.display = "none";
  }, 6000);
});

window.addEventListener("submit-form-fail-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>

ezgif-4-8f9aafda50

2 Likes
2

This is very cool!

1 Like
3

Thank you David! A missing piece in Softr that should be implemented one day!

4

Very nice Matthieu, I’ll definitely use the success version of this.

Are you able to return something, in case of failure? Or what determines failure in this code?:slight_smile:

5

Yes, in case of failure => an other box (same style) with different text, thanks to this part of the code =>

<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';">&times;</button>
</div>

And this one window.addEventListener("submit-form-fail-form1", function () {

6

I’m not seeing this work for me. I have two forms (just single buttons with hidden submissions) on top of each other, could that bare any influence on it?

Also, I’m copying and pasting your code verbatim, do I need to reference the form id / name anywhere?

Also, these forms are inside a list detail modal.

7

Yes, these parts in the script: ‘submit-form-success-form1’ and ‘submit-form-fail-form1’ refers to a form with the ID #form1

8

Excellent, thank you very much @matthieu_chateau !

1 Like
9

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

10

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
11

That would be great!!!

13

Here it is: Action Buttons - Update Records event listeners

14

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