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

• 公開日 : 2014年3月28日
• 最終更新日 : 2017年7月25日

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

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

となっております。上のものほど優先度が高いものになります。
上記1と2を特に重視している関係上、入力項目の追加やメール本文欄のカスタマイズは難しいかもしれません。(項目を減らすことは簡単にできるようになっています)
バージョン5.0からはようやく項目を簡単に増やすことが可能になりました。遅えよ。

現在の最新バージョンは2017年7月25日公開の5.3です。
更新履歴はこのページの一番下にあります。

機能や特長

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

1. HTMLファイルに組み込める。
2. WordPress内でも使えちゃう。
   (通常版バージョン3.0以降からは他のスクリプトとの競合が起きにくいようカプセル化したので安定。このサイトのお問い合わせページでは通常版を使用しています)
3. 自動返信メール機能。
   (バージョン2.1からは自動返信をするかどうかの設定ができるようになり、メールアドレス入力欄を任意にすることができるようになりました)
4. ページの移動なしで必須項目の入力チェック。
5. 入力必須項目はHTMLファイル内にclass=”required”を追加するだけでOK。
   (バージョン2.0からクラス名を変更しました)
6. ふりがな自動入力機能。
7. 郵便番号から住所を自動入力機能。
8. 日時指定には入力補助のためにカレンダー表示。(バージョン1.3以降)
9. 送信決定時にはアラートウインドウで誤送信を防止。
10. フォーム送信後にブラウザの「戻る」や「進む」ボタンで送信完了後のページとを行き来しても、再送信されない仕様。
11. 美しいHTML。W3C準拠。HTML5文法エラーなし。
    (CSSに関しては日時選択ライブラリや@keyframesの使用により文法エラーが出ます)
12. デザインはすべてCSSで設定。自由に変更可能。
13. 著作権表示不要。
14. カスタマイズ自由。
15. レスポンシブでスマホやタブレットに対応。(バージョン1.1以降)
16. リファラ(ドメイン)チェックによるスパム対策機能実装。(バージョン2.0以降)
17. 入力エラーがあった場合にはその項目まで自動でスクロールして戻る機能。(バージョン2.0以降)
18. 送信者のIPアドレスとホスト名を取得。(バージョン2.1以降)
19. 送信者のブラウザ、メールフォームのURL、メールフォームに付く前のURLを取得。(バージョン2.2以降)
20. 送信前の入力チェックが動作していない場合に送信されない機能追加(スパム対策)。(バージョン2.2以降)
21. お問い合わせ本文欄の入力時間を計測する機能。(バージョン3.0以降)
22. 送信する前に入力内容を確認する画面をアドオンで追加可能。
    標準装備のアラートウインドウ方式と選択できるようになります。(バージョン4.0以降)
    入力内容確認アドオンについての詳細はこちら。
23. 項目を増やすことが可能になりました。(バージョン5.0以降)
24. 添付ファイル機能をアドオンで追加可能(バージョン5.1以降)
    添付ファイル機能アドオンについての詳細はこちら。
25. CcやBccを設定できる機能をアドオンで追加可能。(バージョン5.3以降)
    カーボンコピー(Cc・Bcc)アドオンについての詳細はこちら。

サンプルデモ

レスポンシブ メールフォームのサンプル

https://www.1-firststep.com/samplephp/mailform-v5.3/index.html
これはサンプルなので自由に送信しても問題ありません。送信完了ページや自動返信メールの書式の確認などにどうぞ。
入力したメールアドレスは収集しておりませんので、迷惑メールが来る原因にはなりません。

レスポンシブ メールフォームのダウンロード

https://www.1-firststep.com/samplephp/mailform-v5.3/mailform-v5.3.zip

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

メールフォームを設置する人が最低限設定する必要があるファイルはconfig.phpの1ファイルだけとなります。
2016年12月30日追記：「レスポンシブ メールフォームの正しい設置手順」を追加しました。

0、当然ですが、PHPが動くサーバーが必須です。

1、レスポンシブ メールフォームをダウンロードし、解凍する。

2、フォルダごとアップロードする。(フォルダの名称は自由に変更しても動作に問題ありません)

3、config.phpファイルの8行目で自分のメールアドレスを記入する。
以下、ファイル保存の際は必ず文字コード設定を「UTF-8 BOMなし(UTF-8N)」で保存してください。
そのやり方については「文字コードをUTF-8 BOMなし(UTF-8N)でファイル保存をする方法」を参考にしてみてください。

