普段WordPressに慣れていると、「HTMLサイトでお問い合わせフォームも入れてほしい」と言われた時にだいぶ困ります。
「あれ、プラグイン使わずにどうやって作るんだ?」的な。
でも、大丈夫!
インターネット上には、「お問い合わせフォーム作れないよぉ」っていうわたしたちのために、静的サイトで使える「お問い合わせフォーム」のテンプレートを用意して無料で提供してくれているのです!!!
(なんて、優しい世界なんだ・・・)
有料提供のものもありますが、今回は無料で使えるものに限って7つ紹介します。好みの問題だったりするので、ご自身に合いそうなものを選ぶといいでしょう。
WordPressと同様にPHP言語で作られたものに絞って選びました。
※ 無料なので当然ながら運営からのサポートはありません。サイトに導入する際は必ずご自身の責任のもとお願いいたします。
使いやすそうなテンプレートを1つ手元に持っておくと楽かもしれません
「無料」かつ「著作者表記なし」で使えるお問い合わせフォーム
クレジット表記なし(著作者へのリンクなし)で使える無料のお問い合わせフォームです。
おすすめの3つを一覧でまとめました。フォームに必要な機能に応じて選ぶといいかと思います。
MailForm01 | Responsive Mailform | TransmitMail | |
---|---|---|---|
確認画面 | あり | なし | あり |
完了画面 | あり | あり | あり |
JavaScriptの使用 | なし | あり | なし |
自動返信 | あり | あり | あり |
バリデート | あり (バックエンドでチェック) | あり (フロントエンドでチェック) | あり (バックエンドでチェック) |
メールアドレス二重チェック | なし | あり | なし |
CAPTCHA対応 | なし | なし | あり |
IPアドレス取得 | あり | あり | あり |
ファイル添付 | 不可 | 不可 | 可能 |
ライセンス | 記載なし | 記載なし | MIT license |
MailForm01
おそらく一番運用期間が長くて、元祖メールフィームテンプレートと言えるのが、「MailForm01」だと思います。
わたしもよく使わせていただきました。ファイルが2つしかなく設定がめちゃくちゃ簡単です。ただ、画面はリッチではないので、表側はHTMLを組み替えたりCSSでデザインしたりする必要があります。
入力に誤りがあった際に次の画面に遷移してしまうのが唯一の不満点です・・・。
Responsive Mailform
無料とは思えないリッチ感。HTMLが触れないレベルのノンプログラマーでも容易に導入できるのが「Responsive Mailform」です。
サイトのデザインにも寄りますが、設置するだけで十分なデザインが適応されています。とにかくユーザーがストレスなく使えること(流行りの言葉で言うとUXですかね)を大事にした設計がなされているので、今のWebサイトにとてもマッチします。
確認画面がないのが欠点かもしれません。(5,000円の有料アドオンとして拡張は可能)
また、他のメールフォームに比べてjQueryがゴリゴリ使われています。jQueryに抵抗のある方は別のフォームテンプレートを選ぶといいかと思います。
個人的に一番好きなメールフォームです。
→ Responsive Mailformのダウンロードページ
「Responsive Mailform」については、こちらで詳しく使い方を解説もしています!
https://haniwaman.com/responsive-mailform/
TransmitMail
TransmitMailはCAPTCHA対応であったりファイル添付ができるメールフォームです。Githubで管理されており、エンジニアが作ったって感じの雰囲気があります。
他のメールフォームに比べつと少しだけ設定やカスタマイズが難しい印象です。
お問い合わせフォームとして必要な機能は揃っているので、カスタマイズ次第で問題なく使えるはずです。
無料だけど著作者表記が必要なお問い合わせフォーム
「無料」ですが、設置ページでクレジット表示が必要というフォームテンプレートです。
Microengine
Microengineを無料で使う場合は著作権表記が必要になります。
著作権者表示(バックリンク:Powered by MicroEngine)を表示して無料(フリー)で利用できます。
著作権表記を削除して使いたい場合は、「10,800円(税込み)」で購入する必要があります。他にメリットの記載がないのですが、おそらくサポートなども受けられるのかと・・・(憶測なので保証はありません!)
JB問い合わせフォーム
JB問い合わせフォームを無料で使用する条件としては、著作者表示を維持することとなっております。
「9,000円(税抜き)」のライセンス契約によって著作者表示の削除が可能になります。JavaScriptを使用したバリデーションチェックとシンプルな設計なのでカスタマイズが容易に行える特徴があります。
無料使用: 著作者表示を維持していただくと、無料で使用できます (第3条)。
ライセンスをご購入いただくと、著作者表示をかくすことができます。
ZeroMail
著作権表記は消してもいいが、タグ自体を消すのはNGとのことです。CSSのdisplay:none;
などで消すことは許容されています。
ZeroMailは、元祖Ajax対応のお問い合わせフォームということで大変ありがたいだったのですが、2010年からサポートが終了しています…。
2018年現在、自分の環境で動作はしたので、使うこと自体は可能です。
その他のお問い合わせフォーム
わたしが使いこなせないフォーム・・・。
form-php
form-phpは使い方のページが削除されているようで、ソースを理解している人しか使えないかと思います。
(わたしは使いこなせませんでした。。)
ネット上では使われている声もあるので、PHPがちゃんと読める方は試してみてください!
バリデーションルールを決めれたり、Ajaxにも対応しているのうなので、カスタマイズ性はとても高いと思います。
おわり
静的なHTMLサイトで「無料」で使えるお問い合わせフォームを紹介しました。著作者表記なしで考えたら実質は3つかもしれませんが・・・。
個人的には「Responsive Mailform」の作りがリッチで今のUXに合っていてとても好きです。次点は「TransmitMail」ですね。
著作者表記が必要なものは素直に従いましょう。後からバレたときに迷惑を被るのは納品したクライアントなので(最終的には自身の信用が下がります)
静的HTMLサイトのお問い合わせフォームで悩んだら、今回紹介した7つをぜひ検討してみてください!