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

matthieu_chateau · February 19, 2023, 8:08pm

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

In the footer 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';">&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>

In the header of the page:


<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() {
        alertbox1.style.display = "none";
      }, 6000);
    });

    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>

ezgif-4-8f9aafda50

dcoletta · February 20, 2023, 5:22pm

This is very cool!

matthieu_chateau · February 20, 2023, 7:38pm

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

erikm3103 · March 8, 2023, 1:20pm

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?

matthieu_chateau · March 8, 2023, 1:41pm

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-failure-form1", function () {

SdogEinnarg · March 22, 2023, 3:58pm

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.

matthieu_chateau · March 22, 2023, 4:04pm

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

SdogEinnarg · March 23, 2023, 6:36am

Excellent, thank you very much @matthieu_chateau !

jaspijk · March 23, 2023, 10:02am

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

matthieu_chateau · March 23, 2023, 10:08am

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.

jaspijk · March 23, 2023, 10:10am

That would be great!!!

matthieu_chateau · March 23, 2023, 12:33pm

Here it is: Action Buttons - Update Records event listeners

matthieu_chateau · July 29, 2023, 9:24am

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

MGomez · April 27, 2024, 7:50pm

Hi @matthieu_chateau

How can I do it when the form submission confirmation message is hidden, the application automatically returns to the home page?

Thanks

matthieu_chateau · April 28, 2024, 7:48am

Hi Marcelo,

Can you describe exactly what would be the flow you would like to have? (The user submit the form then…)

MGomez · April 28, 2024, 3:46pm

Hi @matthieu_chateau

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

matthieu_chateau · April 28, 2024, 4:53pm

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';">&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>
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.

MGomez · April 28, 2024, 5:46pm

Thanks!!!

Josh151 · May 7, 2024, 11:28am

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>

matthieu_chateau · May 7, 2024, 12:24pm

Hi Josh,

What do you call a failure exactly? What do you see on the screen? How do you happen to create an error?