フォーム作ってみた
自作のフォームプログラムますたぁの手づくりぶろぐ |
記事を書いてるのは、 香川県高松市の居酒屋店主です |
お取り寄せフォーム作った(^^)
お店の商品を全国発送しよう！ということでお取り寄せフォームを作ってみました。
レンタルフォームも出回ってて便利なんだけど10000円とか20000円とかするし、無料だと広告とかついてくるから企業とかお店のフォームには役不足・・
mail to~はもっと役不足・・なので自作してみました。
ほぼ白紙の状態から組み立てたので、1週間近くかかってしまいましたが、とりあえず動作するところまでは仕上がったので公開しました。師匠！検閲お願いします。
セキュリティには注意を払ってますが、その他の細かい動作に落とし穴がある可能性あり。
ソース＆解説は備忘録の要素が強いので、もし参考にされた方がいたとしても動作に責任は持ちません。
お取り寄せフォームはこちら
餃子・春巻き注文フォーム
サンプルではありませんので、送信ボタンを押したら本当に餃子が届きます（笑
１．otoriyose.html（入力画面）
２・regist.html（入力確認＆発注画面）
３・check.html（入力チェック＆file書き込み＆メール送信画面）
入力画面はこんな感じ↓
必須項目未記入の場合はこのページで警告します。
ここから先のページは直接アクセスされては困るので、フラグを立ててきちんと１→２→３→とページを推移しているかどうか判定します。
確認画面はこんな感じ↓
お名前が“ふぉーむに”様になってますが、この人は『ふぉーむに かきこ』さんで姓だけを表示するようにしているので合ってます。
テキストファイルに内容を書き込み＆メール受信
メールアドレスを入力していればサンキューメールを自動返信で完了。
郵便番号を入力すると自動で住所が表示されるJavaScriptについてはこちらのサイトでプログラム配布＆解説しています↓
住所自動入力フォーム
http://www.kawa.net/works/ajax/ajaxzip2/ajaxzip2.html
あとはメールアドレスの“＠”とか電話番号の英数字チェックを強化したいと思ってますので、完成次第再度公開します。
テキストファイルはパーミッションもしくは.htaccessファイルで閲覧できないように設定する必要があります。
toriyose.html
<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=""> 名 <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=" ５０個 2500円">５０個 2500円</option> <option value="１００個 4500円">１００個 4500円</option> <option value="１５０個 6300円">１５０個 6300円</option> <option value="２００個 8000円">２００個 8000円</option> <option value="２５０個 10000円">２５０個 10000円</option> <option value="３００個 12000円">３００個 12000円</option> <option value="３５０個 14000円">３５０個 14000円</option> <option value="４００個 16000円">４００個 16000円</option> <option value="４５０個 18000円">４５０個 18000円</option> <option value="５００個 20000円">５００個 20000円</option> </select> </td> </tr>
<tr> <td> 激辛餃子 </td> <td> <select name="ggyouza"> <option value="">▼選択してください</option> <option value=" ５０個 2500円">５０個 2500円</option> <option value="１００個 4500円">１００個 4500円</option> <option value="１５０個 6300円">１５０個 6300円</option> <option value="２００個 8000円">２００個 8000円</option> <option value="２５０個 10000円">２５０個 10000円</option> <option value="３００個 12000円">３００個 12000円</option> <option value="３５０個 14000円">３５０個 14000円</option> <option value="４００個 16000円">４００個 16000円</option> <option value="４５０個 18000円">４５０個 18000円</option> <option value="５００個 20000円">５００個 20000円</option> </select> </td> </tr>
<tr> <td> 丸ごとエビ春巻き </td> <td> <select name="harumaki"> <option value="">▼選択してください</option> <option value=" ３０個 2700円">30個 2700円</option> <option value=" ５０個 4300円">50個 4300円</option> <option value="１００個 8000円">100個 8000円</option> </select> </td> </tr>
<tr> <td> 時間指定 </td> <td> <select name="time"> <option value="指定なし">▼選択してください</option> <option value=" 午前中"> 午前中</option> <option value="１２時〜１４時">１２時?１４時</option> <option value="１４時〜１６時">１４時?１６時</option> <option value="１６時〜１８時">１６時?１８時</option> <option value="１８時〜２０時">１８時?２０時</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・新着コメント自動表示プログラム
最終更新日 H26/01/11
麺飯茶家浪花
香川県高松市林町1511-1
香川県高松市林町1511-1