Gatsby.js スタティックサイトのチュートリアル Part 7

Gatsby.jsでMDXを使用したブログサイトを作成するチュートリアルのPart7です。前回テンプレートを使用して各ブログポストのページを作成し、ブログページからのリンクを実装できました。ブログページに機能を追加していく予定ですが、今回は先にコンタクトフォームのページを完成させてしまいましょう。

フォームハンドリング

SSG（スタティックサイトジェネレーター）にはフォームを処理するバックエンドの機能がないため、任意のバックエンドプラットフォームを使用する必要があります。

Gatsbyの公式サイトで紹介されているGetformは現在、フリープランが無くなり、使用回数に限度があるトライアルしか無料では使えないようです。

今回はフリープランが使用できるformcarry.を使用してみます。

アカウントを作成し、'Create Form'ボタンを押して必要事項を入力すれば、エンドポイントURLが発行されるので、formのaction属性に貼り付けるだけでフォームを受け取ることができます。

コンタクトフォームの作成

シンプルにコンタクトフォームを作成してみます。contact.jsを下記のように変更し、contact.module.cssを作成してスタイリングします。

src/pages/contact.js

import * as React from 'react'
import Layout from '../components/layout'
import Seo from '../components/seo'
import {
  label,
  input,
  textarea,
  button,
} from './contact.module.css'

const ContactPage = () => {
  return (
    <Layout pageTitle="Contact">
      <p>Cntact Form</p>
      <form method="post" action="https://formcarry.com/s/{YOUR UNIQUE ENDPOINT}">
	
	<label htmlFor="name" className={label}>
	  Name
	</label>
	<input className={input} type="text" name="name" id="name" required={true} />
	
	<label htmlFor="email" className={label}>
	  Email
	</label>
	<input className={input} type="email" name="email" id="email" required={true} />
	
	<label htmlFor="message" className={label}>
	  Message
	</label>
	<textarea className={textarea} name="message" id="message" rows="5" required={true} />
	
	<button className={button} type="submit">Send</button>
	
      </form>
    </Layout>
  )
}

export const Head = () => <Seo title="Contact" />

export default ContactPage

src/pages/contact.module.css

.label {
    display: block;
}

.input {
    box-sizing: border-box;
    display: block;
    font-family: sans-serif;
    width: 100%;
    margin-bottom: 1rem;
}

.textarea {
    box-sizing: border-box;
    display: block;
    font-family: sans-serif;
    width: 100%;
    margin-bottom: 1rem;
}

.button {
    height: 2.4rem;
    padding: 0 3rem;
}

表示を確認しておきます。

これでコンタクトフォームが完成しました。ローカルサーバーをからでも送信できます。送信するとサンキューメッセージが表示されます。

今回は以上です。