最近は 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 アプリへ簡単に実装可能です。
送信後のアクションの設定例
{
"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 等を実装する方法が良いかなと思いました。