public/500.html

<!DOCTYPE html>
<html>
<head>
  <title>We're sorry, but something went wrong (500)</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
    body {
       font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    }
    .unhandled-error-page {
      height: 100vh;
      min-height: 550px;
      padding-top: 10vh;
    }
    .dialog{
      background:rgb(236, 236, 236);
      border:2px solid rgb(217, 217, 217);
      text-align:center;
      padding:30px 0px;
      margin:5% auto;
      width:80%;
      max-width:580px;
      min-width:315px;
      color:rgb(44, 46, 50);
      border-radius:8px;
      min-height: 500px;
    }
    textarea{
      width:75%;
      height:100px;
      border:1px solid rgb(182, 182, 182);
      border-radius:3px;
      padding:8px;
      font-size:14px;
    }
    .actions{
      text-align: center;
    }
    .g-recaptcha{
      display: inline-block;
      text-align: center;
      margin: 15px;
    }
    input[type="submit"]{
      width:150px;
      padding:10px;
      background:rgb(12, 181, 140);
      color:white;
      border:0px;
      border-radius:3px;
      font-size:15px;
      margin-top:5px;
      cursor:pointer;
    }
    img{
      max-width:100%;
      height:200px;
      border-radius: 5px;
    }
  </style>
  <script src='https://www.google.com/recaptcha/api.js'></script>
</head>

<body>
  <!-- This file lives in public/500.html -->
  <div class="unhandled-error-page base-background-color">
    <div class="dialog">
      <div>
        <img alt="500 error" src="https://media.giphy.com/media/SX9TFmjF0eChq/200.gif" height="200" />
        <h1>Ooooops...</h1>
        <h2>You have encountered an error.</h2>
      </div>

      <p style="margin: 10%">
        Our team has been notified.
        <br><br/>
        We apologize for any inconvenience.
      </p>
    </div>
  </div>
</body>
</html>