お取り寄せフォーム作った(^^)

お店の商品を全国発送しよう!
ということでお取り寄せフォームを作ってみました。
レンタルフォームも出回ってて便利なんだけど10000円とか20000円とかするし、無料だと広告とかついてくるから企業とかお店のフォームには役不足・・
mail to~はもっと役不足・・なので自作してみました。

ほぼ白紙の状態から組み立てたので、1週間近くかかってしまいましたが、とりあえず動作するところまでは仕上がったので公開しました。師匠!検閲お願いします。
セキュリティには注意を払ってますが、その他の細かい動作に落とし穴がある可能性あり。
ソース&解説は備忘録の要素が強いので、もし参考にされた方がいたとしても動作に責任は持ちません。

お取り寄せフォームはこちら
餃子・春巻き注文フォーム
サンプルではありませんので、送信ボタンを押したら本当に餃子が届きます(笑

今回は3ページ。
1.otoriyose.html(入力画面)
2・regist.html(入力確認&発注画面)
3・check.html(入力チェック&file書き込み&メール送信画面)

入力画面はこんな感じ↓

フォーム・これは画像だよ!


必須項目未記入の場合はこのページで警告します。
ここから先のページは直接アクセスされては困るので、フラグを立ててきちんと1→2→3→とページを推移しているかどうか判定します。

確認画面はこんな感じ↓

入力確認画面・これも画像だよ!


お名前が“ふぉーむに”様になってますが、この人は『ふぉーむに かきこ』さんで姓だけを表示するようにしているので合ってます。

送信ボタンクリック後に問題なければ、
テキストファイルに内容を書き込み&メール受信
メールアドレスを入力していればサンキューメールを自動返信で完了。

郵便番号を入力すると自動で住所が表示されるJavaScriptについてはこちらのサイトでプログラム配布&解説しています↓

住所自動入力フォーム
http://www.kawa.net/works/ajax/ajaxzip2/ajaxzip2.html

あとはメールアドレスの“@”とか電話番号の英数字チェックを強化したいと思ってますので、完成次第再度公開します。
テキストファイルはパーミッションもしくは.htaccessファイルで閲覧できないように設定する必要があります。

toriyose.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>餃子・春巻きのお取り寄せ|麺飯茶家浪花</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="example.css" rel="stylesheet" type="text/css" />
<!--同フォルダー内にajaxzip2フォルダーを設置(住所検索)-->
<script src="ajaxzip2/jquery.js" type="text/javascript"></script>
<script src="ajaxzip2/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="ajaxzip2/ajaxzip2.js" charset="UTF-8" type="text/javascript"></script>
<script>AjaxZip2.JSONDATA = 'ajaxzip2/data';</script>
</head>
<body>
<div id="container" style="margin: 0 auto; padding: 10px;width: 740px;">
<!--必須項目チェック-->
<form action="regist.html" onsubmit= "if(this.name1.value==''){alert('名前が未入力です');return false} else if(this.name2.value==''){alert('名前が未入力です');return false}else if(this.tel.value==''){alert('電話番号が未入力です');return false} else if(this.zip.value==''){alert('郵便番号が未入力です');return false} else if(this.addr.value==''){alert('住所が未入力です');return false}" method="post">
<h2>餃子・春巻きのお取り寄せフォーム</h2>
<p><b>「*」のついたものは必須項目です</b></p>
<table>
<tr> <td width="140"> * お名前 </td> <td> 姓 <input name="name1" type="text"size="4" style="back ground-color:#ffffff" onFocus="this.style.backgroundColor='#D0F7FD'" onBlur="this.style.backgroundColor='#ffffff'" value=""> &nbsp;&nbsp;名 <input name="name2" type="text"size="4" style="back ground-color:#ffffff" onFocus="this.style.backgroundColor='#D0F7FD'" onBlur="this.style.backgroundColor='#ffffff'" value=""> </td> </tr>
<tr> <td> * 電話番号 </td> <td> <input name="tel" type="text" validation="" size="24" style="back ground-color:#ffffff" onFocus="this.style.backgroundColor='#D0F7FD'" onBlur="this.style.backgroundColor='#ffffff'" value=""> </td> </tr>
<tr> <td> * 郵便番号 </td> <td> <input name="zip" type="text" style="back ground-color:#ffffff" onFocus="this.style.backgroundColor='#D0F7FD'" onBlur="this.style.backgroundColor='#ffffff'" onKeyUp="AjaxZip2.zip2addr('zip','addr','addr');" maxlength="8" class="postnumber">  例)123-4567 <br /> <font style="font-size:12px">※郵便番号を入力すると住所が自動入力されます</font> </td> </tr>
<tr> <td> * 住所(お届け先) </td> <td> <textarea name="addr" rows="2" cols="42" style="back ground-color:#ffffff" onFocus="this.style.backgroundColor='#D0F7FD'" onBlur="this.style.backgroundColor='#ffffff'" class="address"> </textarea> </td> </tr>
<tr> <td><br /> <b>希望商品を<br />お選びください↓</b> </td> <td><br /> 複数選択可 <!-- <label><input name="1" type="checkbox" value="讃岐の昔餃子">讃岐の昔餃子</label> <label><input name="2" type="checkbox" value="激辛餃子">激辛餃子</label> <label><input name="3" type="checkbox" value="丸ごとエビ春巻き">丸ごとエビ春巻き</label>--> </td> </tr> <tr> <td> 讃岐の昔餃子 </td> <td> <select name="gyouza" class="form_100"> <option value="">▼選択してください</option> <option value=" 50個  2500円">50個   2500円</option> <option value="100個  4500円">100個  4500円</option> <option value="150個  6300円">150個  6300円</option> <option value="200個  8000円">200個  8000円</option> <option value="250個  10000円">250個  10000円</option> <option value="300個  12000円">300個  12000円</option> <option value="350個  14000円">350個  14000円</option> <option value="400個  16000円">400個  16000円</option> <option value="450個  18000円">450個  18000円</option> <option value="500個  20000円">500個  20000円</option> </select> </td> </tr>
<tr> <td> 激辛餃子 </td> <td> <select name="ggyouza"> <option value="">▼選択してください</option> <option value=" 50個  2500円">50個   2500円</option> <option value="100個  4500円">100個  4500円</option> <option value="150個  6300円">150個  6300円</option> <option value="200個  8000円">200個  8000円</option> <option value="250個  10000円">250個  10000円</option> <option value="300個  12000円">300個  12000円</option> <option value="350個  14000円">350個  14000円</option> <option value="400個  16000円">400個  16000円</option> <option value="450個  18000円">450個  18000円</option> <option value="500個  20000円">500個  20000円</option> </select> </td> </tr>
<tr> <td> 丸ごとエビ春巻き </td> <td> <select name="harumaki"> <option value="">▼選択してください</option> <option value=" 30個  2700円">30個 2700円</option> <option value=" 50個  4300円">50個 4300円</option> <option value="100個  8000円">100個 8000円</option> </select> </td> </tr>
<tr> <td> 時間指定 </td> <td> <select name="time"> <option value="指定なし">▼選択してください</option> <option value="  午前中">  午前中</option> <option value="12時〜14時">12時?14時</option> <option value="14時〜16時">14時?16時</option> <option value="16時〜18時">16時?18時</option> <option value="18時〜20時">18時?20時</option> </select> </td> </tr>
<tr> <td> メールアドレス </td> <td> <input name="email" type="text" value="" size="36"> </td> </tr>
<tr> <td> <div> 要望・質問 </div> </td> <td> <textarea name="com" rows="4" cols="48" value=""> </textarea><br /> </td> </tr>
</table> <table> <tr> <td> <p><font style="font-size:12px">・激辛餃子の辛さ・ニンニク無し・のしが必要な場合等、質問・ご要望がありましたら気軽にお書きください。<br /> ・初回は代金引換のみとなります。商品到着時に代金をお支払い下さい。<br>
・ただいま消費税、送料、代金引換手数料コミコミ価格です!</font></p>
<hr>
麺飯茶家 浪花<br> 〒761-0301<br> 香川県高松市林町1511-1<br> ℡ 087-865-9003 </td></tr>
</table>
<input type="hidden" name="hidden" value="1"> <input type="submit" value="内容確認"> <input type="reset" value="書き直し" onClick="return confirm('入力内容を元に戻します。よろしいですか?')"> </form>
</div>
</body>
</html>

