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

公開日
2014年3月28日
最終更新日
2019年4月26日


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

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

となっております。上のものほど優先度が高いものになります。
上記1と2を特に重視している関係上で、メール本文欄のカスタマイズは難しいかもしれません。

現在の最新バージョンは2019年1月17日公開の7.1です。
各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。

  1. 機能や特長
  2. サンプルデモとダウンロード
  3. 動作環境
  4. 使い方の説明(基本設置方法)
  5. 既存のページに組み込む場合
  6. 使用している外部ライブラリ
  7. 注意点
  8. アップデートについて
  9. サポートに関して
  10. 有償メールサポートや設置代行サービスなどについて
  11. 追加アドオン(追加機能)について
  12. レスポンシブ・メールフォームのアドオン互換表
  13. アップデート履歴

このスクロールリンクは「リンクスクロールスクリプト」を使用して実現しています。
ご自身のサイトにこのようなページ内リンクを設置したい方は自由にご利用ください。

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

  1. HTMLファイルに組み込める。
  2. WordPress内でも使えちゃう。
    (通常版バージョン3.0以降からは他のスクリプトとの競合が起きにくいようカプセル化したので安定。このサイトのお問い合わせページでは通常版を使用しています)
  3. 自動返信メール機能。
  4. ページの移動なしで必須項目の入力チェック。
  5. 入力必須項目はHTMLファイル内にclass=”required”を追加するだけでOK。
  6. ふりがな自動入力機能。
  7. 郵便番号から住所を自動入力機能。
  8. 日時指定には入力補助のためにカレンダー表示。
  9. 送信決定時にはアラートウインドウで誤送信を防止。
  10. フォーム送信後にブラウザの「戻る」や「進む」ボタンで送信完了後のページとを行き来しても、再送信されない仕様。
  11. 美しいHTMLとCSS。W3C準拠。HTML5 & CSS3 文法エラーなし。
  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)アドオンについての詳細はこちら。
  26. フォーム入力者に届く自動返信メールの冒頭に、入力された名前と会社名を表示できる機能をアドオンで追加可能。(バージョン6.0以降)
    自動返信メール宛名アドオンについての詳細はこちら。
  27. 指定したIPや禁止ワードを含んだ送信を拒否できる機能をアドオンで追加可能。(バージョン6.0以降)
    IP・ワードブロックアドオンについての詳細はこちら。
  28. CSVファイルとして記録できる機能をアドオンで追加可能。(バージョン6.0以降)
    CSV記録アドオンについての詳細はこちら。
  29. CSRF(クロスサイト・リクエストフォージェリ)対策としてトークン機能をアドオンで追加可能。(バージョン6.1以降)
    トークンアドオンについての詳細はこちら。
  30. 本文(textarea)の入力にかかった時間を計測する機能をアドオンで追加可能。(バージョン7.1以降)
    書き込み時間計測アドオンについての詳細はこちら。
  31. 「規約に同意する」のチェックボックスを追加する機能をアドオンで追加可能。(バージョン7.1以降)
    規約同意アドオンについての詳細はこちら。

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

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

【過去バージョンを公開している理由】
機能面や完成度は5.2～最新版までほとんど変わっていませんが、アドオン(追加機能)が古いバージョンの場合はメールフォーム本体側も古いバージョンじゃないと正常動作しないケースがあるので、それらのバージョンだけは現在でもダウンロードできるようにしています。

ですので、過去バージョンのアドオンをすでにお持ちの方以外は最新版を使用するほうが無難です。

また、過去にアドオンを購入された方からご要望があれば、新しいバージョンのアドオンファイル一式をお送りいたしますので、お問い合わせページからお求めください。
その際には現在お持ちのアドオンファイル一式をメール添付にて私にお送りいただくことで、過去に購入したことの証明とさせていだきます。

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

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

注意点：以下、ファイル保存の際は必ず文字コード設定を「UTF-8 BOMなし(UTF-8N)」で保存してください。
そのやり方については「文字コードをUTF-8 BOMなし(UTF-8N)でファイル保存をする方法」を参考にしてみてください。

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. 通常版メールフォームをWordPressサイトに設置する手順

以下の作業では相対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/style.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="ここを変更">

以上です。
送信テストをしてみましょう。

コーディング

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ファイルのほうまで変更が行われることもあります。
極端な話、すべて白紙の状態から作り直す可能性もあります。

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

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

しかし例外として、当サイト上で解説されているカスタマイズ方法だけを実践して正常動作しない場合は、無償サポート対象内になります。
その理由は、そのような使い方を想定してプログラムが作られているからです。

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

  1. レスポンシブ メールフォームのカスタマイズ方法や詳細な解説
  2. メールフォームのデザイン変更やサイト組み込みの際のサイズの説明
  3. 通常版のメールフォームをWordPressサイトに設置する手順を解説
  4. メールフォームのスパム対策機能の解説

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

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

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

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

