Form 404 - Submit Error

Hello,

I have been reading the doc(https://docs.netlify.com/forms/setup/) and this post here ([Common Issue] Form problems, form debugging, 404 when submitting), but still having problems. I am hoping someone can spot an error.

I have an html form on a static site
<form id="lead-magnet" name="lead-magnet" action="/" netlify>

I am posting the request with javascript because I want to trigger other events on submit (file download).

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

const processForm = (form) => {
	const data = new FormData(form);
	fetch('/', {
		method: 'POST',
		headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
		body: encode({ 'form-name': 'lead-form', ...data })
	})
		.then(() => {
			console.log('Form has been submitted!');
      downloadFile()
		})
		.catch((error) => {
			console.log('error', error);
		});
};

const leadForm = document.getElementById('lead-magnet');
if (leadForm) {
	leadForm.addEventListener('submit', (e) => {
    processForm(leadForm);
		e.preventDefault();
	});
}

I am not a forms expert, but something i might try is to set the method in the HTML as well.

I know that you are handling the POST in the JS, but just to be sure, it is something to try. If that doesn’t help, we’ll have to wait for someone who is a forms expert to chime in!

I have fixed this issue.

This post was helpful: Checkboxes and radio buttons in forms

1 Like