imorente / gatsby-netlify-form-example

Example site integrating Netlify's form handing in Gatsby's starter template
MIT License
138 stars 32 forks source link

not receiving any form submissions #17

Closed geocine closed 5 years ago

geocine commented 5 years ago

I have successfully posted an AJAX request and I got the following result. However, I cannot see any form submissions.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Thank you!</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      background: rgb(14, 30, 37);
      color: white;
      overflow: hidden;
    }

    h1 {
      margin: 0;
      font-size: 22px;
      line-height: 24px;
    }

    .main {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      width: 100vw;
    }

    .card {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 75%;
      max-width: 364px;
      padding: 24px;
      background: white;
      color: rgb(14, 30, 37);
      border-radius: 8px;
      box-shadow: 0 2px 4px 0 rgba(14, 30, 37, .16);
    }

    a {
      margin: 0;
      text-decoration: none;
      font-weight: 600;
      line-height: 24px;
      color: #00ad9f;
    }

    a svg {
      position: relative;
      top: 2px;
    }

    a:hover,
    a:focus {
      text-decoration: underline;
      color: #007A70;
    }

    a:hover svg path{
      fill: #007A70;
    }

    p:last-of-type {
      margin: 0;
    }
    </style>
  </head>
  <body>

    <div class="main">
      <div class="card">
        <div class="header">
          <h1>Thank you!</h1>
        </div>
        <div class="body">

          <p>Your form submission has been received.</p>

          <p>
            <a id="back-link" href="/">← Back to our site</a>
          </p>
        </div>
      </div>
    </div>
    <script>
      (function() {
        if (document.referrer && document.location.host && document.referrer.match(new RegExp("^https?://" + document.location.host))) {
          document.getElementById("back-link").setAttribute("href", document.referrer);
        }
      })();
    </script>
  </body>
</html>
geocine commented 5 years ago

If anyone is experiencing this issue. Make sure not to test it with random character strings like: test, asdff , etc. It will silently be blocked.