
前回gatsbyの方のフォームのみを完成させることができました。
Netlifyを使ってコンタクトフォームを追加する【Gatsby.js】
今回はnetlifyの使用方法についてやっていきたいと思います。
この記事でわかること
・コンタクトフォームの作成方法
・netlifyの使い方
今回もこんな感じでやっていきたいと思います。
参考文献
公式のドキュメントを参考にさせて頂きました。
Building a Contact Form
This guide covers how to create a contact form in a Gatsby site, along with an overview of some strategies for handling form data that has been submitted. Gatsby is built on top of React. So anything that is possible with a React form is possible in Gatsby.
Gitリポジトリの作成
まずはGitHubに新しいリポジトリを作成します。
エラーを回避するために、README,
license,
または.gitignore
ファイルを使用して新しいリポジトリを初期化しないでください。
プロジェクトをGitHubにプッシュした後、これらのファイルは追加できます。
ローカルディレクトリをGitリポジトリとして初期化します。
$ git init
新しいローカルリポジトリにファイルを追加します。これにより、最初のコミットのためにファイルがステージングされます。
$ git add .
ローカルリポジトリにステージングしたファイルをコミットします。
git commit -m 'First commit'
GitHubリポジトリの[クイックセットアップ]ページの上部にあるクリップボードアイコンをクリックして、リモートリポジトリのURLをコピーし、ローカルリポジトリをプッシュするリモートリポジトリのURLを追加します。
$ git remote add origin https://github.com/<リポジトリのURL>
URLを確認します。
$ git remote -v
次に、ローカルリポジトリの変更をGitHubにプッシュします。
$ git push -u origin master
次にnetlifyに接続してみましょう。
Netlifyに接続する
ステップ1
まずは新しいサイトをnetlifyで追加します。
ログインしたら、ダッシュボードの[ New site from Git]ボタンをクリックします。

ステップ2
次にリポジトリにリンクをします。
ボタンをクリックすると、NetlifyをGitリポジトリに接続するこの画面が表示されます。
使用するサービスを選択してください。
僕に場合は、githubを使用しているので、githubを選択します。
GitHub、Gitlab、またはBitbucketにプッシュすると、Netlifyがすべての作業を行います。
つまり、更新や変更を手動でデプロイする必要がなくなります。
ステップ3
そして、リポジトリを選択します。

ステップ4
ここでオプションを構成します。
今回は、デフォルトのままで、[Deploy site]をクリックします。

ステップ6
サイトを構築していきます。
ここではNetlifyが行い、進行状況を確認することができます。
ステップ7
以上で完了です!
Netlifyは、サイトに一時的な名前を付けるなど、すべてを行ってくれます。
これで、カスタムドメインを追加することができます。
サイトは、熱心な一般の人々が閲覧できるように公開されています。
それではサイトをnetlifyで公開することができたので、コンタクトフォームが正常にできているかを確認してみましょう。
コンタクトフォームの内容を表示
ステップ1:メールの通知設定
まずは[site settings]のFormsのなかの[Form notifications]を設定します。
自分の希望するメールアドレスを設定して、自分のメールにフォームの内容が来るようにします。

[Email notification]を選択して、自分のメールアドレスを入力すれば設定完了です。
ステップ2:コンタクトフォームの入力
それではコンタクトフォームで適当に入力してみましょう。

これできちんとメールできているか、メールの方で確認します。
ステップ3:メールで確認
無事にメールが指定したアドレスにきたか確認してみます。

無事に入力した内容のメールが届きました。
spamメール対策などもできるらしいので、また機会があればそっちの方もやってみようと思います。
最後まで読んで頂きありがとうございました。