regist.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>餃子・春巻きのお取り寄せ|確認画面</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="example.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="container" style="margin: 10px auto; padding: 10px;width: 740px;">
<p>【入力確認画面】<br />以下の内容で送信しますか?</p>
<?php
//入力ページから来ていない場合、商品が入力されていない場合は弾く。
if ( $_POST["hidden"] !== '1' ) { header("LOCATION: toriyose.html" ); die('不正アクセス可能性あり<br>'); }
if ((empty($_POST["gyouza"])) and (empty($_POST["ggyouza"])) and (empty($_POST["harumaki"]))) { die ('商品が入力されていません!');}
//postで渡された値を定義
$time = "(".date('Y/n/j(D)H:i').")" ;
$name1 = htmlspecialchars($_POST["name1"]);
$name2 = htmlspecialchars($_POST["name2"]);
$tel = htmlspecialchars($_POST["tel"]);
$zip = htmlspecialchars($_POST["zip"]);
$addr = nl2br(htmlspecialchars($_POST["addr"]));
$email = htmlspecialchars($_POST["email"]);
$com = nl2br(htmlspecialchars($_POST["com"]));
//入力内容を表示
echo 'お名前:'.$name1.'様<br />';
echo '連絡先:'.$tel.'<br />';
echo 'お届け先:〒'.$zip.'<br />     '.$addr.'<br />';
echo '餃子:    '.$_POST["gyouza"].'<br />';
echo '激辛餃子: '.$_POST["ggyouza"].'<br />';
echo '海老春巻き:'.$_POST["harumaki"].'<br />';
echo 'お届け希望時間:'.$_POST["time"].'<br />';
//メールとコメントは未記入の場合、値を『未入力』『なし』とする。
if($email==''){ $email= '未入力'."<br />";
echo "email:".$email;
}else{
echo 'email:'.$email.'<br />';
}
if($com==''){
$com= 'コメント・希望・要望欄:なし'."<br />\n";
echo $com;
}else{
echo 'コメント・希望・要望欄<br />'.$com.'<br />';
}
echo $time;
//check.htmlに渡す内容を纏めて$fに代入
$f = "お名前:".$name1.$name2."様\r\n"."連絡先:".$tel."\r\nお届け先:〒".$zip." ".$addr."\r\nメールアドレス:".$email."\r\n餃子:".$_POST["gyouza"]."\r\n激辛餃子:".$_POST["ggyouza"]."\r\n海老春巻き:".$_POST["harumaki"]."\r\nお届け希望時間:".$_POST["time"]."\r\nコメント:<>".$com."\r\n\r\n";
?>
<p>
<!--送信ボタンと戻るボタン-->
<form action="check.html" method="post">
<input type="submit" name="submit" value="送信する" /> <input type="button" onclick="self.history.back()" value="入力画面に戻る"/>
<input type="hidden" name="hidden" value= "<?php echo $f ;?>">
<input type="hidden" name="email" value= "<?php echo $email ;?>">
</form>
</div>
</div>
</body>
</html>

