Simple site notification system

I need a notification system on my site.

For example, when the user posts information using the Softr form, I need the page to reload to display a table with the history of requests.

To achieve this, I’ve configured the ON FORM SUBMIT action on the same page, but with a parameter containing a validation message, like :

If you need a similar system, here’s how I did it:

  1. I’ve added a Custom Code block with the following code to all the pages where I want to display a message:
    <div id="P-notification" class="alert alert-warning" role="alert"></div>
    See colors options here

  2. In the Custom Code (Code Inside Footer) applied to all pages of the site, I added the following code:

  setTimeout(function() {
    const urlParams = new URLSearchParams(;
    const message = urlParams.get('message');
    const notificationElement = document.getElementById('P-notification');

    if (message && notificationElement) {
      notificationElement.textContent = decodeURIComponent(message); = 'block';
      setTimeout(function() { = 'none'; }, 5000); // Time to show
  }, 800);

/* Notification system */
  #P-notification {
    display: none; 
    position: fixed; 
    top: 20px; 
    left: 50%; 
    transform: translateX(-50%);
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    z-index: 1000;
  1. Finally, for each page on which I want to display a message, I add at the end of the URL ?message=xxx

And voilà :ête+a+été+envoyée+à+votre+régie

Remarks :

  • Don’t forget to add the new Custom Code Bloc on every page that needs notification
  • I’ve called the notification P-notification to avoid interference with the code, but you can change it (everywere = 3 times).
  • The script checks if the block is present on the page, otherwise it doesn’t execute.
  • The script waits 800 milliseconds to make sure the elements are loaded.