アドオン
このメールフォームは、

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

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

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

【送信前に入力内容を表示するアドオン】
フォーム送信前に入力内容の確認画面を表示させることができるようになります。
https://www.1-firststep.com/archives/3047
【添付ファイル機能アドオン】
画像やWord、Excelファイルなどを添付できるようになります。
https://www.1-firststep.com/archives/2868
【カーボンコピー(Cc・Bcc)アドオン】
CCやBCCの設定ができるようになります。
https://www.1-firststep.com/archives/3628
【自動返信メール宛名アドオン】
自動返信メールの冒頭に「●●様」や「●●●(会社名)」が自動的に表示されるようになります。
https://www.1-firststep.com/archives/4153
【IP・ワードブロックアドオン】
IPアドレスや禁止ワードによる拒否設定をすることができます。
https://www.1-firststep.com/archives/4155
【CSV記録アドオン】
メールフォームから送信された内容を自動的にCSVファイルに記録できるようになります。
https://www.1-firststep.com/archives/4151
【トークンアドオン (無料)】
フォームを送信する際にトークンが追加されるようになり、スパム送信をさらに厳しく防ぎます。
https://www.1-firststep.com/archives/4922
【書き込み時間計測アドオン (無料)】
本文欄(textarea)の入力にかかった時間を計測し、その秒数が管理者に届くメール内に記載されるようになります。
https://www.1-firststep.com/archives/7491
【規約同意アドオン (無料)】
「規約に同意する」のチェックボックスを追加し、それにチェックを入れないと送信できなくなります。
https://www.1-firststep.com/archives/7493
メールフォーム
本体バージョン		 入力内容確認
アドオン		 添付ファイル
アドオン		 カーボンコピー(Cc・Bcc)
アドオン		 自動返信メール宛名
アドオン		 IP・ワードブロック
アドオン		 CSV記録
アドオン		 トークン
アドオン		 書き込み時間計測
アドオン		 規約同意
アドオン
5.0 1.2～1.3 × × × × × × × ×
5.1 1.2～1.3 1.1～1.3 × × × × × × ×
5.1.1 1.2～1.3 1.1～1.3 × × × × × × ×
5.2 1.2～1.3 1.1～1.3 × × × × × × ×
5.3 1.2～1.3 1.1～1.3 1.0 × × × × × ×
5.4 1.2～1.3 1.1～1.3 1.0 × × × × × ×
6.0 2.0～2.1 2.0 2.0～2.1 1.0 1.0～1.1 1.0～1.1 × × ×
6.1 2.0～2.1 2.1 2.0～2.1 1.0 1.0～1.1 1.0～1.1 1.0 × ×
6.1.1 2.0～2.1 2.1 2.0～2.1 1.0 1.0～1.1 1.0～1.1 1.0 × ×
6.2 2.2 2.2～2.3 2.0～2.1 1.0 1.0～1.1 1.0～1.1 1.0 × ×
7.0 3.0 3.0～3.1 2.0～2.1 1.0 1.0～1.1 1.0～1.1 1.0 × ×
7.1 3.1 3.0～3.1 2.0～2.1 1.0 1.0～1.1 1.2 1.0 1.0 1.0

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

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
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
2017/8/28　バージョン5.4
  • 双方に届くメール本文から確認用メールアドレスを削除。
  • 自動返信メールを送るアドレスは、id属性値がmail_addressの欄に入力されたものに固定するように修正。
  • 日時選択カレンダーの表示を日本語に変更。
  • 日時表示を日本時刻に明示的に固定。
  • 送信前の入力チェック機能をデフォルトで有効に。詳細はスパム対策機能の解説ページをご覧ください。
  • メールヘッダインジェクション対策をわずかに追加。
  • 軽微なバグ修正。
  • バージョン5.4のダウンロード
2017/12/14　バージョン6.0
2018/04/12　バージョン6.1
2018/05/15　バージョン6.1.1
2018/06/09　バージョン6.2
  • iOS 11.3のSafariの不具合に対応しました。(添付ファイルアドオンを使用時にのみ発生するバグ)
  • 必須設定の際のdd要素にrequired以外のクラス名が同時に存在していても正常に動作するようになりました。(例: <dd class=”required testname”>)
  • バージョン6.2のダウンロード
2018/08/13　バージョン7.0
  • 添付ファイルアドオンのアップデートに対応させるためのアップデート。
  • import.cssを省きました。
  • style.cssでの文字サイズ設定を少しだけ大きくしました。
  • バージョン7.0のダウンロード
2019/01/17　バージョン7.1

このページと関連しているページ一覧

提供サポートなど