Help us understand the problem. What is going on with this article?

GatsbyでNetlifyのFormを使う(react-bootstrap使用)

Gatsbyで作ったサイト(react-bootstrap使用)でNetlifyのFormを使おうとして微妙にハマったのでメモしておく。
react-bootstrapを使わない場合も参考になると思う。

環境

  • React 16.8.6
  • Gatsby 2.1
  • react-bootstrap 1.0.0-beta.9

コード

以下のコードで動作

class ContactForm extends Component {
  constructor() {
    this.state = { validated: false }
  }

  // react-bootstrap用のPOSTイベントハンドラ
  // https://react-bootstrap.github.io/components/forms/#forms-validation
  handleSubmit(event) {
    if (!event.currentTarget.checkValidity()) {
      event.preventDefault()
      event.stopPropagation()
    }
    this.setState({ validated: true })
  }

  render (){
    return (
      <Form validated={this.state.validated} onSubmit={this.handleSubmit} name="contact" method="POST" data-netlify="true">
        <input type="hidden" name="form-name" value="contact" />
        <Form.Group>
          <Form.Label>name</Form.Label>
          <Form.Control name="name" type="text" />
        </Form.Group>
        <Button type="submit" >送信</Button>
      </Form>
    )
  }
}

ポイント

まずは、netlifyの公式通りにFormタグにname="contact"及びdata-netlify="true"プロパティを追加する。ちゃんとreact-bootstrapでも動作した。

次に、Gatsbyの場合、Netlify側が挿入する以下のタグがGatsbyによって消去されるため、予め入力しておく必要がある。ちなみに、この設定方法は公式ブログに書いてある。

<input type="hidden" name="form-name" value="contact" />

また、<Form.Control />(普通のhtmlの場合は<input />)にはnameプロパティが必要。namevalueプロパティの値が、ユーザーへ通知される仕組み。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした