Issues with Netlify form submissions in my next.js 14 project

Support
,
1

I’m having trouble getting Netlify’s form submission to work with my Next.js 14 project. I’ve followed Netlify’s recommendations, activated form submissions within Netlify, and set up a hidden form in the public folder. Here’s what I have so far:

__forms.html in the public folder:

<html>
  <head></head>
  <body>
    <form name="contact" data-netlify="true" hidden>
      <input type="hidden" name="form-name" value="contact" />
      <input name="name" type="text" />
      <input name="email" type="email" />
      <input name="company" type="text" />
      <input name="phone" type="tel" />
      <input name="message" type="text" />
    </form>
  </body>
</html>

ContactForm component:

import { useState } from 'react';

function ContactForm() {
  const [status, setStatus] = useState(null);
  const [error, setError] = useState(null);

  const handleFormSubmit = async (event) => {
    event.preventDefault();
    try {
      setStatus('pending');
      setError(null);
      const form = event.target;
      const formData = new FormData(form);
      const res = await fetch('/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams(formData).toString(),
      });
      if (res.ok) {
        setStatus('ok');
        form.reset(); // Clear the form inputs
      } else {
        throw new Error(`Error: ${res.status} ${res.statusText}`);
      }
    } catch (e) {
      setStatus('error');
      setError(e.message);
    }
  };

  return (
    <form
      name="contact"
      method="POST"
      data-netlify="true"
      onSubmit={handleFormSubmit}
    >
      <input type="hidden" name="form-name" value="contact" />
      <input type="text" name="name" required placeholder="Name" />
      <input type="email" name="email" required placeholder="Email" />
      <input type="text" name="company" required placeholder="Company" />
      <input type="tel" name="phone" required placeholder="Phone" />
      <input type="text" name="message" required placeholder="Message" />
      <button type="submit" disabled={status === 'pending' || status === 'ok'}>
        {status === 'ok' ? 'Message sent' : status === 'pending' ? 'Sending...' : 'Send message'}
      </button>
      {status === 'error' && <div>Error: {error}</div>}
    </form>
  );
}

export default ContactForm;

Despite this setup, form submissions are not being recorded in Netlify. I’ve ensured that form submissions are enabled in Netlify. What might I be missing or doing wrong?

I am using Next.js 14.0.4.

The form appears correctly on the site but submissions don’t show up in Netlify’s form dashboard. Netlify also detects the form (probably the html form within my public folder), but not any submissions.

I have tried reading Netlify’s article: Next.js on Netlify (Next.js 13.5+ on Netlify | Netlify Docs) and their starter templates, specifically the __forms.html (next-platform-starter/public/__forms.html at main · netlify-templates/next-platform-starter · GitHub) file and the feedback-form.jsx (next-platform-starter/components/feedback-form.jsx at main · netlify-templates/next-platform-starter · GitHub) file.

2

@sivertje It may not be your only issue, but one issue is that the form must POST to a route that isn’t handled by Next.js, in this case the static HTML page is a clear choice.

You currently have:
const res = await fetch('/', {

Change it to:
const res = await fetch('/__forms.html', {

1 Like
3

Ah, I overlooked that… But that actually fixed it, thank you so much!