bootstrap × ajax × JQuery で簡易メールフォーム

投稿日時:2014年1月29日 カテゴリー:JavaScript

メールフォームがほしいと思い作りましたので公開したいと思います。
どうせなら、サイドとかフッターとか全ページ共通部分に埋め込めるやつをということで PHP 単体ではなく ajax × JQuery を採用しました。

免責事項

このプログラムにより発生した、いかなる損害も保証しません。

著作権

著作権フリーです。ご自由にお使いください。

ダウンロード

ダウンロード(sendmailv2.2.zip)

 

sendmail デモ

仕様

下記のような、ゴージャスな(笑)仕様になりました。

構成

中核のファイルは以下の 3つです。

mail.js
フォームの入力内容を取得し、ajax にて php にデータ処理を依頼する javascript。データチェック機能も備える
sendmail.php
メールを送信する php スクリプト
tmpl.php
メールの文章を整形する php スクリプト

使い方

bootstrap で使うことを前提に作成しています。自作のフォームでも動くと思いますが、エラー表示等、デザインが崩れる可能性が高いです。

bootstrap のページへ

html

JQuery と mail.js を設置します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="mail.js" charset="UTF-8"></script>

html ファイルにてフォームを準備する。

<form class="form-horizontal" id="sendmail" method="POST" action="★sendmail.php へのパス★">
<span class=" glyphicon glyphicon-user"> 名前 ※必須</span>
<div class="form-group">
<input type="text" name="Name" class="form-control" placeholder="Mao" dataCheck="mandatory">
</div>

<span class="glyphicon glyphicon-envelope"> メールアドレス ※必須</span>
<div class="form-group">
<input type="text" name="mailNo" class="form-control" placeholder="" dataCheck="mandatory mail">
</div>

<span class=" glyphicon glyphicon glyphicon-pencil"> お問い合わせ内容 ※必須</span>
<div class="form-group">
<textarea name="inquiry" class="form-control" rows="10" dataCheck="mandatory"></textarea>
</div>

<div class="form-group">
<button class="btn btn-primary" id="submit">
<span class="glyphicon glyphicon-send"> 送信 </span>
</button>
</div>

</form>
form
id=”sendmail” と  action=”sendmail.php へのパス” を設定します。
dataCheck=”mandatory”
設定すると必須項目であることをチェックします。
dataCheck=”mail”
設定すると mail が正しいフォーマット形式なのかをチェックします。

css

以下のスタイルを追加してください。メール送信時にフォームをロックするのに使用します。
#lock {
	z-index: 10000;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #FFF;
	text-align: center;
	display: none;
	opacity: 0.7;
}

tmpl.php

mb_language('ja');
mb_internal_encoding('UTF-8');

$mailTo = "★メールアドレス設置★";
$subject = mb_encode_mimeheader("フォームより送信されました");
$from = "From:".$outputdata["mailNo"];

//送信メッセージ
$message = <<< EOD
以下の内容がフォームより送信されました。
────────────────────────────────────
[氏名]
{$outputdata["Name"]}

[メールアドレス]
{$outputdata["mailNo"]}

[メッセージ]
{$outputdata["inquiry"]}
────────────────────────────────────
EOD;

$message = mb_convert_encoding($message , "ISO-2022-JP", "auto");
$mailTo
メールの送信アドレスを設定。
$subject
件名を設定。mb_encode_mimeheader() の部分は編集しないこと。
{$outputdata[“Name”]}
name=”XXX” に入力された文字列が入ります。name=”mailNo” を input に設定している場合は、{$outputdata[“mailNo”]} と記載します。また、[氏名]、[メールアドレス]といった文字列も自由に変更可能です。変数($ で始まるもの)は変更しないこと。

以上でメールフォームの設置完了です。

バージョン情報

v2.1 2014/7/5 に変更

メールアドレスをチェックする正規表現を RFC5322 に可能な限りマッチするよう修正しました。
というか、以下のサイトを参考にさせていただきました。
メールアドレスの正規表現

v2.2 2014/10/15 に変更

文字化けする現象を修正しました。


