簡単設置スマホ対応レスポンシブ メールフォームの無料ダウンロード

公開日

2014年3月28日

最終更新日

2022年6月26日

著者

Motohiro Tani

とても簡単に設置できるメールフォーム(Responsive Mailform)を無料でダウンロードできます。
制作する上での基本思想は、

1. 入力する人がストレスを感じることなく快適に入力～送信までできること。
2. なるべく簡単に設置でき、正常にメール送信がされること。(標準状態で)
3. 既存のページに組み込みやすいこと。
4. デザインの変更などがしやすいこと。

となっております。上のものほど優先度が高いものになります。
上記1と2を特に重視している関係上でメール本文欄のカスタマイズは難しいかもしれませんが、そのあたりは設置者のスキルやカスタマイズ依頼などでカバーしてください。(宣伝)

現在の最新バージョンは2021年12月3日公開の8.0.1です。
参考ページ：プログラムをアップデートするの際の思想について

各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。

機能や特長

PHPとJavaScript(jQuery)でできており、既存のページにも組み込みやすいようにできています。
主な特徴は以下のとおり。

1. HTMLファイルに組み込める。
2. WordPress内でも使えちゃう。
3. 入力・選択項目を簡単に増やすことが可能。
4. 自動返信メール機能。
5. ページの移動なしで必須項目の入力チェック。
6. 入力必須項目はHTMLファイル内にclass=”required”を追加するだけでOK。
7. ふりがな自動入力機能。
8. 郵便番号から住所を自動入力してくれる機能。
9. 日時指定には入力補助のためにカレンダー表示。
10. 送信決定時にはアラートウインドウで誤送信を防止。
11. フォーム送信後にブラウザの「戻る」や「進む」ボタンで送信完了後のページとを行き来しても、再送信されない仕様。
12. 美しいHTMLとCSS。W3C準拠。HTML5 & CSS3 文法エラーなし。
13. デザインはすべてCSSで設定。自由に変更可能。
14. 著作権表示不要。
15. カスタマイズ自由。
16. レスポンシブでスマホやタブレットに対応。
17. リファラ(ドメイン)チェックによるスパム対策機能実装。
18. CSRF(クロスサイト・リクエストフォージェリ)対策としてトークン機能実装。
19. 入力エラーがあった場合にはその項目まで自動でスクロールして戻る機能。
20. 送信者のIPアドレスとホスト名を取得。
21. 送信者のブラウザ、メールフォームのURL、メールフォームに付く前のURLを取得。
22. 送信する前に入力内容を確認する画面をアドオンで追加可能。
    入力内容確認アドオンについての詳細はこちら。
23. 添付ファイル機能をアドオンで追加可能
    添付ファイル機能アドオンについての詳細はこちら。
24. CcやBccを設定できる機能をアドオンで追加可能。
    カーボンコピー(Cc・Bcc)アドオンについての詳細はこちら。
25. フォーム入力者に届く自動返信メールの冒頭に、入力された名前と会社名を表示できる機能をアドオンで追加可能。
    自動返信メール宛名アドオンについての詳細はこちら。
26. 指定したIPや禁止ワードを含んだ送信を拒否できる機能をアドオンで追加可能。
    IP・ワードブロックアドオンについての詳細はこちら。
27. CSVファイルとして記録できる機能をアドオンで追加可能。
    CSV記録アドオンについての詳細はこちら。
28. 本文(textarea)の入力にかかった時間を計測する機能をアドオンで追加可能。
    書き込み時間計測アドオンについての詳細はこちら。
29. 「規約に同意する」のチェックボックスを追加する機能をアドオンで追加可能。
    規約同意アドオンについての詳細はこちら。
30. エラーメッセージ表示時や入力内容確認ウインドウ表示時(アドオン使用時)のスクロール量を自由に設定できるアドオンを追加可能。
    スクロール量設定アドオンについての詳細はこちら。
31. 必須や任意の文字列を自由に変更できるアドオンを追加可能。
    ラベル文字設定アドオンについての詳細はこちら。

サンプルデモとダウンロード

