GatsbyJSブログにNetlify Formsでお問い合わせページを追加した

2020-05-06

Content

はじめに

おはようございます！こんにちは！こんばんは！
麻雀と芝生大好きおじさんことのふのふ(@rpf_nob)です！！

今回はGatsbyJSブログにNetlify Formsでお問い合わせページを追加します。

基本的にはGatsbyJSの公式ページとnetlifyのドキュメントの内容通りやれば簡単にできるのでおススメです！

前提

このブログはGatsbyJSのgatsby-starter-blogのテンプレートから作成しています。

Netlify Formsとは

Netlifyとは

Netlifyは静的サイトをホスティングできるサービスで、このサイトはNetlifyを使用しています。

Netlify Formsとは

Netlify FormsはNetlifyのサービスの一つで、バックエンドの実装やフロントエンドのjavascriptのコードを書くことなく、問い合わせフォームが追加できます。

価格

月100件・10MBまで無料で使用できるので、はじめのうちはこれで十分かと思います。

その他機能

その他にもファイルアップロードやメールやSlackへの通知機能などもありかなり便利です。

問い合わせページ作成

それでは問い合わせページを作成していきます。

src/pages/contact.jsを作成

今回はフォームに[material-ui]を使用したので、インストールします。

npm install --save @material-ui/core

名前・メール・件名・問い合わせ内容のテキストエリアと送信ボタンを用意します。
送信ボタンにdisabled機能だけつけています。

src/pages/contact.js

import React, { useState } from "react";
import { Link, graphql } from "gatsby";

import Layout from "../components/layout";
import SEO from "../components/seo";

import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

const Contact = ({ data, location }) => {
  const siteTitle = data.site.siteMetadata.title;
  const author = data.site.siteMetadata.author.name;

  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [subject, setSubject] = useState("");
  const [message, setMessage] = useState("");

  const handleChange = event => {
    switch (event.target.name) {
      case "name":
        setName(event.target.value);
        break;
      case "email":
        setEmail(event.target.value);
        break;
      case "subject":
        setSubject(event.target.value);
        break;
      case "message":
        setMessage(event.target.value);
        break;
      default:
        console.log("key not found");
    }
  };

  const canSubmit = () => {
    if (name === "") return true;
    if (email === "") return true;
    if (subject === "") return true;
    if (message === "") return true;

    return false;
  };

  return (
    <div>
      <Layout location={location} title={siteTitle} author={author}>
        <SEO title="Contact" />
        <h1>Contact</h1>
        <p>
          各種お問い合わせはこちらのフォームよりお願いいたします。
          <br></br>
          お名前・メールアドレス・件名・問い合わせ内容を記載して送信ボタンをクリックしてください。
        </p>
        <div className="contact">
          <form
            name="contact"
            method="POST"
            data-netlify="true"
            data-netlify-honeypot="bot-field"
          >
            <input type="hidden" name="form-name" value="contact" />
            <input type="hidden" name="bot-field" />
            <div className="contact__area">
              <TextField
                id="name"
                className="contact__field"
                name="name"
                label="お名前"
                type="text"
                variant="outlined"
                value={name}
                onChange={handleChange}
              />
            </div>
            <div className="contact__area">
              <TextField
                id="email"
                className="contact__field"
                name="email"
                label="メールアドレス"
                type="email"
                variant="outlined"
                value={email}
                onChange={handleChange}
              />
            </div>
            <div className="contact__area">
              <TextField
                id="subject"
                className="contact__field"
                name="subject"
                label="件名"
                type="text"
                variant="outlined"
                value={subject}
                onChange={handleChange}
              />
            </div>
            <div className="contact__area">
              <TextField
                id="message"
                className="contact__field"
                name="message"
                label="問い合わせ内容"
                multiline
                rows={4}
                variant="outlined"
                value={message}
                onChange={handleChange}
              />
            </div>
            <div className="contact__btn">
              <Button
                type="submit"
                variant="contained"
                color="primary"
                disabled={canSubmit()}
              >
                送信
              </Button>
            </div>
          </form>
        </div>
        <Link to="/">← Home</Link>
      </Layout>
    </div>
  );
};

export default Contact;

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
        author {
          name
        }
      }
    }
  }
`;

注意点として以下3つ

formタグに[name=“contact”]と[data-netlify=“true”]を指定する
<input type="hidden" name="form-name" value="contact" />が必要
[name=“contact]と[value=“contact”]の値は一致

<form
  name="contact"
  method="POST"
  data-netlify="true"
  data-netlify-honeypot="bot-field"
>
<input type="hidden" name="form-name" value="contact" />

ナビゲーションバーに問い合わせページのリンクを追加

以前作ったナビゲーションバーにリンクを追加します。
そろそろレスポンシブ対応しないと厳しいですね。

src/components/navbar.js

import React from "react";
import { Link } from "gatsby";

const NavBar = () => {
  return (
    <nav className="navbar">
      <ul className="navbar__ul">
        <li className="navbar__li">
          <Link to="/">HOME</Link>
        </li>
        <li className="navbar__li">
          <Link to="/about">ABOUT</Link>
        </li>
        <li className="navbar__li">          <Link to="/contact">CONTACT</Link>        </li>      </ul>
    </nav>
  );
};

export default NavBar;