コメント一覧

  1. REI-K より:

    メールフォーム、ありがたく使わせて頂いています。
    なぜかgmailのアドレスだけ送れません。
    【エラー:メール形式不正】とでます、何が原因でしょうか?
    解決策があれば教えてください、よろしくお願いします。

    1. admin より:

      連絡が遅くなり申し訳ありません。
      検証しましたが、私の環境では gmail のアドレスでも送信可能でした。
      もしよろしければ、送信できないメールアドレスを、 syouzenmasatosi@gmail.com におくってください。
      再度検証いたします。

  2. よしのり より:

    設置も簡単で、ファイルも少ないこのようなフリーで使わせていただけるメールフォームを探しておりました。
    こちらのフォームを http://www.blacktie.co/demo/munter/ に組み込んで使おうとしたところ、うまく動きませんでした。理由は設置する場所を内包しているdiv要素にdata-slide=”6″のプロパティがあるのが原因というところまではわかったのですが、解決方法が分からず書き込ませていただきました。
    何か回避方法がございましたら教えていただければ幸いです。

    data-slideのプロパティが無いdivに設置した場合の動作は問題ございませんでした。

    1. admin より:

      ご連絡ありがとうございます。
      調査したところ、bootstrap.js v3.0.3(bootstrap.main.js の非圧縮版)の 487行目の以下の関数にて[data-slide]セレクタをクリックすることで e.preventDefault()が実行されてサブミットがキャンセルされていることを確認しました。
      良い対処方法が思い浮かびませんでしたが、以下のように e.preventDefault() をコメントまたは削除にすることによりsendmail の動作を確認しました。(その他私の見る範囲ではページに不具合は見当たりませんでした。)
      ただし、今後 bootstrap.main.js 関連の挙動がおかしくなる可能性があります。

      $(document).on(‘click.bs.carousel.data-api’, ‘[data-slide], [data-slide-to]’, function (e) {

      //省略//

      // e.preventDefault()
      //お送りいただいた該当のHPは、bootstrap.main.js の b.preventDefault() です。
      })

      すみません。ちょっと中途半端な対処方法で。。。

  3. せいろ より:

    非常に設置しやすくデザインも綺麗なメールフォームを配布してくださり、ありがとうございます。
    メールアドレスがinvalidになるパターンとして、@以前に.などの文字が入っている場合に不正と判断されることがあるようです。
    もしご参考になればと思い、書き込ませていただきました。

    こちらのメールフォーム、活用させていただきたく思います。
    お礼とご報告まで。

    1. admin より:

      ご連絡ありがとうございます。
      Web 上から参考にしたメールアドレスをチェックする正規表現がグダグダだったみたいです。
      ご指摘をいただき、内容を修正しました。

  4. へっぽこ より:

    はじめまして。
    ブートストラップにモーダルウインドウで開いた中でフォームを設置したいと思い、あれこれ検索しておりましたらたどり着きました。しかしどうもうまくいかずでして。

    http://yaruyo01.heteml.jp/hira05/hermes2/index_form.php

    ここのお問い合わせにあるボタンをクリックするとウインドウが開いて、項目が出るのですが、入力して送信すると「通信に失敗しました。時間をおいてもう一度試してください。」が出るのです。

    モーダル内で開いてページ遷移させずにやること自体に問題があるのかどうかもわかりかねております。もし見ていただいて、何か目についたことなどがあればご教授いただければ幸いです。

    1. admin より:

      メールにて対処方法をご連絡いたしました。ご確認ください。

  5. あめ より:

    はじめまして。
    bootstrapで軽量のフォームを探していたら辿り着きました。

    サーバにアップロードした後にテストしてみたところ
    文字化けも無く、通知メールも送られてきたのですが
    「氏名」「メールアドレス」「問い合わせ内容」といった項目が空で通知されてしまいます。

    ファイルをダウンロードして
    ソースも変えずに(★の部分だけ変更しています)設置してみても空のままでした。
    これはこちらのサーバ側の問題でしょうか?
    もし原因がお分かりでしたらご教示ください。
    宜しくお願い致します。

    サーバ:さくらレンタルサーバ(スタンダード)

    1. admin より:

      メールにて対処方法をご連絡いたしました。ご確認ください。

  6. ハナレイ より:

    便利なフォームありがとうございます。
    しかし、使いこなせずに困っております。

    前のコメントのあめさんと全く同じ症状です。
    対処方法をお教え願います。
    宜しくお願い申し上げます。

    1. admin より:

      ご連絡が遅くなり、申し訳ございません。

      まずは以下の点を確認ください。

      ———————————–
      [氏名]
      {$outputdata[“Name”]}
      ———————————–

      {$outputdata[“Name”]} の 「”Name”」該当の項目の name 属性が入ります。

      例)「name」が「”test1″」の場合、以下のように設定します。

      入力項目
      ——–
      <input type="text" name="test1" class="form-control" placeholder="Mao"
      dataCheck="mandatory">
      ——–

      tmpl.php
      ——–
      {$outputdata[“test1″]}
      ——–

      これで解決しない場合は、以下のアドレスにメールフォームのソースをいただければさらに詳細に解析いたします。
      syouzenmasatosi@gmail.com

  7. ももも より:

    はじめまして、Bootstrapで使いやすいフォームを探していたところここに辿り着き、使わせていただいております。

    普通にページ内に設置したところ問題無く使えているのですが、上記のへっぽこさんのようにBootstrapのModal内にフォームを設置したところ動作せずに困っております。
    送信ボタンを押しても何も変化無く、必須項目を空のまま送信を押しても「必須項目です」のエラーも返ってきません。

    Modal内に設置する際には何か変更しなければいけない点等ありますでしょうか?
    何か方法がございましたら教えていただければ幸いです。

    1. admin より:

      確認いたしましたが、Modal内でも動作します。
      例) http://www.mao-engineer.jp/tmp/test/

      問題が解決しないようであれば、以下のアドレスにメールフォームのソースをいただければさらに詳細に解析いたします。
      syouzenmasatosi@gmail.com

へっぽこ にコメントする コメントをキャンセル