レスポンシブ メールフォームのサンプル
これはサンプルなので自由に送信しても問題ありません。送信完了ページや自動返信メールの書式の確認などにどうぞ。
これに限らず当サイトにあるサンプルデモはすべて、入力したメールアドレスは収集しておりませんので、迷惑メールが来る原因にはなりません。

レスポンシブ メールフォームのダウンロード
最新バージョン(8.0.1)がダウンロードできます。
過去バージョン(7.0～7.2.1)をお求めの方は、このページ最下部の「アップデート履歴」からダウンロードできます。

動作環境

PHPバージョン5.6以降を推奨。
このサイト上にあるサンプルデモはPHP8世代で稼働しています。

推奨ブラウザはChrome、Safari、Firefox、Edgeです。
これは各ブラウザのシェア率で決めています。

IE(Internet Explorer)でもだいたい動作すると思いますが、IEは2020年6月時点ではすでに終了しているブラウザなので、もし正常動作しなかったとしてもサポート外になります。
ですので、もしIEで何らかの不具合があり、それを正常動作させるためのカスタマイズは有償対応となります。

理由や詳細については「プログラムのIE(Internet Explorer)への対応について」をご覧ください。

使い方の説明(基本設置方法)

メールフォームを設置する人が最低限設定する必要があるファイルはconfig.phpの1ファイルだけとなります。

0、当然ですが、PHPが動くサーバーが必須です。
PHPが動くサーバであるか確認しましょう。
サーバ側の設定でWAF設定がオンになっていたりすると、動作できませんのでご注意ください。(ロリポップは特に注意)

1、レスポンシブ メールフォームをダウンロードし、解凍する。
「解凍」と言う人は古いそうです。
ナウい言い方だと「展開」です。

2、フォルダごとアップロードする。
mailform-v(ここにバージョン番号)のフォルダの名称は自由に変更しても動作に問題ありません。
その中にあるaddonやcss、phpなどのフォルダ名は変更不可です。
初期状態のように各フォルダを並列にそのまま設置してください。

3、config.phpファイルの8行目で自分のメールアドレスを記入する。

//【必須】 自分のメールアドレスの設定 -- 複数のメールアドレスに送信したい場合は、以下の行をコピーして増やしていけばOKです。いくつでも追加可能。 --
$rm_send_address[] = 'aaa@example.co.jp';

以上です。
設置方法の詳細は以下のページをご覧ください。

1. レスポンシブ メールフォームの正しい設置手順
2. メールフォームでメールが届かない時にチェックすべきポイント

既存のページに組み込む場合

以下の作業では相対URLではなく絶対URLにしておくとわかりやすいかもしれません。

7、config.phpの16行目にある「サンクスページのURL」を、フォームを設置するページからのディレクトリに合わせて変更する。

//【必須】 サンクスページのURL -- index.htmlからの相対パス、またはhttp://からの絶対パス --
$rm_thanks_page_url = 'ここを変更';

8、index.htmlからリンクしているcssファイルやJavaScriptファイルのパスを設置するディレクトリに合わせて変更する。

<link rel="stylesheet" href="ここを変更/css/reset.css" />
<link rel="stylesheet" href="ここを変更/css/mailform.css" />
<link rel="stylesheet" href="ここを変更/css/jquery.datetimepicker.css" />

<script src="ここを変更/js/mailform-js.php"></script>
<script src="ここを変更/js/jquery.autoKana.js"></script>
<script src="ここを変更/js/ajaxzip3.js"></script>
<script src="ここを変更/js/jquery.datetimepicker.js"></script>

9、index.html内のform要素のaction属性値を設置するディレクトリに合わせて変更する。

<form action="ここを変更">

以上です。
送信テストをしてみましょう。
既存サイトへの組み込みに関する詳細は以下のページも参考にできます。

1. 既存サイトにメールフォームを組み込み設置する際のディレクトリ構成例と作業手順
2. 通常版メールフォームをWordPressサイトに設置する手順
3. メールフォームを一つのサイト内に複数設置したい場合の設置例

使用している外部ライブラリ

jQuery：jquery.min.js
https://jquery.com/

ふりがな自動入力：jquery.autoKana.js
https://github.com/harisenbon/autokana

郵便番号から住所自動入力：ajaxzip3.js
https://github.com/ajaxzip3/ajaxzip3.github.io

日時選択カレンダー：jquery.datetimepicker.js
http://xdsoft.net/jqplugins/datetimepicker/

それ以外のファイルは私が制作しています。各ファイルの関連性を示した相関図はこちら。

ちなみに、上記の外部ライブラリはあくまでもフォーム入力者の負担軽減のために組み込んでいるだけなので、なくてもメールフォームの動作上は問題ありません。(jquery.min.jsだけは必須です)
不要な場合は各ファイルを削除してもOKとなります。

注意点

アップデートについて

このメールフォームプログラムは新バージョンを制作する際、過去バージョンとの互換性は考慮していません。

その理由としては、過去バージョンとの互換性を維持しようとすると、それだけコードの量も増えてしまうからという理由からです。
コードの量が増えるということは、それだけ想定外のバグ(不具合)が発生する可能性も上がりますし、そのバグチェックだけで相当な労力を割かねばならなくなってしまうからです。(アップデート作業をする気が起きなくなります)

ですので、すでに設置してある過去バージョンを新バージョンに変更したい場合は、すべてのファイルを差し替える前提でお願いいたします。

新バージョンの開発の際には、プログラムの完成度を高めるためならJavaScriptファイルやPHPファイルだけでなく、場合によってはHTMLファイルのほうまで変更が行われることもあります。
極端な話、すべて白紙の状態から作り直す可能性もあります。

サポートに関して

「レスポンシブ メールフォームの正しい設置手順」のページを参考にして設置すると、上手くいく可能性が高まるでしょう。
また、基本的なカスタマイズに関しては以下のページで解説しています。

1. お問い合わせを最大限に増やすためのフォーム設置の方法
2. レスポンシブ メールフォームのカスタマイズ方法や詳細な解説
3. メールフォームのデザイン変更やサイト組み込みの際のサイズの説明
4. メールフォームを既存サイトに組み込んだ時に罫線が離れてしまう場合の解決方法
5. メールフォームのスパム対策機能の解説

有償メールサポートや設置代行サービスなどについて

無償サポートの範囲外に関するものは、有償メールサポートや設置代行サービスがありますので、お問い合わせページからご相談ください。

設置の代行は10,000円(1つにつき・税抜)でお引き受けしています。
1つのサイトに複数まとめて設置をご依頼の場合は、2つ目以降は割引いたします。

制作者である私自身の手によって、100％確実に正常動作する状態で納品しますので、お急ぎの方にはおすすめです。
設置代行サービスについて

カスタマイズの依頼に関しては求める仕様によって料金が変わります。お問い合わせページからご相談ください。

追加アドオン(追加機能)について

このメールフォームに限らず、当サイトで配布・販売しているプログラムはすべて、

• 簡単に設置できる。(設定すべき項目が少ない)
• スパムメールが来ない。
• 常に安定して動作する。(不具合がない)

といった面を特に重視して開発しているので、あってもなくてもどっちでもいい機能は「アドオン」という形で後から追加できるようにしています。
不要な機能を入れなければコード量が少なくなるので、そのぶん動作は軽く、不具合が起きる可能性も減り、設定すべき項目も減るというメリットがあります。

アドオンを追加することで、以下の機能を使用することができるようになります。
必要な方は導入をご検討ください。
すべて併用することが可能ですので、必要な機能だけを組み合わせて使うことができます。

【送信前に入力内容を表示するアドオン】

フォーム送信前に入力内容の確認画面を表示させることができるようになります。

【添付ファイル機能アドオン】

画像ファイルやWord、Excelファイルなどを添付できるようになります。

【カーボンコピー(Cc・Bcc)アドオン】

CCやBCCの設定ができるようになります。

【自動返信メール宛名アドオン】

自動返信メールの冒頭に「●●様」や「●●●(会社名)」が自動的に表示されるようになります。