check.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>注文処理</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="example.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container" style="margin: 10px auto; padding: 10px;width: 740px;">
<?php
//纏めて渡された注文内容とメールアドレスを取り出す
//テキストファイル書き込み・メール送信用に<br />タグは削除
$f = $_POST['hidden'];
$email = $_POST['email'];
$f = str_replace("<br />", "", $f);
$email = str_replace("<br />", "", $email); //fileに書き込み
$fp = fopen('filename1.txt', 'ab');
if ($fp)
{
if (flock($fp, LOCK_EX)){
if (fwrite($fp,$f) === FALSE){
print('ファイル書き込みに失敗しました');}else{
flock($fp, LOCK_UN);
$flag=fclose($fp);
if ($flag){}
else{print('クローズに失敗しました');}
}
}
}
//返信メールの定義
$mail_sub = 'ご注文ありがとうございました';
$mail_body = '以下の内容でご注文を承りました。'."\r\n\r\n".$f."\r\n\r\n麺飯茶家浪花\r\n".date('Y/n/j(D)H:i');
$mail_body = html_entity_decode($mail_body,ENT_QUOTES,"UTF-8");
$mail_head = 'From:gyo-za@md.pikara.ne.jp'; mb_language('Japanese');
mb_internal_encoding("UTF-8");
//メール欄が未入力の時は処理しない
if ($email =='未入力') {}
elseif (!mb_send_mail($email, $mail_sub, $mail_body,$mail_head)) {$m = "返信できませんでした。";}
else{$m = "自動メールを返信しました。";}
//受信用にメールの内容を変更
$mail_sub = '注文がありました';
$mail_head = 'From:'.$email;
$email = "example@naniwa.ne.jp";
mb_send_mail($email, $mail_sub, $mail_body,$mail_head);
?>
<form method="post">
<table>
<tr> <td>
<p>ご注文を承りました。<br>
発送は基本翌日発送になります。<br />
メールアドレスを入力して頂いたお客様には受注確認の返信メールを送信しています。<br />
(自動返信ですので受信メールの設定環境によっては迷惑メール扱い・メールが届かない場合もあります。)<br />
...<?php echo $m ;//送信結果表示 ?></p>
<hr>
<p>麺飯茶家 浪花<br> 〒761-0301<br> 香川県高松市林町1511-1<br> ℡ 087-865-9003</p>
<p>
<div align="center">〜毎度ありがとうございます〜</div>
</p>
</td></tr>
</table>
</form>
<p> <a href="http://n-apc.com/">ホームページ</a> </p>
</div>
</body>
</html>