//(必須) 自分のメールアドレスの設定 -- 複数指定したい場合は各アドレスを半角カンマで区切って記述 --
$rm_send_address = 'aaa@example.co.jp';

4、config.phpファイルの15行目でメール送信後に表示されるサンクスページのURLを記入する。

//(必須) サンクスページのURL -- index.htmlからの相対パス、またはhttp://からの絶対パス --
$rm_thanks_page_url = 'thanks.html';

5、config.phpファイルの52行目で、自動返信メールを相手に届けるかどうかの設定をします。

//(任意) 相手に自動返信メールを送るかどうか -- 送らない場合は0、送る場合は1にしてください。 --
$rm_reply_mail = 1;

6、config.phpファイルの58行目で差出人名に表示する自分の名前を記入する。

//(必須) メールの差出人名に表示される自分の名前 -- 相手への自動返信メールに使用されます --
$rm_send_name = 'レスポンシブメールフォーム　差出人';

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

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

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

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

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

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

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

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となります。

既知の問題点

1、(解決済)スマホからの名前入力の際、濁点がふりがな欄に反映されない。

私自身の環境であるiOS6と7、Android6.0で確認しています。おそらくiOS8や9でもそうなのでしょう。

バージョン2.2からフリガナ自動入力ライブラリを変更し、上記の問題は解決されました。
バージョン2.2からはこちらのサイトで提供されているものを使用しています。

2、(解決済)設置するサーバーによってはconfig-2.php内のホスト名取得部分でエラーが発生する。

ホスト名はconfig-2.php内の{$_SERVER[‘REMOTE_HOST’]}という部分で取得していますが、サーバーによってはこれが使用できない場合があり、エラーが発生します。
この問題点は次回アップデートで修正予定です。

バージョン2.3で修正いたしました。

注意点

本プログラムの使用においていかなる損害が発生したとしても、当方は責任を負いません。
了承していただける方のみご利用ください。
著作権は放棄していませんが、著作権表示などは必要ありません。

ダウンロードできるのはこのページだけにしたいため、再配布や無断での販売だけは禁止いたします。
それ以外であれば、カスタマイズして自分のお店サイトやクライアントの企業サイトなどに使用するのも自由です。

設置の代行は10,000円(1つにつき・税込税抜)でお引き受けしています。
制作者である私自身の手によって、100％確実に正常動作する状態で納品しますので、お急ぎの方にはおすすめです。
メールフォームの設置代行サービスについて

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

アップデートについて

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

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

ですので、すでに設置してある過去バージョンを新バージョンに変更したい場合は、すべてのファイルを差し替える前提でお願いいたします。
新バージョンの開発の際には、プログラムの完成度を高めるためならJavaScriptファイルやPHPファイルだけでなく、場合によってはHTMLファイルのほうまで変更が行われることもあります。

「最新のメールフォームが最良のメールフォーム」なのです。(ポルシェ社のキャッチコピーから)

サポートに関して

無料のものですから、基本的にはサポートはありません。
しかし、初期状態での設置に関しては、サポートBBSにて対応しております。

※ 初期状態とは、ダウンロードしたままの状態、またはconfig.phpだけを編集した状態のことを指します。
それ以外のファイルが編集されていたり、既存サイトに組み込んだ場合などのお問い合わせは有償となります。

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

1. レスポンシブ メールフォームのカスタマイズ方法や詳細な解説
2. メールフォームのデザイン変更やサイト組み込みの際のサイズの説明
3. メールフォームのスパム対策機能の解説

ご質問や設置代行依頼はサポートBBS、またはお問い合わせページからご連絡ください。

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

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

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

このメールフォームはアドオンを追加することで、以下の機能を使用することができるようになります。

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

https://www.1-firststep.com/archives/3047

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

https://www.1-firststep.com/archives/2868

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

https://www.1-firststep.com/archives/3628

アドオンは1つのご購入につき、1サイトで使用可能です。
例えば、1つのサイト内にメールフォームを複数設置する場合はアドオンの購入は1つでOKです。
が、複数のサイトにメールフォームを設置する場合は、そのサイトの数だけアドオンをご購入ください。

アップデート履歴

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を設定できる「カーボンコピーアドオン」を追加できるようになりました。。