【IP・ワードブロックアドオン】

IPアドレスや禁止ワードによる拒否設定をすることができます。

【CSV記録アドオン】

メールフォームから送信された内容を自動的にCSVファイルに記録できるようになります。

【書き込み時間計測アドオン (無料)】

本文欄(textarea)の入力にかかった時間を計測し、その秒数が管理者に届くメール内に記載されるようになります。

【規約同意アドオン (無料)】

「規約に同意する」のチェックボックスを追加し、それにチェックを入れないと送信できなくなります。

【スクロール量設定アドオン (無料)】

エラーメッセージ表示時や入力内容確認ウインドウ表示時(アドオン使用時)のスクロール量を自由に設定できます。

【ラベル文字設定アドオン (無料)】

必須や任意の文字列を自由に変更できます。

レスポンシブ・メールフォームのアドオン互換表

※ 上記表は横スクロールできます。
※ バージョンが少しズレていても正常に動作する場合もありますが、上記表の通りの組み合わせなら間違いがありません。

アップデート履歴

2014/03/28　バージョン1.0

• 公開

2015/04/27　バージョン1.1

• レスポンシブでスマホやタブレットに対応。

2015/06/09　バージョン1.2

• 半角カナを入力した際に文字化けする問題を修正。

2015/06/10　バージョン1.3

• ご希望の日時・ご希望の商品の選択肢を追加。
• HTML出力するわけでもないのに無意味に存在していたhtmlspecialchars処理を削除。
• 半角や全角の変換処理を少し追加。
• 郵便番号から住所自動入力ライブラリがGoogle CodeからGithubに移行したことで機能しなくなっていた問題を修正。

2015/11/27　バージョン1.3.1

• 送信者に届く自動返信メールのFromが送信者自身のメールアドレスになってしまう不具合を修正。
• 適当に管理していたバージョン記述を統一。

2016/2/17　バージョン2.0

• すべてのファイル内容を見直し、最適化。
• 不要な画像を削除。使用しているのはページ全体の背景画像のみです。
• リファラチェックによるスパム対策機能追加。
• 入力エラーがあった場合にエラーの箇所までスクロールして戻る機能追加。
• HTML側で各項目名を変更した場合に、エラー表示の項目名も自動でそれに合わせる機能追加。
• class=”required”のある・なしで必須と任意を判別してラベルを自動表示する機能追加。
• チェックボックスとラジオボタンの項目を自由に増やせるようにJavaScriptを修正。
• 詳細な解説ページを公開。

2016/3/31　バージョン2.1

• JavaScriptの最適化。
• 自動返信メールのオン・オフ設定の追加。
• configファイルを2つに分けることでmailform.phpファイルを編集する必要をなくしました。
• フォーム入力中にEnterキーを押した際に送信確認ダイアログが出てこないように修正。
• 送信者のIPアドレスとホスト名を取得できる機能の追加。

2016/4/4　バージョン2.2

• 小さな不具合修正。
• 送信者のブラウザ、メールフォームのURL、メールフォームに付く前のURLを取得できる機能の追加。
• 送信前の入力チェックが動作していない場合に送信されない機能追加。(スパム対策) →解説ページはこちら
• フリガナ自動入力ライブラリの変更。(既知の問題点1)

2016/7/6　バージョン2.3

• 既知の問題点3の「$_SERVER[‘REMOTE_HOST’]が使えないサーバーの場合、エラーが発生する」を修正しました。
• mailform.cssの小さな修正。
• 「必須や任意のラベルの削除方法」や「各項目名の下にある英語表記の削除方法」の解説をメールフォームのデザイン変更やサイト組み込みの際のサイズの説明のページに追加。

2016/10/21　バージョン3.0

• 自分や相手に送るメールの題名をconfigファイルで設定できるようになりました。
• お問い合わせ本文欄の入力時間を計測する機能を追加。
• メールフォーム本体のPHPファイルをカプセル化しました。
• jQueryのコンフリクトに対処しました。

2016/12/21　バージョン3.1

