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

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

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

这是我在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并在此隔离的环境中测试表单。

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

1 个答案: