【Netlify】Forms機能を利用して問い合わせフォームを作成する

# Netlifyとは

WEBサイトのホスティングサービス
https://www.netlify.com/

![netlify.png](https://qiita-image-store.s3.amazonaws.com/0/141934/36200c1e-9c92-8376-964d-7113cf0ef524.png)

# Netlifyに関する投稿
・[Netlify / GithubPages / Heroku の速度比較](https://qiita.com/NaokiIshimura/items/0b6c4ff5da437081866b)
・[ドラッグ＆ドロップでWEBサイトを公開する](https://qiita.com/NaokiIshimura/items/40ed08203b35aa0b527c)
・[Github連携でWEBサイトを公開する](https://qiita.com/NaokiIshimura/items/9f12805af85c9be22814)
・[カスタムドメインを設定する](https://qiita.com/NaokiIshimura/items/64e060ccc244e38d0c15)
・Forms機能を利用して問い合わせフォームを作成する ←今回の投稿

# Forms機能について

NetlifyのForms機能を利用すると、サーバサイドの実装やJavaScriptのコードを記述することなく、「問い合わせフォーム」のような投稿機能がWEBサイトに追加できます。

フォームに投稿された内容はNetlifyの管理コンソールやメールなどで確認することができます。
テキストだけでなくファイルも投稿させることができます。

> Freeプランでは**100投稿/月**、**10MB/月**までという制限があります

# 参考

- [Plans and Pricing \| Netlify](https://www.netlify.com/pricing/)
- [Forms \| Netlify](https://www.netlify.com/docs/form-handling/)

# 実装

Forms機能を利用するのは非常に簡単で、`<form>`タグ内に`netlify`と記述するだけです。

```html
<form name="contact" method="POST" netlify>
  <!-- 省略 -->
</form>
```

# 1. サンプル

Netlifyのドキュメントに記載されているサンプルは以下のとおりです。

```html:form.html
<form name="contact" method="POST" 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>Your Role: <select name="role[]" multiple>
      <option value="leader">Leader</option>
      <option value="follower">Follower</option>
    </select></label>
  </p>
  <p>
    <label>Message: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>
```

![netlify-form-01.png](https://qiita-image-store.s3.amazonaws.com/0/141934/54d66bbc-1f2f-3d43-cc8c-94dab647c438.png)


# 2. Welcomeメール

Forms機能を利用するHTMLファイルがデプロイされると、Welcomeメールが届きます。

![netlify-form-00.png](https://qiita-image-store.s3.amazonaws.com/0/141934/5538ddbd-dd5f-4f80-a379-4c401476d809.png)

# 3. CAPTCHA

フォームをサブミットすると、BOTやいたずら防止のためのCAPTCHAが自動で表示されます。
CAPTCHAを解くとフォームの内容が投稿されます。

![netlify-form-02.png](https://qiita-image-store.s3.amazonaws.com/0/141934/64da50ca-830a-48c4-5e08-f60cc2cee43c.png)
![netlify-form-04.png](https://qiita-image-store.s3.amazonaws.com/0/141934/8fd163f4-d2f6-4179-2c6c-88c4be4dd11b.png)
![netlify-form-05.png](https://qiita-image-store.s3.amazonaws.com/0/141934/d960e571-cecc-d0c3-fcad-a55629511da6.png)

# 4. 投稿内容の確認

投稿内容はNetlifyの管理コンソールで確認することが可能です。

![netlify-form-10.png](https://qiita-image-store.s3.amazonaws.com/0/141934/1785c676-0c18-9775-5dec-a068d5884058.png)
![netlify-form-11.png](https://qiita-image-store.s3.amazonaws.com/0/141934/997cbf99-ca5f-06b7-99a4-faac1503cead.png)

# 5. 投稿内容の通知

投稿があったときにSlack, Webhook, メール宛に通知を出すことができます。
メールに通知を出す場合は以下のように設定を行います。

![netlify-form-20.png](https://qiita-image-store.s3.amazonaws.com/0/141934/9f466a2d-1154-e715-e753-54a68435f228.png)
![netlify-form-21.png](https://qiita-image-store.s3.amazonaws.com/0/141934/ac37b5bb-9152-f80e-b11f-2818f459aba2.png)
![netlify-form-22.png](https://qiita-image-store.s3.amazonaws.com/0/141934/f4a3e20d-7282-7cf0-c39c-62948b34ab32.png)

メール通知を設定している場合、新規投稿があるとメールに投稿内容が通知されます。

![netlify-form-23.png](https://qiita-image-store.s3.amazonaws.com/0/141934/7a1d2a20-e3a9-2db6-b05d-4e1ac6cbbd85.png)

# 6. 投稿完了ページ

デフォルトでは投稿完了後に**Thank You!**ページが表示されるようになっていますが、
`form`タグの`action`でHTMLを指定することで、投稿完了に指定したHTMLへ遷移させることができます。

> **action**で指定するパスは`/`で開始される必要があります

```html:form.html

 <form name="contact" method="POST" action="/success.html" netlify>
    <!-- 省略 -->
  </form>
```

![netlify-form-02.png](https://qiita-image-store.s3.amazonaws.com/0/141934/64da50ca-830a-48c4-5e08-f60cc2cee43c.png)
![netlify-form-04.png](https://qiita-image-store.s3.amazonaws.com/0/141934/8fd163f4-d2f6-4179-2c6c-88c4be4dd11b.png)
![netlify-form-30.png](https://qiita-image-store.s3.amazonaws.com/0/141934/6a5e5fa0-6b06-5d70-2cc4-9c979a32b6ab.png)


# 7. ファイルの投稿

フォーム内に`type=file`が指定された`<input>`タグを追加することでファイルが投稿可能になります。
投稿されたファイルには管理コンソールや通知内のURLからアクセスすることで取得できます。

```html:form.html

 <form name="contact" method="POST" netlify>
    <!-- 省略 -->
      <label>File: <input type="file" name="file" /></label>
    <!-- 省略 -->
  </form>
```

![netlify-form-40.png](https://qiita-image-store.s3.amazonaws.com/0/141934/ec5bbb59-025d-53ae-1a0d-006ef2ddb7ba.png)
![netlify-form-41.png](https://qiita-image-store.s3.amazonaws.com/0/141934/779f2942-e530-70f4-bbfd-decdcf39694e.png)
![netlify-form-42.png](https://qiita-image-store.s3.amazonaws.com/0/141934/f72c4771-5eda-94c2-fff0-d4a041b48016.png)