• スマホ表示の際に文字が小さかったので、少し大きくしました。
• HTML側で不要な項目を削除した際、双方に送信されるメール内からその項目名が自動的に削除されるようになりました。
• HTML側で各項目名を変更した際、双方に送信されるメール内の項目名も自動的に変更されるようになりました。
• 自分と相手の双方に届くメールの本文の編集が以前のようにわかりやすくなりました。
• 自分と相手の双方に届くメールが少し見やすくなりました。
• PHPとJavaScriptのコードをWordPressのコーディング規約にある程度準拠させました。
• 軽微な不具合修正。

2016/12/30　バージョン3.1.1

• 設置する人がカスタマイズしやすいようにJavaScriptを少し修正。
• 軽微な不具合修正。

2017/1/6　バージョン3.1.2

• 設置する人がカスタマイズしやすいよう、初期状態でそれぞれ2つの欄が用意されている「名前」や「ふりがな」・「住所」の欄を1つにしても正常に動作するようにしました。
• 軽微な不具合修正。

2017/1/12　バージョン3.2

• メールに記載される各項目の順序が、HTMLファイル側の項目と同じ順序に自動的になるようになりました。
• 設置する人がカスタマイズしやすいよう、送信ボタンをdl要素からp要素に変更しました。
• 軽微な不具合修正。

2017/2/10　バージョン3.3

• JavaScriptとPHPファイルの最適化。
• 軽微な不具合修正。

2017/3/8　バージョン4.0

• 送信前に入力内容を確認できる画面を有料アドオンで追加可能。(標準装備のアラートウインドウ方式と選択できるようになります)
• 会社名の項目を標準で追加。
• Body要素の背景画像を変更。
• jQueryの読み込みをGoogle APIに変更。
• 送信完了後にブラウザの「戻る」ボタンや「進む」ボタンによって再びサンクスページにアクセスしても不具合が起きないように修正。
• JavaScriptやPHPファイルの最適化やバグ修正など。

2017/3/24　バージョン4.1

• JavaScriptやPHPファイルの最適化やバグ修正など。

2017/3/30　バージョン4.1.1

• ラジオボタンやチェックボックスのような選択型の項目が必須となっている時に、チェックされていないと「入力されていません」と表示されるバグを修正。
  「選択されていません」と表示されるように直しました。

2017/4/1　バージョン4.1.2

• 他のライブラリとコンフリクトが発生しないよう、JavaScriptのバグ修正。

2017/4/11　バージョン5.0

• 項目の追加が簡単にできるようにようやく修正。
• 項目名の部分にあるspan要素(英語表記の部分)を削除できるようになりました。
• 今後の拡張性を考え、PHPの派生クラスの使用を廃止。include式に戻しました。
• 必須のセレクトボックスが選択されていない場合に「入力されていません」と表示されるバグを修正。

2017/4/18　バージョン5.1

• 1つのdd要素内に1行テキストボックス(input type=”text”)がいくつあっても正常に動作するようにしました。
• 添付ファイル機能をアドオンとして追加することができるようになりました。

2017/5/22　バージョン5.1.1

• config.php内の「自分のメールアドレスの設定」に複数のメールアドレスを入力した場合に、サーバによってはエラーが発生する問題を修正。
• サポートBBSを設置。
• リファラやホスト名・IPアドレスはプレーンテキスト出力しかしないので特に問題はないと思いますが、念のためにサニタイズ処理を追加。

2017/7/4　バージョン5.2

• デザインを本気で綺麗に整えました。
• プログラムファイルの軽微な修正。

2017/7/25　バージョン5.3

• CcやBccを設定できる「カーボンコピーアドオン」を追加できるようになりました。。

2017/8/28　バージョン5.4

• 双方に届くメール本文から確認用メールアドレスを削除。
• 自動返信メールを送るアドレスは、id属性値がmail_addressの欄に入力されたものに固定するように修正。
• 日時選択カレンダーの表示を日本語に変更。
• 日時表示を日本時刻に明示的に固定。
• 送信前の入力チェック機能をデフォルトで有効に。詳細はスパム対策機能の解説ページをご覧ください。
• メールヘッダインジェクション対策をわずかに追加。
• 軽微なバグ修正。

