Netlifyを使ってコンタクトフォームを追加する【Gatsby.js】

import React from "react"
import Layout from "../components/layout"

const ContactPage = () => (
  <Layout>
    <h1>Contact</h1>
  </Layout>
)

export default ContactPage

import React from 'react';
import Layout from '../components/layout';
import SEO from '../components/seo';
import '../components/contactPage.css'


function ContactPage() {
  return (
    <Layout>
      <SEO title="CONTACT" />
      <form
        className='contact_form'
        name="Contact Form"
        method="POST"
        data-netlify="true"
        action="/pages/success"
      >
        <input type="hidden" name="form-name" value="Contact Form" />
        <h1 className='contactHeader'>CONTACT US</h1>
        <label>お名前：</label><input type="text" name="name" className="contact__field" placeholder="お名前を入力して下さい"></input>
        <label>メールアドレス：</label><input name="email" type="email" className="contact__field" placeholder="メールアドレスを入力して下さい"></input>
        <label>件名：</label><input name='subject' type="text" className="contact__field" placeholder="件名を入力して下さい"></input>
        <label>お問い合わせ内容：</label><textarea name='message' className="contact__field" placeholder="お問い合わせ内容を入力して下さい"></textarea>
        <div data-netlify-recaptcha="true"></div>
        <button type='submit'>送信</button>
      </form>
    </Layout>
  );
}

export default ContactPage;

.contact_form {
  height: 120vh;
  width: 100%;
  background: #fff;
  padding: 20px 30px;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.contactHeader {
  margin: 10px 0;
  padding-bottom: 10px;
  width: 180px;
  color: #78788c;
  border-bottom: 3px solid #78788c;
}

.contact_form input {
  margin: 10px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background: none;
  outline: none;
  resize: none;
  border: 0;
  font-family: 'Montserrat', sans-serif;
  transition: all 0.3s;
  border-bottom: 2px solid #bebed2;
}

.contact_form textarea {
  margin: 10px;
  padding: 15px;
  width: 100%;
  height: 200px;
  font-family: 'Montserrat', sans-serif;
  transition: all 0.3s;
  border-bottom: 2px solid #bebed2;
}

.contact_form input:focus {
  border-bottom: 2px solid #78788c;
}

.contact_form label {
  margin-top: 40px;
  margin-bottom: 10px;
}

.contact_form button {
  padding: 8px 20px;
  margin-top: 8px;
  margin-left: 0.6rem;
  font-family: 'Montserrat', sans-serif;
  border: 2px solid #78788c;
  background: 0;
  color: #5a5a6e;
  cursor: pointer;
  transition: all 0.3s;
}

.contact_form button:hover {
  background: #78788c;
  color: #fff;
}