Example form not working with Gatsby starter?

Briefly summarize the issues you have been experiencing.
Hello,

I’m having issues implementing forms on a personal website:

https://quizzical-haibt-ac5fa3.netlify.com/

I used a Gatsby starter template and have copy and pasted the example form from the docs into my code. When I deploy the site, the form registers and I am able to see the forms corresponding name on the dashboard, however no requests are coming through. I made no changes to the example code and literally copy and pasted it over, so it should be submitting?

I have read through the debugging help, but everything seems to be right and should be working. Is there an extra step needed to take if I am using Gatsby?

Thank you!

hi @synthprogrammer, can you post the actual form source code here please?

also, do note that “dummy” data inputs such as “test” will get filtered out by our spam robots and not show up for obvious reasons. Can you confirm it still doesn’t work even with real data? thanks.

Hi Perry,

Thanks for you response and my apologies for not including the code in the initial post. The code is as follows:

        <form name="contact2" method="POST" data-netlify="true">
          <p>
            <label>
              Your Name: <input type="text" name="name" />
            </label>
          </p>
          <p>
            <label>
              Your Email: <input type="email" name="email" />
            </label>
          </p>
          <p>
            <label>
              Your Role:{' '}
              <select name="role[]" multiple>
                <option value="leader">Leader</option>
                <option value="follower">Follower</option>
              </select>
            </label>
          </p>
          <p>
            <label>
              Message: <textarea name="message"></textarea>
            </label>
          </p>
          <p>
            <button type="submit">Send</button>
          </p>
        </form>

Regarding the dummy data, it still doesn’t appear to work even with realistic form data.

Thanks so much for your help!

Let’s reset a bit. Have you walked through the debugging steps here?

They will likely lead you to the source of the problem. And if not, then you get an actionable request which is “show us the html file (not your source that may be in js) that has your form source code” which is what we’ll need to debug most quickly :wink:

1 Like

Hello and sorry for the delay!

Thanks for sharing the debugging article. I’ve read through it along with the docs and am still unable to make my form submit properly. When I click send, my page refreshes. I checked out the network tab of chromes dev tools and it appears the request returns a 404 error when the post request is made. My code can be viewed here:

The form in quest is on line 172:

The deployed page is here:
https://quizzical-haibt-ac5fa3.netlify.com/

Any ideas? Thank you so much for your help!

I’m now able to receive the form data on submission after adding the hidden field mentioned in other posts. I didn’t see this in the official documentation, or may have just missed it https://www.netlify.com/docs/form-handling/ sorry for the trouble! However, the generic netlify success screen is not appearing? The form is submitted (and i receive the data on the dashboard) and the page simply refreshes with no default alert? Any ideas?

Thanks so much for your help and my apologies for the trouble!

hi synth, will you try this for me: please try changing your buttons from <button>some text</button> to <button type="submit">some text</button>?

HI Perry, thanks for the response! I tried making that change but it still isn’t displaying the Netlify default form submit message.

Hi @synthprogrammer, I just submitted a submission and it’s showing up properly: https://app.netlify.com/sites/quizzical-haibt-ac5fa3/forms/5d7d4872ff7ff10008aee1d5

Are you still having problem? Note that our spam filter will remove submissions that appear to be spam, so your tests should use real words and look like real submissions.

Hi Gerald, thanks so much for your help. I received your test message on the dashboard. What’s strange is that when I submit the form from the page, the default Netlify thank you message does not pop up. The web page simply refreshes with no confirmation message or pop up. Did it show up on your end? Maybe it’s something with my computer? I’ll try on another computer when I have a moment.

@synthprogrammer I don’t get the default Netlify thank you page, I get your custom one:

Are you using real data to submit? Can you try submitting from a different IP address? If you sent a lot of junk submissions then ti’s possible your Ip ended up on a list of known spammers.

Hi Gerald,

After getting the form submissions to work, the issue was no longer with the submission itself but displaying Netlify’s default confirmation message. Not exactly sure what the issue was / is, so I made my own customer confirmation (what you’re seeing now) and it’ll work for my purposes. So we’re all set!

Many thanks to you and the rest of the team for helping me solve my issues! Really appreciate it!

1 Like