Home
Support Forums

Https://ayfc.netlify.app/contact

Good afternoon!

After going through Netlify documentation very thoroughly and visiting this forum and number of stackoverflow pages, it seems like asking the question directly here is the last chance for me.

I am convinced that I have configured the contact form on the page correctly - yet, I can still see no verified submissions in the admin panel. I’ve got other private Netlify page, where it is configured exactly the same way and it is working with no issues.

I have even changed the name of the form, thinking it might be too generic, still no luck.

Is there a chance someone could verify the problem and let me know what’s wrong with the form, please?

Thank you in advance. Tomasz

Hiya, sorry you are having trouble getting your forms to work. Just as a sanity check, did you read this guide?

If this still isn’t helpful, can you please paste or link us to the full html form code? thanks.

Hi, Perry. Thanks for your response! Yes, I did, as mentioned in my original post :frowning:

Here is the entire code of the form:

<form
  name="ayfc-contact"
  method="POST"
  action="/contact-success"
  netlify-honeypot="bot-field"
  data-netlify="true"
>
  <p className="hidden">
    <label htmlFor="bot-field">
      Don't fill this out if you're human:
      <input name="bot-field" />
    </label>
  </p>
  <div className="row">
    <div className="col-md-6">
      <div className="md-form mb-0">
        <input
          type="text"
          name="name"
          id="form-name"
          className="form-control"
          maxLength="24"
          required
        />
        <label htmlFor="name" className="">
          Your name
        </label>
      </div>
    </div>
    <div className="col-md-6">
      <div className="md-form mb-0">
        <input
          type="text"
          name="email"
          id="form-email"
          maxLength="50"
          className="form-control"
          required
        />
        <label htmlFor="email" className="">
          Your email
        </label>
      </div>
    </div>
  </div>
  <div className="row">
    <div className="col-md-12">
      <div className="md-form mb-0">
        <input
          type="text"
          name="subject"
          id="form-subject"
          maxLength="24"
          className="form-control"
          required
        />
        <label htmlFor="subject" className="">
          Subject
        </label>
      </div>
    </div>
  </div>
  <div className="row">
    <div className="col-md-12">
      <div className="md-form">
        <textarea
          type="text"
          name="message"
          id="form-message"
          maxLength="200"
          rows="7"
          className="form-control md-textarea"
          required
        ></textarea>
        <label htmlFor="message">Your message</label>
      </div>
    </div>
  </div>
  <div className="text-center text-md-left">
    <button
      className="btn btn-primary"
      type="submit"
      onClick={checkIsValid}
    >
      Send
    </button>
  </div>
</form>

Hi, @abbotsyouthfc. The form troubleshooting guide mentions the following:

  1. You need to include a name attribute on the opening <form> tag. When the page is deployed we will add a hidden input with a form-name attribute that’s the same as the name you set for the form. This is used in our API to determine which form is receiving the input. This is handled automatically as long as the HTML form includes a name .

However, your form already has a input using this this as an id:

        <input
          type="text"
          name="name"
          id="form-name"
          className="form-control"
          maxLength="24"
          required
        />

I believe this is preventing our form handling from adding the hidden input field. The POST of the form date should contain this field name (form-name= ayfc-contact ). However, when I test your form this isn’t sent.

Would you please try renaming the input above so that the id used is not “form-name”? If that doesn’t resolve the issue, please let us know.

Hi @luke! Thanks a lot for your response and suggestion. I did exactly as you said, went even one step further an completely renamed all input fields to be less generic and have prefixes that became contactform- instead of form-

Unfortunately, it still didn’t seem to help - I made sure the page is not cached by inspecting DOM and seeing new names, sent a form and… still no submission in the admin panel :frowning:

My form now looks like this:

