Back Button to go to the previous page

Ask the community
#1

Hi all

I am hoping someone can help

I have multiple pages linking to one. I would like to add a “back” button so the user can go back to the page they came from (rather than using the browsers back button)

Any ideas?

#2

This is doable but it’s hard to suggest a specific path without knowing more about why you want to do this.

Here are a few questions I have:

  • Do you want this button to do the exact same thing as the browser’s Back button? Or do you want it to always go back to the “one” page you mentioned?
  • If you want it to do the exact same thing as the browser’s back button, why duplicate it?
  • If you don’t want it to do the exact same thing, then perhaps a link back to the “one” page would work just as well?
  • Maybe breadcrumbs would work better?
#3

Hi!
Add a custom code block
And insert exactly this:
<button onclick="history.back()">Go Back</button>

Sorry for this “windows98” style for the button but this is the most effective way I can offer without going into details. It does the job!

Also, a button from a list details blocks, linked to an airtable formula (or a url) can do the trick. Are your pages linked between each other by a list page=>details page pattern?

If you want more, I suggest you to answer David’s questions, he can be of a great help

4 Likes
#4

**Update: **
Create a fully customizable button with a ‘go back’ function.

The text of the button is set inside <button>...<Go back></button>

You can play with all the style options (example: to make the button left aligned, change the float to left).
Font weight can be changed with the following values: 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900. 400 being normal font weight and 700 being bold font weight.

To insert in a custom code block:

<button id="myButton">Go back</button>

<style>
  #myButton {
    width: 120px;
    height: 40px;
    background-color: #000000;
    border-radius: 10px;
    padding: 10px 20px;
    margin: auto;
    font-size: 16px;
    font-family: "Inter", sans-serif;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    float: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #myButton:hover {
    background-color: #FFFFFF;
    color: #000000;
  }
</style>

<script>
  document.getElementById("myButton").addEventListener("click", function() {
    window.history.back();
  });
</script>
1 Like