Form is not being recognized - Gatsby site

Support
1

Last year, I built and deployed a Gatsby site here on Netlify with a form that was and is working just fine. I duplicated the repo this year and changed a few things, but the form is the same. However, this year’s site does not recognize the form, and I’m getting a 404 when submitting it. I’ve been scratching my head on this for a bit, so I’d appreciate it if someone could take a look to see what’s going on.

Thank you for any help you can provide.

  • Custom domain - DNS is verified but when posting the form I get a 404 to the root of my custom domain
  • I’ve already gone through this guide and I believe I meet all of the requirements for the form, especially since it worked last year.
  • I’ve tried both netlify and data-netlify="true" attributes.

Form code:

<form action="/thank-you" netlify method="POST" name="contact" onSubmit={handleSubmit}>
          {state.error && <p className="form-error">{state.error}</p>}
          {/* The `form-name` hidden field is required to support form submissions without JavaScript */}
          <input type="hidden" name="form-name" value="contact" />

          <p>
            <label>
              Name:{" "}
              <input
                type="text"
                name="name"
                autoComplete="name"
                value={state.name}
                onChange={handleChange}
                required
              />
            </label>
          </p>
          <p>
            <label>
              Email:{" "}
              <input
                type="email"
                name="email"
                autoComplete="email"
                value={state.email}
                onChange={handleChange}
                required
              />
            </label>
          </p>
          <p>
            <label className="same-line">
              Number of People:{" "}
              <select
                name="people"
                value={state.people}
                onChange={handleChange}
                required
              >
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
              </select>
            </label>
          </p>
          <p>
            <label>
              Message:{" "}
              <textarea
                id="message"
                name="message"
                rows="4"
                placeholder="Can't wait to eat some cupcakes!"
                value={state.message}
                onChange={handleChange}
              />
            </label>
          </p>
          <ButtonWrapper>
            <CustomLink to="/" inverted>
              Back
            </CustomLink>
            <Button type="submit">Send</Button>
          </ButtonWrapper>
        </form>
2

I ended up just updating all of my packages to their latest versions and that must have done the trick. This is resolved now.

1 Like