無料から使えるフォームサービスまとめ

最近は JAMStack な静的ウェブサイトを作る機会が増えて来ました。
そんな中、悩んでしまう「フォーム」の実装。

Google Form や iframe を使ったサービスもありますが、デザインを考慮すると、POST エンドポイントが使えるサービスを選びたいところです。

今回は、無料から使えて HTML がカスタマイズ可能なフォームサービスを調べてみました。

## Getform
https://getform.io/

| 月額    | 送信件数 / 月 |
|:------:|:-:|
| Free   | 50 |
| 9 USD  | 1,000 |
| 39 USD | 10,000 |

※年間割引あり

フリープランの場合、[ホストされた Thank you ページ](https://getform.io/thank-you)へリダイレクトされます。
有料プランは Thank you ページのリダイレクト URL を設定可能。

`Gatsby` `Hugo` `Nuxt` 等、さまざまなプラットフォームに対応した実装ガイドが公開されています。
https://getform.io/installations

## Formspree
https://formspree.io/

| 月額    | 送信件数 / 月 |
|:------:|:-:|
| Free   | 50 |
| 12 USD  | 1,000 |
| 48 USD | 5,000 |

※年間割引あり

有料プランは Thank you ページのリダイレクト URL を設定可能。
React 用のライブラリ `@formspree/react` が公開されていて、React アプリへ簡単に実装可能です。

__送信後のアクションの設定例__

``` formspree.json
{
  "forms": {
    "contactForm": {
      "name": "Contact Form",
      "actions": [{ "type": "email", "to": "{your-email-address}" }]
    }
  }
}
```

__フォームの実装例__

```jsx
import React from 'react';
import { useForm, ValidationError } from '@formspree/react';

function ContactForm() {
  const [state, handleSubmit] = useForm("contactForm");
  if (state.succeeded) {
      return <p>Thanks for joining!</p>;
  }
  return (
      <form onSubmit={handleSubmit}>
      <label htmlFor="email">
        Email Address
      </label>
      <input
        id="email"
        type="email" 
        name="email"
      />
      <ValidationError 
        prefix="Email" 
        field="email"
        errors={state.errors}
      />
      <textarea
        id="message"
        name="message"
      />
      <ValidationError 
        prefix="Message" 
        field="message"
        errors={state.errors}
      />
      <button type="submit" disabled={state.submitting}>
        Submit
      </button>
    </form>
  );
}
export default ContactForm;
```

## Netlify Forms

https://www.netlify.com/products/forms/

| 月額    | 送信件数 / 月 | |
|:------:|:-:|:-:|
| Free   | 100 | |
| 19 USD  | 1,000 | 超過分は500件送信毎に 9 USD |

フリープランでも Thank you ページのリダイレクト URL を指定可能。
ウェブサイトを Netlify へデプロイしているなら、選択候補になりそうです。

## Formcake

https://formcake.com/

| 月額    | 送信件数 / 月 |
|:------:|:-:|
| Free   | 100 |
| 9.99 USD  | 1,000 |
| 19.99 USD | 10,000 |

※年間割引あり

フリープランでも Thank you ページのリダイレクト URL を指定可能。

また、フリープランでもハニーポット用のフィールドを指定することができ、このフィールドに入力があった場合はスパムとして扱われ、月間の送信数にはカウントされません。

ハニーポットの例

```html
<input
    type="text"
    name="fc_honeypot"
    style="display: none;"
/>
```

## FormKeep

https://formkeep.com/

| 月額    | 送信件数 / 月 |
|:------:|:-:|
| Free   | 50 |
| 4.99 USD  | 1,000 |
| 19.50 USD | 10,000 |
| 59 USD | 100,000 |

※年間割引あり

フリープランでも Thank you ページのリダイレクト URL を指定可能。
オンラインのフォームビルダーでスタイリング可能で、HTML を出力してくれます。

## Static Forms

https://www.staticforms.xyz/

基本制限無しの無料サービスです。
Thank you ページのリダイレクト URL を指定可能。
（もしこのサービスが役に立ったら、buymeacoffee で作者をサポートしましょう。）

不正利用があればブロックされるようです。
個人開発（？）のようなので、商用利用には向かないと思います。

## フォームメーラー

https://www.form-mailer.jp/

| 月額    | 送信件数 / 時間 |
|:------:|:-:|
| Free   | 50 |
| 1,250 円  | 100〜300 |

日本のサービスを探したところ、こちらがヒットしました。
フォーム送信前の確認画面や自動返信メールといった、日本特有のケースに対応しています。
確認画面、Thank you ページはホストされたページにリダイレクトされ、無料版では、送信完了時に広告が表示されます。
送信可能な件数が月間ではなく1時間あたりな点、他のサービスに比べてお得感があります。

## まとめ

以上、7つのサービスを紹介しました。
思っていたよりたくさんサービスがある印象を受けました。

各サービスの有料版には、外部サービスと連携できたり、API で投稿データを取得したり等、便利な機能が用意されているので、いつか使ってみたいです。

フリーで賄えす、どうしても安く抑えたい場合は、自分で AWS Lambda + SES 等を実装する方法が良いかなと思いました。