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

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

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

となっております。上のものほど優先度が高いものになります。

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

バージョン1.1からはレスポンシブでスマホ対応させました。(2015年4月27日公開)
それに伴い、Smart Mailform(スマート メールフォーム)だった名称は、Responsive Mailform(レスポンシブ メールフォーム)と変更になりました。
ま、名称なんてどうでもいいんですけどね。

2016年4月19日追記:より設定が簡単なWordPressプラグイン版が公式ディレクトリにて公開されました。
2016年12月27日追記:添付ファイルバージョンを販売しています。

機能やサンプル

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

  1. HTMLファイルに組み込める。
  2. 自動返信メール機能。
    (バージョン2.1からは自動返信をするかどうかの設定ができるようになり、メールアドレス入力欄を任意にすることができるようになりました)
  3. ページ偏移なしで必須項目の入力チェック。
  4. 入力必須項目はHTMLファイル内にclass=”required”を追加するだけでOK。
    (バージョン2.0からクラス名を変更しました)
  5. ふりがな自動入力機能。
  6. 自動で「全角」英数字を「半角」に変換する機能。
  7. 郵便番号から住所を自動入力機能。
  8. 日時指定には入力補助のためにカレンダー表示。(バージョン1.3以降)
  9. 送信決定時にはアラートウインドウで誤送信を防止。
  10. 美しいHTML。W3C準拠。HTML5・CSS3文法エラーなし。
    (バージョン1.3からは日時選択ライブラリの導入によりCSS文法エラーが出るようになりました)
  11. デザインはすべてCSSで設定。自由に変更可能。
  12. 著作権表示不要。
  13. カスタマイズ自由。
  14. レスポンシブでスマホやタブレットに対応。(バージョン1.1以降)
  15. リファラ(ドメイン)チェックによるスパム対策機能実装。(バージョン2.0以降)
  16. 入力エラーがあった場合にはその項目まで自動でスクロールして戻る機能。(バージョン2.0以降)
  17. HTML側で項目名を変更した場合に、エラー表示での項目名も自動でそれに合わせる機能。(バージョン2.0以降)
  18. Enterキーを押したときに送信確認ダイアログが出るのを防止。(バージョン2.1以降)
  19. 送信者のIPアドレスとホスト名を取得。(バージョン2.1以降)
  20. 送信者のブラウザ、メールフォームのURL、メールフォームに付く前のURLを取得。(バージョン2.2以降)
  21. 送信前の入力チェックが動作していない場合に送信されない機能追加(スパム対策)。(バージョン2.2以降)
  22. お問い合わせ本文欄の入力時間を計測する機能。(バージョン3.0以降)
  23. HTML側で不要な項目を削除した場合、双方に送信されるメール内の項目も自動的に削除される機能。(バージョン3.1以降)
  24. HTML側で項目名を変更した場合、双方に送信されるメール内の項目名も自動的に合わせられる機能。(バージョン3.1以降)
  25. HTML側で項目の順序を変更した場合、双方に送信されるメール内の項目順序も自動的に合わせられる機能。(バージョン3.2以降)
レスポンシブ メールフォームのサンプル
https://www.1-firststep.com/samplephp/mailform-v3.2/
レスポンシブ メールフォームのダウンロード
https://www.1-firststep.com/samplephp/mailform-v3.2/mailform-v3.2.zip

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

2016年3月31日公開のバージョン2.1からは設定が必要なconfigファイルが2つになり(config-1.php、config-2.php)、その代わりmailform.phpの編集をする必要はなくなりました。(2つのconfigファイルはphpフォルダに入っています)

2016年10月21日公開のバージョン3.0から再びconfigファイルを1つにまとめました。
メールフォームを設置する人が最低限設定する必要があるファイルは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 -- mailform.phpからの相対パス、または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/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="ここを変更/js/mailform.js"></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="ここを変更">

既知の問題点

1、(解決済)スマホからの名前入力の際、濁点がふりがな欄に反映されない。
私自身の環境であるiOS6と7、Android6.0で確認しています。おそらくiOS8や9でもそうなのでしょう。
バージョン2.2からフリガナ自動入力ライブラリを変更し、上記の問題は解決されました。
バージョン2.2からはこちらのサイトで提供されているものを使用しています。
2、お問い合わせ欄(テキストエリア)に入力した文章で改行が2倍になる。(らしい)
これはユーザーの方から今までに2件報告がありました。
しかし私の環境では症状が再現できないため、原因は今でも不明です。
(ブラウザはChrome・Firefox、メールソフトはThunderbird、サーバーはさくらインターネットとエックスサーバで問題なし)
3、(解決済)設置するサーバーによってはconfig-2.php内のホスト名取得部分でエラーが発生する。
ホスト名はconfig-2.php内の{$_SERVER[‘REMOTE_HOST’]}という部分で取得していますが、サーバーによってはこれが使用できない場合があり、エラーが発生します。
この問題点は次回アップデートで修正予定です。
バージョン2.3で修正いたしました。

注意点

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

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

設置の代行は10,000円(1つにつき・税込税抜)でお引き受けしています。
これは購入時に申し込む必要はありません。
まずはご自身でチャレンジしてみて、どうしようもなくなった時に設置代行を依頼されてもオーケーです。

2016年9月16日追記:メールフォームの設置代行サービスについてのページを追加しました。
2016年12月27日追記:添付ファイルバージョンを販売しています。

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

アップデートについて

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

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

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

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

サポートに関して

(2016年4月5日改定)
無料のものですから、基本的にはサポートはありません。
しかし、初期状態での設置に関しては無料でメールサポートを行っております。
2016年12月30日追記:レスポンシブ メールフォームの正しい設置手順」を追加しました。

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

基本的なカスタマイズに関しては以下のページで解説しています。

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

ご質問や設置代行依頼はお問い合わせページからご連絡ください。
さらなるアップデートのための開発資金の寄付も歓迎しております。

2016年9月16日追記:メールフォームの設置代行サービスについてのページを追加しました。
2016年12月27日追記:添付ファイルバージョンを販売しています。

アップデート履歴

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要素に変更しました。
  • 軽微な不具合修正。

添付ファイル機能付きメールフォーム

サイト内を検索
サイト運用事例
ダウンロード

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

カテゴリ別
制作者の詳細
  • 谷元博のブログ
  • Google+