Netlify form doesn’t work with a Material-UI modal

I’ve a simple Next.js app on Netlify that open a form to click on the subscribe button.

Code

Here is the index file:

pages/index.js

import React from 'react';
import { SubscribeModal } from '../components/SubscribeModal';

export default function Home() {
  const [open, setOpen] = React.useState(false);

  return (
    <div>
      <button onClick={() => setOpen(true)}>Sign in in newsletters</button>
      <SubscribeModal
        open={open}
        onClose={() => setOpen(false)}
        onSuccess={() => setOpenBadNews(true)}
      />
    </div>
  );
}

Here is the modal:

components/SubscribeModal.js

import { Dialog, DialogTitle } from '@mui/material';

export function SubscribeModal({ open, onClose, onSuccess }) {
  return (
    <Dialog onClose={onClose} open={open}>
      <DialogTitle>
        <b>Login</b>
      </DialogTitle>
      <form name="contact" action="/success" method="POST" data-netlify="true">
        <input type="hidden" name="form-name" value="contact" />
        <p>
          <label htmlFor="youremail">Your Email: </label>{' '}
          <input type="email" name="email" id="youremail" />
        </p>
        <p>
          <button type="submit">Send</button>
        </p>
      </form>
    </Dialog>
  );
}

I also have a simple pages/success.js app with a success message.

Problem

When I click on the submit button, a 404 page appear.

Tried solution

• I’ve tried every tag in the form tag.
• I’ve tried with Next build & Next export and with default Next config deploy.
• I’ve tried with Material UI component or HTML native elements

Someone has an idea?

Answer

It’s because your modal isn’t rendered on build.

Netlify will analyze your HTML to find the data-netlify="true" tag. But on build, there is no tag because the JavaScript will add the modal when the user click on the button and not at the build time.

So you can create another page on your Next project like /subscribe with the form. So the form will be rendered at the build time and Netlify will be able to detect your form.