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

前回gatsbyの方のフォームのみを完成させることができました。

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

今回は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に接続する

ステップ１

まずは新しいサイトをnetlifyで追加します。

ログインしたら、ダッシュボードの[ New site from Git]ボタンをクリックします。

ステップ2

次にリポジトリにリンクをします。

ボタンをクリックすると、NetlifyをGitリポジトリに接続するこの画面が表示されます。

使用するサービスを選択してください。

僕に場合は、githubを使用しているので、githubを選択します。

GitHub、Gitlab、またはBitbucketにプッシュすると、Netlifyがすべての作業を行います。

つまり、更新や変更を手動でデプロイする必要がなくなります。

ステップ３

そして、リポジトリを選択します。

ステップ４

ここでオプションを構成します。

今回は、デフォルトのままで、[Deploy site]をクリックします。

ステップ6

サイトを構築していきます。

ここではNetlifyが行い、進行状況を確認することができます。

ステップ7

以上で完了です！

Netlifyは、サイトに一時的な名前を付けるなど、すべてを行ってくれます。

これで、カスタムドメインを追加することができます。

サイトは、熱心な一般の人々が閲覧できるように公開されています。

それではサイトをnetlifyで公開することができたので、コンタクトフォームが正常にできているかを確認してみましょう。

コンタクトフォームの内容を表示

ステップ１：メールの通知設定

まずは[site settings]のFormsのなかの[Form notifications]を設定します。

自分の希望するメールアドレスを設定して、自分のメールにフォームの内容が来るようにします。

[Email notification]を選択して、自分のメールアドレスを入力すれば設定完了です。

ステップ２：コンタクトフォームの入力

それではコンタクトフォームで適当に入力してみましょう。

これできちんとメールできているか、メールの方で確認します。

ステップ３：メールで確認

無事にメールが指定したアドレスにきたか確認してみます。

無事に入力した内容のメールが届きました。

spamメール対策などもできるらしいので、また機会があればそっちの方もやってみようと思います。

最後まで読んで頂きありがとうございました。