ライフクリエイター諏訪亮祐

静的サイトの問い合わせフォームをNetlifyで無料運用する方法

問い合わせフォームはユーザーが困った際の窓口や顧客の注文・予約の発行など、電話で問い合わせするよりも敷居が低く、気軽にアクションできる役割があります。さらに、24時間365日対応してくれるのでホームページに欠かせない機能の一つです。

しかし、問い合わせフォームのためにWordPressなどを導入するのはあまりにも短絡的です。そこで、静的サイトのホスティングサービス、かつ問い合わせフォームも無料で使える「Netlify」を使って静的サイトの問い合わせフォームを運用していきます。

1. html、cssでフォームを作成

netlify form

まずはhtmlとcssで型となるフォームを作ります。
上の画像のサンプルフォームのhtmlとcssのコードを用意しましたのでご自由に活用ください。

必要項目だけを取り入れたので業種やサイトに合わせて項目の追加や修正を行って下さい。
Netlifyで問い合わせフォームを運用する際のポイントは上記htmlの13~15行目になります。

2. Netlifyの登録

netlify signup

Netlifyにてアカウントを作成します。
GitHubのアカウントを持っている方はGitHubアカウントで登録できます。

3. Netlifyに静的サイトを構築

netlify sites

サインイン(ログイン)が完了すると上の画像に画面が切り替わります。
画面中央にある破線で囲まれた部分に公開するサイトのフォルダをドラッグ&ドロップすればあっという間にサイトが公開されます。

netlify domain

きちんと公開されているか緑のURL(https://◯◯◯.netlify.com)をクリックしてみましょう。htmlとcssファイルが表示されていれば成功です。
独自ドメインなどドメインを設定したい場合はここで設定。後から変更可能なので今回は省略します。

4. 送信のテスト

netlify test

サイトの公開が成功したら問い合わせフォームの動作確認をします。公開したサイトのフォームに必要事項を入力して送信してみましょう。

netlify thanks

送信後、「Thank you!」とメッセージが出れば送信成功。
次は送信されたフォームの内容を確認します。

5. フォーム内容の確認

netlify form

Netlifyページ上部の「form」タブをクリック。
すると、htmlのformのname値である「contact」という名前のフォームができています。

netlify form

フォーム名をクリックすると先ほどテストで送信した内容を確認することができます。送信されたフォーム内容を問題なく受信しています。
「Item」や「Message」などのname値についてはhtmlで調整して下さい。

6. 通知の設定

netlify notification

フォームの送信・受信ともに問題ありませんでしたが通知設定をするとさらに便利になります。メールでの通知はもちろん、Slackに通知することも可能なのでカスタマイズ性が高まります。
通知の設定方法は、「Form」タブ→「Settings and usage」→左メニューのFormの中にある「Form notifications」→「Add notification」、もしくは「Settings」タブ→左メニューのForm→「Form notifications」→「Add notification」で設定することが可能です。

カテゴリー