2017/12/14　バージョン6.0

• config.php内にある「自分のメールアドレスの設定」の方式を多段行に変更。
• 住所の入力欄を1つに変更。
• IP・ワードブロックアドオンを追加。
• 自動返信メール宛名アドオンを追加。
• CSV記録アドオンを追加。
• その他、細かな修正など。

2018/04/12　バージョン6.1

• 添付ファイルアドオンのアップデートに対応するために修正。
• CSRF(クロスサイト・リクエストフォージェリ)対策としてトークンアドオンを追加。
• その他、細かな修正。

2018/05/15　バージョン6.1.1

• トークンアドオン公開のための微調整。

2018/06/09　バージョン6.2

• iOS 11.3のSafariの不具合に対応しました。(添付ファイルアドオンを使用時にのみ発生するバグ)
• 必須設定の際のdd要素にrequired以外のクラス名が同時に存在していても正常に動作するようになりました。(例: <dd class=”required testname”>)

2018/08/13　バージョン7.0

• 添付ファイルアドオンのアップデートに対応させるためのアップデート。
• import.cssを省きました。
• style.cssでの文字サイズ設定を少しだけ大きくしました。
• バージョン7.0のダウンロード

2019/01/17　バージョン7.1

• 本文の入力時間を計測する機能を削除し、アドオン化。(書き込み時間計測アドオンについて)
• 書き込み時間計測アドオンを追加。
• 規約同意アドオンを追加。
• タブレットで拡大されて表示されるのを防ぐため、レスポンシブのブレイクポイントを640pxから1000pxに変更。
• バージョン7.1のダウンロード

2019/09/26　バージョン7.2

• 既存サイトに組み込む際には不要になるため、背景画像を削除。(imageフォルダもなくなりました)
• 既存サイトに組み込む際には不要になるのでstyle.cssを削除し、サンプルページ用のCSSはHTML内にインライン化しました。
• 既存サイトに組み込む際に競合するため、CSSでのフォント指定(font-family)を削除。
• textareaのname属性から「mail」という単語を削除。
• テキストエリアの文章が200文字以上改行がない場合、メール送信時の文字化けを防ぐために自動的に改行を挿入。
• メール本文に記載される文章にはhtmlspecialchars関数をしないように修正。
• 細かなデザイン修正。

2019/10/03　バージョン7.2.1

• バージョン7.2では不必要な箇所で改行されるようなので、テキストエリアに自動的に改行を挿入する処理を削除。
  バージョン7.2からアップデートするためには php/class.mailform.php だけを上書きアップロードすればOKです。
• バージョン7.2.1のダウンロード

2021/09/21　バージョン8.0

• 必須・任意のラベルの位置を変更しやすいように修正。
• 必須・任意のラベルの文字列を簡単に変更できるように「ラベル文字設定アドオン」を追加。
• エラーメッセージ表示時や確認画面表示時(入力内容確認アドオン)のスクロール量を自由に設定できるように「スクロール量設定アドオン」を追加。
• CSSで様々なデザインに調整しやすいよう、各項目(dt,dd)をすべてそれぞれdlで分離しました。
• 各項目名の下にある英語表記を削除しました。
• デザインの細かな調整。
• プログラムの動作に関係のないid属性やclass属性を削除したことにより、フォームのHTMLがスッキリしました。
• 送信されるメールの文字コードをUTF-8に変更。
• リファラチェック機能を標準でONにし、config.phpから削除。
• トークンアドオンで提供していた機能を標準で組み込み。
• カスペルスキー拡張機能を使用しているユーザーにのみ発生する不具合に対応。
• その他、軽微なバグ修正。
• メールの送信先が存在しないなどのエラーが発生した場合に、エラーメールを受信できるようにReturn-Pathを設定。

2021/12/03　バージョン8.0.1

• フォームが存在しないページでメールフォーム関連のJSを読み込んでもエラーが出ないように修正。
• 不要なCSSコードの削除。