そんな感じで・・

関連記事:
タイピング練習無料サイト集 打鍵サイト集めてみた。タイピング記録サイトで日々精進!
アクセスとサイトのイメージ アメブロとか平均アクセスとかアナリティクスとか黒いブーツとか・・
文字エンコーディングを変換する
緩めのスパム投稿対策プログラム
PHP・サンプルソースエロエロ
PHP・ブログ自動投稿プログラム
PHP・新着コメント自動表示プログラム

SEO・プログラムに関する記事一覧



最終更新日 H26/01/11
麺飯茶家浪花
香川県高松市林町1511-1


記事にコメントを投稿できます。

お名前:

コメント:



コメント新着10件 (リンク先の記事に対してのコメントです)


1. travel2 お名前:私もホリデーいったことある 2017/6/14(Wed)19:42 MTE4LjE2LjEyMC4zNQ==
こんにちは。
前に私も当選していってきました。宝石屋やバス内の物はナニも買わず、土産物屋で食べ物系だけ買ったのですが、本日別のとこで応募したのが当たったって葉書きましたw
ペイが少なそうな店でしか買わなかったのですが、また当たるとか、やっぱ年齢ですかねw

2. tabelog お名前:yano 2017/4/22(Sat)15:23 MTIxLjU4LjE4MS42NQ==
私も飲食店を経営してまして
とても共感できます

法律、理屈うんぬんではなく

単純に
食べログや当たり前に写真パシャパシャとって
投稿する輩に腹が立ってます

しかも食べログや口コミサイトなんて
書くやつもどーせ
身内や友達のやってる店には評価甘くなるんでしょ?

クソくだらない

口コミサイトなんて
なくなればいいです

3. tabelog3 お名前:匿名 2017/1/9(Mon)22:03 MTQuMTIuMTM1LjE2MA==
裁判で、コントロールする権限がないみたいなことを言われたらしいけど、裁判が間違っていると思います。 がきすぎる裁判だと思う。 コントロールとかまったく無責任な発言だと思います。
公の場でまずいと言われれば、営業妨害だと思う。公で言うことじゃない。裁判も焼きが回っているのでわ。
まずいと宣伝しているようなもの。それを、公で、本人にも言ってるんだから、言われた側が出てくるのは当然だと思います。
ただのいやがらせ。いやなラ来なければいいと思います。見ている側と、書いた側の意見しか反映されていない。書かれてる側の気持ちは全く考慮されていない。裁判に時代の幼稚さを感じます。

4. tabelog3 お名前:comment 2016/12/14(Wed)13:44 MjE5Ljk2LjQ2Ljc5
4travel(フォートラベル)というカカクコム運営で、食べログと同じ様に旅館やホテルを無断で掲載しているサイトがあるのですが、
口コミに加えブログ掲載する機能まであり、中には大浴場、建物の裏などのバックヤード、備品の型番をネットで検索して料金を記載した記事や写真までアップされてしまっている施設すらありますよ…。
何を目的としているのかわかりませんが、いつ誰が裸で入ってくるかわからない温泉や浴場にスマホ含むカメラを持ち込むなど、カカクコムは運営の質も低いですが、ユーザーの質も本当に下衆な方が多いですね。

