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

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

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

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

Getform

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

※年間割引あり

フリープランの場合、ホストされた Thank you ページへリダイレクトされます。
有料プランは Thank you ページのリダイレクト URL を設定可能。

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

Formspree

月額	送信件数 / 月
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}" }]
    }
  }
}

フォームの実装例

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

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

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

Formcake

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

※年間割引あり

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

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

ハニーポットの例

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

FormKeep

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

※年間割引あり

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

Static Forms

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

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

フォームメーラー

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

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

まとめ

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

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

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