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

Question

So Ive been racking my brain, watching tutorials, and trying everything in general. The Netlify docs are a bit hazy on how to do it and the tutorials Ive watched conflict with it a little in the general code set up. Would any one mind giving feed back as to if this is the correct way and that my code is correct; if not tell me what could be added or removed to make this work? I dont see any of the submissions I have tested in the form submission repository on 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;

If there is anything additional I can provide to help clarify this please let me know. I just dont know what is good or not to add or take away from the code to get it to be submitted properly. Netlify does recognize that there is a form, but nothing seems to be submitted.

Answer 1

I can relate. I had difficulties when I implemented it as well.

The one thing I notice from your code: Why do you have two form tags? Remove the first form tag and all its content. My guess is that because there are two forms with the same name are causing your problems.

Here is my form implementation which works on 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>

The important bits are commented with important: .

Another tip: Create a barebones project that only has the form as a component in its index page. Then create a dummy site you can upload to netlify and test your form in this isolated environment.