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

Custom Coding
, ,
22

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!

23

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!

24

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.

25

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?

26

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”).

27

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!

28

You can also add your request in Feature Request, the size of error messages (well here it’s more about the placement) is a commom request from many users (that’s why I created this alertbox feature).

29

Yeah I think I’ll do just that!

I must admit it is quite strange how many key things I’ve noticed in Softr are overlooked… but I guess that’s what this is for!

Anyways, I do use your code elsewhere in the app and its very useful so thankyou for that!

30

hi @matthieu_chateau not sure, i am using exactly the same code as you on the form, and i am not getting any alert message. Can you please check from your end if the code still works?

31

Yes it does work, though there might be some adjustements to do due to recent updates.

32

UPDATES

In a custom code block:

<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 custom code 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>
33

Hey! I saw your work on this and it was very helpful for adding my own error checks in one of my forms. I was wondering, do you know if it’s possible/how to show error codes below the specific field in the form that the user is filling out incorrectly, rather than just below the form as you did your example? I have a lot of fields for the user to fill out, so it would be much cleaner to produce those error messages below the field itself.

34

No, this would take too much time for me to do this; too hard to get all the selectors, how to make it work in terms of user experience etc. => way too much work.

I won’t be able to help on this matter, sorry.

35

Previously everything was supposed to be in the custom header, Not we need to add a custom code and then add to the custom code header to make this work. Great find @matthieu_chateau .

36

Hi Josh - this is exactly the same issue Im having.

image
image685×724 42.6 KB