Netlify 表单不适用于 Material-UI 模式

Question

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 1

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.

Answer 2

I'm not sure if Netlify changed their implementation since the accepted answer but it is now wrong. I've successfully implemented Netlify forms in my modals by simply following their walkthrough .

In any HTML file in your site folder, add an HTML form with the netlify attribute and the input fields you want Netlify to process.

In the JSX form, include an <input type="hidden" name="form-name" value="the-name-of-the-html-form" /> .

Example:

index.html

<form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field" hidden>
  <input type="hidden" name="form-name" value="contact" />
  <input type="email" name="email" />
  <input type="text" name="name" />
  <textarea name="message"></textarea>
</form> 

SampleModal.js

<form name="contact" method="POST" data-netlify="true" data-netlify-honeypot="bot-field">
    <input type="hidden" name="form-name" value="contact" />
    <TextField
    id="email"
    name="email"
    margin="dense"
    label="Your Email" />
    <TextField
    id="name"
    name="name"
    margin="dense"
    label="Name" />
    <TextField
    id="message"
    name="message"
    margin="dense"
    label="What do you need?"
    multiline />
    <Button
    variant="contained" 
    color="success"
    type="submit">
        Send Email
    </Button>
</form>