Receiving a HTTP 303 response

[HotOrange]

I tried out Netlify forms but every time when I submit the form via JavaScript I get a HTTP 303 response and the form is not submitted. I checked everything but I don’t see anything that could be wrong. Also I don’t have any captchas or honeypot fields so it is a simple and pure HTML form.

The website can be found here: https://upbeat-ardinghelli-2021.netlify.app (the contact form is directly on the start page on the bottom right corner behind the “Contact us” button)

The test source code for handling the form submission looks like this

function encode(data) {
  return Object.keys(data)
    .map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
    .join('&');
}

const handleSubmit = (e) => {
  e.preventDefault();
  const form = e.target;
  fetch('/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: encode({
      'form-name': form.getAttribute('name'),
      ...state,
    }),
  })
    .then(() => navigate(form.getAttribute('action')))
    .catch((error) => alert(error));
};

[hrishikesh]

Hi @HotOrange,

I believe the 303 status is being thrown by one of your source maps?

Which I checked the initiator here:

If you hover over it, it shows webpack:// protocol. This doesn’t look normal to me.

[HotOrange]

I have another site where everything works as expected with almost the same setup and technologies (Gatsby and React). The initiator there starts also with webpack:// so I guess this should not be a problem.

[hillary]

Hey there, @HotOrange

We have looped in some additional Support Engineers to look at this, and we believe there may be some invalid reCAPTCHA configurations on your site.

Here’s some other instances where forms were 303ing. In these instances, all of the 303s were attributable to invalid reCAPTCHA config:

Form submission returns 303

hi there, netlify does not provide email - can you explain in a different way what you are trying to do?

React Form submission leads to 303 followed by 404

Ok so I think I found a solution, even thought not optimal, I went and copied all the files I had an remove all entries from recaptcha leaving just the honeypot stuff, and it apparently works, I think my recaptcha logic must be faulty, if someone has some tips on that would be nice. For now I just redeployed it in another instance an it works with honeypot.

Form submission

I set up a form on my site which I believe I did correctly. The headers in the network tab show a POST request and all the form data being sent plus a redirect status 303. I added an email notification in the notification area. However, when I test the form, I receive no notification and nothing saying the form was even submitted in the netlify console.

Additionally, here is a thread with a fellow Forums member who identifies and outlines this in their own code:

https://gist.github.com/yoavniran/b16d9b3790e7b16d125cbf0d99ce0038#file-gatsby-netlify-form-js-L81

Take a look through these resources and let us know if they are helpful!

[HotOrange]

Hi @hillary

thank you for trying to help me. The whole repository does not have any reCAPTCHA or honeypots included right now. I also searched through the repository to find something hidden or forgotten but nothing is in there:

[HotOrange]

Note to myself and other future readers: I found the solution Netlify forms is just able to parse and find a <form /> with the attribute data-netlify="true" when it is already rendered on the page. It can also be hidden via CSS display: none; but it needs to be in the DOM. Otherwise the Netlify bot can’t find it.

The problem in my case was that the form is conditionally rendered which means the DOM nodes are dynamically created on that time when a user interacts with the page like clicking on a button.

A good indicator for this was to delete the (old and outdated) existing form in the Netlify dashboard and re-deploy the site. In my case a new form was not created which leads to my moment.

Thanks @hillary and @hrishikesh for your help!

[hillary]

Hey there, @HotOrange

Thanks so much for circling back and sharing this update, it will definitely be helpful to future Forums members who encounter something similar. I am glad everything is working for you now!