Form submission - correct POST reply, but no entry on the submissions page

Hi,
I’ve read the documentation and also the forum posts about forms, namely this one:

Since I have a react site, I created an html file with a replica of my form so that Netlify bots are able to parse the form fields. That works as expected and I have a “contactHuman” active form in my Netlify Forms panel.

Here is my form in reactjs (sorry for the long code):

                    <form
                  name="contactHuman"
                  method="POST"
                  action="thank-you"
                  data-netlify="true"
                  netlify-honeypot="bot-field"
                  onSubmit={this.handleSubmit}
                >
                  <input
                    type="hidden"
                    name="form-name"
                    value="contactHuman"
                  />
                  <p class="hidden">
                    <label>
                      Don’t fill this out if you're human:{" "}
                      <input name="bot-field" />
                    </label>
                  </p>
                  <label htmlFor="item01">
                    <input
                      type="text"
                      name="name"
                      id="item01"
                      value={this.state.name}
                      onChange={(e) => {
                        this.setState({ name: e.target.value });
                      }}
                      placeholder="Nome *"
                    />
                  </label>

                  <label htmlFor="item02">
                    <input
                      type="text"
                      name="email"
                      id="item02"
                      value={this.state.email}
                      onChange={(e) => {
                        this.setState({ email: e.target.value });
                      }}
                      placeholder="Email *"
                    />
                  </label>

                  <label htmlFor="item03">
                    <input
                      type="text"
                      name="subject"
                      id="item03"
                      value={this.state.subject}
                      onChange={(e) => {
                        this.setState({ subject: e.target.value });
                      }}
                      placeholder="Assunto"
                    />
                  </label>
                  <label htmlFor="item04">
                    <textarea
                      type="text"
                      id="item04"
                      name="message"
                      value={this.state.message}
                      onChange={(e) => {
                        this.setState({ message: e.target.value });
                      }}
                      placeholder="Mensagem"
                    />
                  </label>
                  <button
                    className="rn-button-style--2 btn-solid"
                    type="submit"
                    value="submit"
                    name="submit"
                    id="mc-embedded-subscribe"
                  >
                    Enviar
                  </button>
                </form>

And here is the form part of the netlifyneedsthisformyform.html I placed in the /public folder:

<form 
name="contactHuman" 
method="POST" 
action="thank-you"
data-netlify="true"
netlify-honeypot="bot-field" 
>

<input type="hidden" name="form-name" value="contactHuman" />
<p class="hidden">
    <label>Don’t fill this out if you're human: <input name="bot-field" /></label>
 </p>
<label htmlFor="item01">
    <input
        type="text"
        name="name"
        id="item01"
        placeholder="Nome *"
    />
</label>

<label htmlFor="item02">
    <input
        type="text"
        name="email"
        id="item02"
        placeholder="Email *"
    />
</label>

<label htmlFor="item03">
    <input
        type="text"
        name="subject"
        id="item03"
        placeholder="Assunto"
    />
</label>
<label htmlFor="item04">
    <textarea
        type="text"
        id="item04"
        name="message"
        placeholder="Mensagem">
    </textarea>
</label>
<button className="rn-button-style--2 btn-solid" type="submit" value="submit" 
name="submit" id="mc-embedded-subscribe">Enviar</button>
</form>

Netlify recognizes the existence of the form, but when I submit it, nothing is displayed in the submissions form and it stays at 0 verified submissions and 0 spam submissions.

The form’s handleSubmit function is:

handleSubmit = e => {
        e.preventDefault();
        fetch("/", {
          method: "POST",
          headers: { "Content-Type": "application/x-www-form-urlencoded" },
          body: encode({ "form-name": "contactHuman", ...this.state })
        })
          .then(() => alert("Obrigado!"))
          .catch(error => alert(error));
      };

And it seems to be working ok, since I’ve used the developer tools and I see that it sends a POST request (status code:200) with the following Form Data:

form-name=contactHuman&name=J.%20Alberto&email=jalb%40mailserv.com&subject=Need%20support&message=Please%20get%20back%20to%20me

As a result, I get the expected alert popup (with “Obrigado!”, portuguese for "Thank you!), but I’m not forwarded to the thank-you page, and the submitted data doesn’t reach Netlify. As I mentioned, the “submissions from contactHuman” panel stay at zero (both verified and spam).

I read the docs, also read many forum discussions, and tried literally dozens of variations for many hours, but to no avail.

Maybe there’s some problem with my code or maybe there’s some other thing I should do?

This is quite frustrating so I’d really appreciate your help. Thank you very much!
Filipe

I managed to solve this problem with the help of a question in stackoverflow:

https://stackoverflow.com/questions/56539654/netlify-forms-and-service-worker

in particular with this answer:

A much more simple approach is to bypass the SW cache by always adding a unique string to the url you post your form to.

In my case I am using the browsers fetch method and instead of having it post to just “/” I add a timestamp to the url like so: “/?t=1234652736”

const postUrl = '/?t=' + Math.floor(Date.now() / 1000);

fetch(postUrl, {
    method: 'post',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: ...),
  })    

It seems the problem was the Service Workers cache. This was something I haven’t read in the Netlify documentation or this community forum. Maybe it was mentioned in some post in the community, but even though I read so much about Netlify forms because of this problem, it is the first time I read a mention to Service Workers.

If you allow me, I’d like to leave a suggestion: the problem I had was really frustrating and from what I read, many went and are going through similar problems. I read the documentation, but it didn’t include many other advises that I later found in many different posts. I’m sure that producing a thorough documentation is really hard, but it would be so helpful if so much information regarding this subject, that’s spread in so many different places, could be condensed where it should really be: in a clear and as-exhaustive-as-possible documentation.

I read in many places that Netlify support team is amazing, and that’s excellent, but it would be even better if there was so much relevant information compiled together that you just (almost!!) don’t need them! :slight_smile:

Hi, @Filipe. Thank you for this input. I personally disagree that we don’t document this well enough.

We do have support guides about service workers, for example the one below:

The issue had nothing to do with Netlify. This was a React.js issue only. I don’t think it is Netlify’s job to do documentation for React.js.

The service worker issue you experienced would affect any form submissions regardless of where the site was hosted, not just form submissions at Netlify.

This means that the issue wasn’t about Netlify at all. It was about service workers and React. We don’t do documentation for React itself. We do documentation and support for Netlify.

Here is the problem with “clear and as-exhaustive-as-possible documentation”:

  • There are hundreds of static site generators (SSGs) which can be used to build sites at Netlify.

There is also more than one way to use some static site generators. Adding more complexity, these static site generators are often under active development and new static site generators are created each month.

You are now talking about creating and maintaining documentation for hundreds of specific SSGs and their various configuration. Our company doesn’t have the resources to document each SSG completely. There are documentation projects for the SSGs themselves (in most cases) and that is the best place for this kind documentation.

Our support team covers the Netlify specific issues and we’ll answer questions about other topics as long as they are covered by our scope of support. If you do have questions about Netlify, please let us know.

What I meant @luke, is that you already have so much information about the subject, and so many small details mentioned when answering questions, but for me, while searching for a solution, that info seemed a bit disperse. It would be helpful to grow the knowledge base in the same place.
Maybe this is an impossible thing to do, since, as you stated, there are so many variants and, of course, you don’t have to document all that, but I suggested it with the best of intentions.

Either way, keep up the good work! If Netlify wasn’t such a great platform, for sure I wouldn’t be spending any time writing what was intended to be an humble contribution to make it even better! :wink:

1 Like