Forms not working with my NextJS application

[pandofla]

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

[rcmaples]

@pandofla

const form = document.querySelector('.form');

Hi @pandofla —

Check this line in your code. The form you’re defining inside of the handleSubmit function needs to be the target on the event. In this case, it should look like this: const form = formEvent.target;

Your current code is assigning the form’s DOM node into the form var instead of the event and its properties (form entries on submit).

Give that a shot!

[nathanmartin]

The previous post seems incorrect.
The way you’re selecting the form looks perfectly fine to me.

In terms of:

@pandofla

the form is not being detected by netlify

Do you mean at build time?
Check your build logs, it outputs details for the forms located.
If they aren’t being located, then that’s the first thing to fix, as you won’t be able to submit to them if it doesn’t know that they’re there.

The error with the Unexpected token is not valid JSON is just because you have:

.then((res) => console.log(res.json()))

The response will never be JSON, it will always be HTML, and you can’t parse the HTML as JSON.

[rcmaples]

Sorry, I was trying to follow the example in Netlify’s Forms Doc.

In the scope of OP’s handleSubmit() function, shouldn’t the form var be set to the values the user submitted in the form and not the form itself?

I want to make sure I understand as well

[nathanmartin]

@rcmaples They could retrieve the reference to the html form element by accessing it on the formEvent, but there’s also nothing inherently wrong with retrieving it with document.querySelector('.form').

It’s only being passed as a parameter to the FormData constructor.

Either way would be a reference to the same html element.

Provided the usual basic caveats, e.g. there is only one element in the page with the class .form, and that it’s on the correct form element.

In this case there is a hidden duplicate of the form in the page, but it does not have that class:

[rcmaples]

Ah, thanks for the extra info! Apologies for my ignorance

[pandofla]

Thank you for the previous reply, and for clarifying another user’s questions. Really helpful from your part.

After some time, the form has been detected by netlify, even though I changed nothing. I haven’t even turned off and on the form detection feature of netlify. It’s just that at a random point today I woke up before going to work to try and brainstorm something really quick, and I saw that netlify suddenly detected the form. The only problem now is that when the form is submitted, I am not receiving both the email notification, and the notification on netlify’s form tab.

Do you have any idea as to why this could be happening?