netlify
Pocket

先日の「Serverless 勉強会@京都 vol.1」で得た知見。カンパイ本町を一緒に運営している@shima_x_oさんの発表でNetlifyの話がありました。

その時のスライドがこちら

フロントエンドエンジニアのためのサーバーレス入門(Netlify でブログ構築編)

その中で「Netlify がフォーム用意してくれた」というのがあったので、試してみました。

基本的な使い方は上記スライドや、ちょっとググったらいろいろ出てきます。

実際に作ったフォーム

フォームのページはこちら

https://mismith-form.netlify.com/

実際に送れるので、匿名で適当なアドレスで送信してもらっても大丈夫ですが、送信すると完了画面に遷移するようにしています。

作り方

作るのは簡単で「Handling Form Submissions」のページを見ればサンプルのコードがあるので、それをコピペして試してみると分かります。

以下は、サンプルのコードにラジオボタンを追加してみたコードです。

<form name="contactform" action="thanks" netlify>
  <p>
    <label>Your Name: <input type="text" name="name"></label>
  </p>
  <p>
    <label>Your Email: <input type="email" name="email"></label>
  </p>
  <p>
    <label><input type="radio" name="food" value="カレー">カレー</label>
    <label><input type="radio" name="food" value="焼肉">焼肉</label>
    <label><input type="radio" name="food" value="寿司">寿司</label>
  </p>
  <p>
    <label>Message: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

普通のformタグに「netlify」か「data-netlify=”true”」を追加するだけで、お問い合わせフォームになります。

actionで送信後の画面パスを指定すれば、サンクスページも作れます。

送信された内容の確認

送信された内容は管理画面から確認できます。

Formタブを押すと、formタグのname属性で指定した名前があります。

netlifyform1

そのフォーム名をクリックすると、送信された内容が入っていて、内容を確認することができます。

netlifyform2

送信の通知

確かに送信された内容は確認できますが、いちいち管理画面に入らないとダメなのかと思いますよね。そんな時はNotificationsで設定すれば、送信されたタイミングでSlackやメールで通知することができます。

今回はメールに通知を飛ばす例です。

まずは、「Notifications」タブをクリックし、右上の「Add Notification」をクリックします。

netlifyform3

すると、Slackやメールのアイコンが出てきます。今回はメールにするので、「Email notification」をクリック。

netlifyform4

設定画面に移るので、設定していきます。

netlifyform5

Event to listen for

「Event to listen for」は通知のトリガーとなるイベントの設定です。メールが送られてきた時以外にも、デプロイが成功した時や失敗した時も選べます。

今回は「New Form Submission」を選択します。

Email to notify

送信先の設定です。上の画像ではサンプルのアドレスですが、実際に転送したいメールアドレスを入力してください。

Form

イベントのトリガーをデプロイ関連ではなく、「New Form Submission」を選択したときに出てきます。

Netlifyのフォームはフォームタグのname属性に違う名前のフォーム名をつければ、複数の種類のフォームを設置できます。そのため、ここの項目では、どのフォームから問い合わせが来たときかを選択できます。「Any form」を選べば、すべてのフォームになります。

これで、設定完了!実際に送信してみると…。

今回は個人のGmailに送信するようにしたので、Gmailにちゃんと届いてました!

netlifyform6

さいごに

スタティックサイトを作るときに悩みがちな問い合わせフォーム問題。フォームが欲しいからという理由でわざわざWordPressを入れてた人もいるんじゃないでしょうか?Netlifyでホスティングすれば簡単に設置できます。

フォームは以前は有料プランでしたが、無料でも使えるようになったそうです。ますますNetlify便利になってきて良いですね。

Pocket

カテゴリー: タグ: