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プロパティが必要。nameとvalueプロパティの値が、ユーザーへ通知される仕組み。