<form
    name="ayfc-contact"
    method="POST"
    action="/contact-success"
    netlify-honeypot="bot-field"
    data-netlify="true"
  >
    <p className="hidden">
      <label htmlFor="bot-field">
        Don't fill this out if you're human:
        <input name="bot-field" />
      </label>
    </p>
    <div className="row">
      <div className="col-md-6">
        <div className="md-form mb-0">
          <input
            type="text"
            name="name"
            id="contactform-sendername"
            className="form-control"
            maxLength="24"
            required
          />
          <label htmlFor="name" className="">
            Your name
          </label>
        </div>
      </div>
      <div className="col-md-6">
        <div className="md-form mb-0">
          <input
            type="text"
            name="email"
            id="contactform-email"
            maxLength="50"
            className="form-control"
            required
          />
          <label htmlFor="email" className="">
            Your email
          </label>
        </div>
      </div>
    </div>
    <div className="row">
      <div className="col-md-12">
        <div className="md-form mb-0">
          <input
            type="text"
            name="subject"
            id="contactform-subject"
            maxLength="24"
            className="form-control"
            required
          />
          <label htmlFor="subject" className="">
            Subject
          </label>
        </div>
      </div>
    </div>
    <div className="row">
      <div className="col-md-12">
        <div className="md-form">
          <textarea
            type="text"
            name="message"
            id="contactform-message"
            maxLength="200"
            rows="7"
            className="form-control md-textarea"
            required
          ></textarea>
          <label htmlFor="message">Your message</label>
        </div>
      </div>
    </div>
    <div className="text-center text-md-left">
      <button
        className="btn btn-primary"
        type="submit"
        onClick={checkIsValid}
      >
        Send
      </button>
    </div>
  </form>

Hi @luke! Any thoughts on the above, please?

Hi @abbotsyouthfc,

It looks like you have a service worker intercepting the request. Can you take a look at [Support Guide] Understanding & unregistering service workers? Once you have removed and unregistered your service worker, let me know if things are better. Thanks!

Hi, @Dennis! Thanks a lot for the hint! I have unregistered the service worker and sent the form. Still no submissions :frowning: Since I had configured a custom domain for the website, I’ve done the same there - and also no luck…


I will now try to use ‘gatsby-plugin-remove-serviceworker’ and will see how it goes…

EDIT.
Service worker uninstalled, still no success :frowning:

Hmm. I just noticed that you have an onClick handler for your submit button. Are you actually using javascript to submit your form? If so, have you tried taking a look at this example https://github.com/imorente/gatsby-netlify-form-example/blob/master/src/pages/contact.js and pattern your form to match? I’m not quite sure why you are getting a 404, since the form definition on our end looks ok and the form itself does look like it should work. That said, you are using Gatsby and the example I linked is a reliable way to get Netlify forms working.

Hello, @Dennis - thanks a lot for your response and the link.

But no, in my case I am not using JS to submit the form.

I wanted the entire process to be as simple and as close to native HTML as possible, so what you can see there happening is that the onClick handler fires validation of the form and if something is wrong with values provided, the .preventDefault() method on the click event is being used. Otherwise, if everything is OK and form values are valid, the form is being submitted normally, as the submit button default behaviour.

So unfortunately, as things stand at the moment, the JS example of the form submission you’re referencing to is not relevant here :frowning:

Are you suggesting to give it up and to switch to a JS version of the form submission (with a POST Ajax call), instead of the regular HTML one? Is there any way to find out what is currently wrong with the request when it hits Netlify server? If the form itself looks OK to you, I can imagine I am not the only person that is affected by this or a similar issue…

If there’s anything else I can do on my side to help to identify the root cause of the problem, please let me know.

Hi, I’m not saying to give up. I was just suggesting that that example is a known working example.

In any case, I think I narrowed your issue down to your action attribute have the path /contact-success but that path doesn’t technically exists in your site. You have /contact-success/ which is a folder with an index.html file. Note the trailing slash. I think if you change your action attribute to have that trailing slash, things will work.

To explain a bit further, our system typically redirects a url to the correct path automatically. For example, in the case of /contact-success/ (folder with index.html), if someone goes to /contact-success, they get redirected. If the path is /contact-success (no trailing slash because the path is contact-success.html) and you visit /contact-success/, you get redirects to that path without a slash.

However, this is the not case for form submissions. Your action attribute’s value needs to be an existing path and technically, /contact-success is not an existing path. That is why I think it is 404-ing. Can you update your action attribute to include a trailing slash?

Hi, @Dennis!

Thanks for all your help so far. I have tried with the trailing slash, unfortunately it still didn’t help. Your suggestions made me making a few other tests, though - with different filenames, paths changed to contact-success.html instead of contact-success/index.html etc.
I did some further analysis and dig up deeper on the web and I my current suspicion is that the issue may be related to, as I understand, a bug existing in the routing solution of the Gatsby framework itself.
Due to that, I apologise for the time taken - should have looked into that earlier.
For all other developers using Gatsby, who may experience similar issues, here are additional resources:


It looks like the most recent entries there are not older than from October and there were no further follow ups on that - which means the problem still exists in the current versions of Gatsby available.

My next move on that is to try submitting the form without the success page whatsoever. If I find any further solution working, I will share with the community here.

Thanks again!