5. tabelog3 お名前:けん 2016/10/28(Fri)23:34 MTEzLjM0LjEwMC4yMjc=
当店はとても小さな店で常連さんを中心に細々と展開しているお店なのですが食べログに良い評価ばかりがのる為通りすがりのお客様が増えて困っており、削除依頼を何度もしているのですがしてもらえません。仕方ないので最近会員制のお店にしたのですがそれでも削除をしようとしない悪質な業者です。なんとかできないものでしょうか。

6. comment お名前:あん 2016/10/11(Tue)10:56 MTA2LjE1NC4xMDkuMTg2
私も食べログを初めとするレビューサイトは嫌いです。
接客や味が気に入らないからといって酷評(笑)をする自称評論家。
何様なのでしょうか。
良いことも悪いことも相手の顔を見てはっきり伝えるべきだと思います。

そのお店が繁盛すれば「私の評価のおかげ」
そのお店が閉店すれば「私はアドバイスしてあげたのに」

相手にするのも馬鹿馬鹿しい。

7. tabelog3 お名前:いち客人 2016/8/30(Tue)19:05 MTE0LjE4OC4xMTAuMTg3
私は飲食店にとっては客側の者ですが、食べログなんてものは全く信用していません。
だいたい、あんなところでグルメ評論家ぶってる暇人の戯言など、読むだけ時間の無駄ですから。
それと、外食時に食べログやブログ、ツイッターやFacebookに載せるためか知りませんけど、あほ面晒してスマホでパシャパシャやってる連中がいると、本当に不愉快です。
いいから黙って食ってろと思いますね。

8. tabelog お名前:反食べログ 2016/3/20(Sun)20:43 MTExLjEwNy45MS4xODA=
アンフェアですよね、店側は住所店名(時には氏名も)電話番号も公開されているのに書き込む側は全くの匿名ですから。
書き込んだ人を評価してみたいですよ、その人がどんな職場でどんな働き方をしているのか。
表現の自由があるなら評価されたくない自由もあるはずだと思います。
ブロガーも似た者で、名古屋にランディとかいうレストランの人気ブロガーがいますが自身レストラン経営を失敗しておいて他店を
ものすごい上から目線のコメントで評価してるのがなんも不愉快です。しかも高級店では昼の安いランチを食べてその店の全てを見切ったような書き方ですから呆れます。

お店の皆さん、本当に美味しくて心からのおもてなしをされていれば本当の口コミでいいお客様がまたいいお客様を紹介して下さりますから負けずに頑張って下さいね!

9. tabelog お名前:nuka 2016/3/20(Sun)00:40 MTgwLjMwLjIxMC41OQ==
食べログ様への掲載は許可しておりません。という文言とともにアルファベットの羅列等で荒らされているページがあったから「何じゃこりゃ?」と思って調べてみたらこういう事だったんですね。
まさか許可をとらずに掲載しているとは思いませんでした。
しかし、そう言われてみると確かにホットペッパーと比べると店ごとの店舗情報(口コミではない)の差が大きいし、そもそも掲載されている事も知りませんなんて人も多いでしょうね。
正直、「長崎人好みの味でまずい」というレビューを見て以来、食べログのレビュアーにはむかついてましたし、これを機に食べログを使うのをやめます。
いくら店側が抗議しても便利だからという理由で食べログを使い続ける人が減らなかったら問題は解決しないと思いますので。

10. tabelog3 お名前:れっくす 2016/2/9(Tue)10:07 MjcuMTE0LjEyNS4xMjc=
熱田の星
  ↑
なるほど、こういうバカが書き込んでるのか。
納得(笑)
 

コメント62

全部見る(100件まで表示)

管理人へのコンタクトはお店に遊びに来ていただくと喜び〜です。
(遊びに来れない人はからメールを送れます。)
管理人の独学での検証・考察を記事にしておりますので、間違った解釈があった場合にはご指摘いただくとなお喜び〜です。

TOPへ戻る