Netlify 表單不適用於 Material-UI 模式

Question

我在 Netlify 上有一個簡單的 Next.js 應用程序，它打開一個表單以單擊訂閱按鈕。

代碼

這是索引文件：

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>
  );
}

這是模態：

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>
  );
}

我還有一個帶有成功消息的簡單pages/success.js應用程序。

問題

當我點擊提交按鈕時，會出現一個 404 頁面。

嘗試過的解決方案

• 我已經嘗試了表單標簽中的每個標簽。
• 我已經嘗試使用 Next build & Next export 和默認的 Next config deploy。
• 我試過使用 Material UI 組件或 HTML 本機元素

有人有想法嗎？

Answer 1

這是因為您的模態未在構建時呈現。

Netlify 將分析您的 HTML 以找到data-netlify="true"標簽。 但是在構建時，沒有標簽，因為 JavaScript 會在用戶單擊按鈕時而不是在構建時添加模式。

因此，您可以在 Next 項目上創建另一個頁面，例如/subscribe表單。 因此表單將在構建時呈現，Netlify 將能夠檢測到您的表單。

Answer 2

我不確定自接受答案以來 Netlify 是否更改了它們的實現，但現在是錯誤的。 通過簡單地遵循他們的演練，我已經在我的模態中成功地實現了 Netlify 表單。

在站點文件夾中的任何 HTML 文件中，添加具有 netlify 屬性的 HTML 表單和您希望 Netlify 處理的輸入字段。

在 JSX 表單中，包含一個<input type="hidden" name="form-name" value="the-name-of-the-html-form" /> 。

例子：

索引.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>