Netlify表单无法与我的GatsbyJS网站一起使用

如何解决Netlify表单无法与我的GatsbyJS网站一起使用

我正在一个网站上，并使用Netlify进行托管。我已将Netlify表单添加到contact.js文件中的“与我们联系”表单中，并且该表单名称在Netlify表单仪表板中显示良好。虽然，当我提交表格时，没有任何反应。在Netlify上，无论是批准邮件还是垃圾邮件，都不会显示任何提交内容。

这是我的contact.js来源。

import React from 'react';
import _ from 'lodash';
import {graphql} from 'gatsby';

import {Layout} from '../components/index';
import {toStyleObj,withPrefix,htmlToReact} from '../utils';
import FormField from '../components/FormField';

// this minimal GraphQL query ensures that when 'gatsby develop' is running,// any changes to content files are reflected in browser
export const query = graphql`
  query($url: String) {
    sitePage(path: {eq: $url}) {
      id
    }
  }
`;

export default class Page extends React.Component {
    render() {
        return (
            <Layout {...this.props}>
              <article className="post post-full">
                <header className="post-header has-gradient outer">
                  {_.get(this.props,'pageContext.frontmatter.image',null) && (
                  <div className="bg-img" style={toStyleObj('background-image: url(\'' + withPrefix(_.get(this.props,null)) + '\')')}/>
                  )}
                  <div className="inner-sm">
                    <h1 className="post-title">{_.get(this.props,'pageContext.frontmatter.title',null)}</h1>
                    {_.get(this.props,'pageContext.frontmatter.subtitle',null) && (
                    <div className="post-subtitle">
                      {htmlToReact(_.get(this.props,null))}
                    </div>
                    )}
                  </div>
                </header>
                <div className="inner-md outer">
                  <div className="post-content">
                    {htmlToReact(_.get(this.props,'pageContext.html',null))}
                  </div>
                  <form name={_.get(this.props,'pageContext.frontmatter.form_id',null)} id={_.get(this.props,null)} {...(_.get(this.props,'pageContext.frontmatter.form_action',null) ? ({action: _.get(this.props,null)}) : null)}name="contact" method="POST" data-netlify="true" data-netlify-honeypot="bot-field">
                        <div className="screen-reader-text">
                          <label>Don't fill this out if you're human: <input name="bot-field" /></label>
                        </div>
                        <input type="hidden" name="form-name" value={_.get(this.props,null)} />
                        {_.map(_.get(this.props,'pageContext.frontmatter.form_fields',null),(field,field_idx) => (
                          <FormField key={field_idx} {...this.props} field={field} />
                        ))}
                        <div className="form-submit">
                          <button type="submit" className="button">{_.get(this.props,'pageContext.frontmatter.submit_label',null)}</button>
                        </div>
                      </form>
                </div>
              </article>
            </Layout>
        );
    }
}

解决方法

您的表格与Netlify标准有很大不同。在Netlify中，要链接表单和仪表板，您需要添加一些元数据和元属性，例如data-netlify="true"，data-netlify-honeypot="bot-field"（以避免垃圾邮件）和name属性，它们具有完全相同的名称比仪表板中的Netlify表单要大。它必须看起来像：

<form name="contact" method="post" data-netlify="true" data-netlify-honeypot="bot-field">
  {/* You still need to add the hidden input with the form name to your JSX form */}
  <input type="hidden" name="form-name" value="contact" />
  ...
</form>

看看Form Handling with Static Site Generators和How To Use Netlify Forms With Gatsby（开发人员）的文章。