john-nik.netlify.app
I have been trying to implement netlify forms for the ease and anti-bot capabilities it provides, for but some reason, the form is not being detected by netlify, even if I send AJAX requests.
I have added an html file in the public directory with the form inside of it, I have tried redirecting the form response using AJAX, I have tried adding the hidden input, yet nothing works.
<div className={'form-wrapper'}>
<form className="form" onSubmit={handleSubmit} name="contact" method="POST" data-netlify={true}>
<input type="hidden" name="form-name" value="contact" />
<div className={'form-input-box'}>
<label htmlFor="fname">Name</label><br />
<input onInput={handleNameInput} required={true} id="fname" name="nameInput" type="text" />
</div>
<div className={'form-input-box'}>
<label htmlFor="femail">Email</label><br />
<input onInput={handleEmailInput} required={true} id="femail" name="emailInput" type="text" />
</div>
<div className={'form-input-box'}>
<label htmlFor="fmessage">Message</label><br />
<textarea onInput={handleMessageInput} required={true} className="fmessage" id="fmessage" name="messageInput" type="text" />
</div>
<div className="submit-button-container">
<button type="submit" className={'start-game-button'}>Submit</button>
</div>
</form>
</div>
function handleSubmit(formEvent) {
formEvent.preventDefault();
const form = document.querySelector('.form');
const formData = new FormData(form);
console.log(formData)
fetch('/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: encodeURI( {'form-name': 'contact', name: 'name' }) // the name key is there to try and debug one and only variable other than form-name and see if I can see the "name" in the response
})
.then((res) => console.log(res.json()))
.catch(error => console.log(error))
}
When I check the console for the logs, it prints me this is i turn the âthenâ response into json:
If I console.log the response alone, this prints into the console:
I have tried prerendering the html of the form using âuse serverâ at the top of the component, and iâve also tried client rendering, which none of them worked. The form IS visible with javascript disabled, and even when viewing the source code of the page, I can see the form being shown, but netlify does not find and seems to not receive the POST requests being sent to it