Home
Support Forums

Receiving a HTTP 303 response

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));
};

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.

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.

Hey there, @HotOrange :wave:

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:

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

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

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:

Screenshot 2021-09-08 at 17.03.50

Note to myself and other future readers: I found the solution :tada: 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 :bulb: moment.

Thanks @hillary and @hrishikesh for your help! :+1:

1 Like

Hey there, @HotOrange :wave:

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! :netliconfetti: