为什么我的 Netlify 联系表不起作用？

Question

所以我一直在绞尽脑汁，看教程，尝试一切。 Netlify 文档对如何做有点模糊，我看过的教程在一般代码设置中与它有一点冲突。 是否有人会介意这是否是正确的方法并且我的代码是否正确？ 如果不告诉我可以添加或删除什么来完成这项工作？ 我没有看到我在 Netlify 的表单提交存储库中测试过的任何提交。

import React from 'react';
import Layout from '../components/layout';
import SEO from '../components/seo';
import './contact.scss';

const ContactPage = () => {
  return (
    <Layout>
      <SEO title="Contact" />
      <h2 style={{ textAlign: 'center' }}>Drop a line and say hi!</h2>
      <h1>Contact Me</h1>
      <div className="contactForm">
        <form name="contact" netlify netlify-honeypot="bot-field" hidden>
          <input type="text" name="name" />
          <input type="email" name="email" />
          <input type="subject" name="subject" />
          <input type="budget" name="budget" />
          <textarea name="message"></textarea>
        </form>

        <form
          name="contact"
          method="post"
          data-netlify="true"
          data-netlify-honeypot="bot-field"
          action="/success/"
          data-netlify-recaptcha="true"
        >
          <input type="hidden" name="form-name" value="contact" />

          <input type="text" name="name" placeholder="Your Name" />

          <input type="email" name="email" placeholder="name@name.com" />

          <input
            type="subject"
            name="subject"
            placeholder="Your Question?"
            style={{ width: '70%', float: 'left' }}
          />

          <input
            type="budget"
            name="budget"
            placeholder="Your Budget"
            style={{ marginLeft: '2%', width: '27%', float: 'left' }}
          />

          <textarea
            name="message"
            placeholder="Whats on your mind?"
            style={{ height: '100px' }}
          ></textarea>

          <div data-netlify-recaptcha="true"></div>

          <button type="submit">Send</button>
        </form>
      </div>
    </Layout>
  );
};
export default ContactPage;

如果我可以提供任何其他信息来帮助澄清这一点，请告诉我。 我只是不知道在代码中添加或删除什么是好的，以使其正确提交。 Netlify 确实承认有一个表单，但似乎没有提交任何内容。

Answer 1

我可以联系起来。 我在实施它时也遇到了困难。

我从您的代码中注意到的一件事：为什么您有两个表单标签？ 删除第一个表单标签及其所有内容。 我的猜测是，因为有两个同名的 forms 导致您的问题。

这是我在 Netlify 上的表单实现：

        <form name="form-feedback" // important: Give your form a name
              method="POST" // important: make sure there is some way the data is transfered like here with an HTML request
              data-netlify="true" // important: enable your form in netlify
              netlify-honeypot="bot-field"
              action="/thanks">

          <input name="form-name" value="form-feedback" type="hidden" />
          {/* important: value="form-feedback" needs to be the same as defined in the form tag*/}

          {/* your form fields */}
          <div>
            <Typography variant="body1" gutterBottom>More Feedback</Typography>
            <Input
              type="text"
              name="generalFeedback" // important: give your inputs a name
              placeholder="More Feedback"
              multiline
            />
          </div>

          {/* important: Your form needs to be submitted somehow */}
          <Button type="submit" value="Submit">Send Feedback</Button>
        </form>

重要的位用important: 。

另一个提示：创建一个仅将表单作为其索引页面中的组件的准系统项目。 然后创建一个虚拟站点，您可以上传到 netlify 并在这个隔离环境中测试您的表单。