【PHP】メールフォーム 一度入力した内容が消えてしまう時 POST使って入力内容を保持 ~メールフォームパッケージダウンロードあり~
公開日:
:
最終更新日:2013/06/24
how to, ウェブ・ネット・PC(パソコン), サーバ・プログラム
前に、
【PHP】スマホ対応 メールフォーム設置 PEARを使ってgmailのsmtpサーバで送信する(ダウンロード可能)
っちゅう、クソ長ったらしいやつ書きまして。。。
まあこれでメールフォーム(お問い合わせフォーム)はある程度良いのですが一つ問題が。。。
例えばこんな感じでフォーム入力します。
「電話番号は営業の電話とかうっとおしいから入れたくないな」なんて感じで必須項目だったけど入力しなかった場合、
こんな感じでエラーが返されます。
「しょうがねえなあ、入れるか」と戻るボタンを押すと、
これまでに苦労して入力した内容が消えてしまうってことが起こってしまうのでした。
これは非常にもったいないです。
せっかく自分のサイトでお問い合わせまでしてくれているのに、
もういいや、メンドクサイ
ってなったら、超もったいないです。
で、対策を考えなければ!
なんですが、僕みたいに何も考えずにお問い合わせフォーム作っていて、、、
◆入力した内容の間違えに気づいたり
◆エラー(必須項目未入力とか)
で、戻った時にこれまで入力した内容が消える場合と消えない場合があるのですが、これはブラウザに依存する、それすわち
相手(の設定や環境)に依存する
というわけです。
サービスの提供者としては相手側の設定によって挙動が変わったりするのはやっぱり良くないです。
ウェブサイトのブラウザ対応についても
うちのサイトはChromeで見てね。それ以外はぐちゃぐちゃになるから
とかいうサイト嫌ですよね?
まあIE6のシェアは大分低くなってきて、その割に対応するのに労力が半端ないから予算次第では切り捨てるみたいなことはありますけど。。。
この俗に言う「フォーム内容消えちゃう糞ボケ問題」キャッシュのコントロールで制御することが多いです。
何も考えずにフォームを作ると、入力内容確認ページ(このパッケージの場合はConfirm.php)の「戻る」ボタンおよび「内容を修正する」ボタンは以下のソースです。
<INPUT TYPE='BUTTON' VALUE = '戻る' onClick='history.back()' >
この「onClick=’history.back()’」は、ブラウザの戻るボタンと基本的には同じ動きをします。
ここでキャッシュが残っているかはさっき言ったブラウザによるよね?というわけで、すなわち相手次第です。
で、そのキャッシュを残す残さないを制御する方法があり
session_start(); session_regenerate_id(true);
の部分を
session_start();
のみにするとか、いろいろ記事が出てきますが、これでも利かない事象があったりと、僕も詳しくないのでわかりませんが、やっぱり相手の設定や環境・ブラウザに依存しちゃうのかな?
って感じです。
というわけで、今回は前公開したPHPのメールフォームを少し改良して、タイトルの通り、入力した内容を戻ったり修正するまでもphpのpostっていうので、しっかり保持をしよう、というアプローチで作りました。
と、僕があみだしたみたいに言ってるけど、よくやる方法です。
そして、改良したのがこちら。
ご自由にダウンロードして頂いて、自分のサイトに実装してみてね(^^ゞ
パッケージ内容ですが、
前回から変わったのが、
◆Confirm.phpを修正
→戻ったり、内容を修正するときも、入力したデータを保持するようにした。
◆index2.phpを追加
→Confirm.phpから保持されたデータを受け取れる用にhtmlじゃなくてphpファイルを用意
てな感じです。
全体のフローとしては、
てな感じです。2点、補足として
なんでindex2.phpなんて作ったの?
index.htmlをPHPにすりゃいいじゃん!
もちろんそれでも問題無いですし、むしろそのほうがシンプルでファイルも少なくスッキリしますが。。。
「稼働中のサイトでフォームのところはhtmlで作っちゃってるよ(>_<)」
ってひとは、「お問い合わせはこちら」のリンク先が変わると、かなり面倒くさいよね?
なのでフォームが書いてあるhtmlは生かしで、新たにphpファイルをこさえたです。
というわけなので、index2.phpはindex.htmlとhtml部分は全く同じで、phpが追加されてるだけです。
それはいいけどさぁ、
index2.phpじゃなくてindex.phpのがよくない?
てか「2」ってなに、ダサっ!
これはhtaccessやhttpd.confとかでURLの正規化してたりしている人のためです。
index.htmlやindex.phpとかはURLに表示させないってやつね。
そうするとindex.htmとやindex.php両方混在するとなんか問題起きそうじゃね?ってことでindex2.phpっていう風にしてるです。
で、一応改変した「Confirm.php」と、追加でこさえた「index2.php」のソースもこちらに載せときますね。
Confirm.php
PHP部分のみね。
<?php //メールアドレスが変じゃないかチェック //全角だったり@が無かったり error_reporting(E_ERROR & ~E_NOTICE & ~E_PARSE); function filter($str) { $rtn = false; if ( ereg("^[^@]+@[^.]+\..+", $str) ) { $rtn = true; } return $rtn; } //特殊文字があったら変換 $groupzz = htmlspecialchars($_POST["groupzz"]); $namesei = htmlspecialchars($_POST["namesei"]); $namemei = htmlspecialchars($_POST["namemei"]); $mailzz = htmlspecialchars($_POST["mailzz"]); $telzz = htmlspecialchars($_POST["telzz"]); $numberzz = htmlspecialchars($_POST["numberzz"]); $textzz = htmlspecialchars($_POST["textzz"]); //半角カタカナと全角数字を変換 $groupzz = mb_convert_kana($groupzz,"KVa","Shift_JIS"); $namesei = mb_convert_kana($namesei,"KVa","Shift_JIS"); $namemei = mb_convert_kana($namemei,"KVa","Shift_JIS"); $mailzz = mb_convert_kana($mailzz,"KVa","Shift_JIS"); $telzz = mb_convert_kana($telzz,"KVa","Shift_JIS"); $numberzz = mb_convert_kana($numberzz,"KVa","Shift_JIS"); $textzz = mb_convert_kana($textzz,"KVa","Shift_JIS"); //magic_quotes_gpc=onのときにのみエスケープを解除 if (get_magic_quotes_gpc()){ $groupzz = stripslashes($groupzz); $namesei = stripslashes($namesei); $namemei = stripslashes($namemei); $mailzz = stripslashes($mailzz); $telzz = stripslashes($telzz); $numberzz = stripslashes($numberzz); $textzz = stripslashes($textzz); } //必須項目が未入力の時エラー出す $f = true; if($namesei == null) { $f = false; print("<br><br>・お名前(姓)が入力されていません。<br> "); } if ($namemei == null) { $f = false; print("<br><br>・お名前(名)が入力されていません。<br> "); } if ($mailzz == null) { $f = false; print("<br><br>・メールアドレスが入力されていません。<br> "); }else if(!filter($mailzz)) { $f = false; print("<br><br>・メールアドレスが正しく入力されておりません。全角半角をご確認下さい。<br> "); } if ($telzz == null) { $f = false; print("<br><br>・電話番号が入力されていません。<br> "); } if ($numberzz == null) { $f = false; print("<br><br>・人数が指定されていません。<br> "); } if($textzz == null) { $f = false; print("<br><br>・内容が入力されていません。<br> "); } //全部ちゃんと入力されたので、入力内容を表示 if ($f== true) { print("<p>以下の内容でお申込みしてもよろしいでしょうか?</p> <table class=\"table-01\" border=\"1\" width=\"100%\"> <tr><th>項目</th><th>入力事項</th></tr> <tr><td>団体名</td><td>$groupzz</td></tr> <tr><td>お名前</td><td>$namesei$namemei</td></tr> <tr><td>メールアドレス</td><td>$mailzz</td></tr> <tr><td>電話番号</td><td>$telzz</td></tr> <tr><td>人数</td><td>$numberzz</td></tr> <tr><td>内容</td><td>$textzz</td></tr> </table><br><br><br> "); //入力されたものをSend.phpもしくは修正用のindex2.phpに入れる print ("<form method='post' action='Send.php'> <INPUT TYPE='HIDDEN' NAME='groupzz' VALUE='$groupzz'> <INPUT TYPE='HIDDEN' NAME='namesei' VALUE='$namesei'> <INPUT TYPE='HIDDEN' NAME='namemei' VALUE='$namemei'> <INPUT TYPE='HIDDEN' NAME='mailzz' VALUE='$mailzz'> <INPUT TYPE='HIDDEN' NAME='telzz' VALUE='$telzz'> <INPUT TYPE='HIDDEN' NAME='numberzz' VALUE='$numberzz'> <INPUT TYPE='HIDDEN' NAME='textzz' VALUE='$textzz'> <INPUT TYPE='SUBMIT' VALUE='この内容で送信する'><br> </form> <br><br> <form method='post' action='index2.php'> <INPUT TYPE='HIDDEN' NAME='groupzz' VALUE='$groupzz'> <INPUT TYPE='HIDDEN' NAME='namesei' VALUE='$namesei'> <INPUT TYPE='HIDDEN' NAME='namemei' VALUE='$namemei'> <INPUT TYPE='HIDDEN' NAME='mailzz' VALUE='$mailzz'> <INPUT TYPE='HIDDEN' NAME='telzz' VALUE='$telzz'> <INPUT TYPE='HIDDEN' NAME='numberzz' VALUE='$numberzz'> <INPUT TYPE='HIDDEN' NAME='textzz' VALUE='$textzz'> <center><INPUT TYPE='SUBMIT' VALUE='内容を修正する' ></center> </form> "); }else{ //エラーで戻る場合も修正用のindex2.phpに入れる print ("<br><br><br> <form method='post' action='index2.php'> <INPUT TYPE='HIDDEN' NAME='groupzz' VALUE='$groupzz'> <INPUT TYPE='HIDDEN' NAME='namesei' VALUE='$namesei'> <INPUT TYPE='HIDDEN' NAME='namemei' VALUE='$namemei'> <INPUT TYPE='HIDDEN' NAME='mailzz' VALUE='$mailzz'> <INPUT TYPE='HIDDEN' NAME='telzz' VALUE='$telzz'> <INPUT TYPE='HIDDEN' NAME='numberzz' VALUE='$numberzz'> <INPUT TYPE='HIDDEN' NAME='textzz' VALUE='$textzz'> <center><INPUT TYPE='SUBMIT' VALUE='戻る' ></center> </form> "); } ?>
ポイントは最後のフォームを「送信する」「戻って修正する」のところで、改良前は
<INPUT TYPE='BUTTON' VALUE = '戻る' onClick='history.back()' >
のところが
<form method='post' action='index2.php'> ・ ・ (中略) ・ ・ <center><INPUT TYPE='SUBMIT' VALUE='戻る' ></center>
って言う風にhistory.backじゃなくてpostのSUBMIT使って、情報を受渡してるところですね!
続いて
index2.php
これは一応全部ね。htmlとphp混在してるから。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>フォーム入力画面</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <link rel="stylesheet" href="css/style.css" /> </head> <body> <h1>フォーム入力画面</h1> <?php //値を最初にクリアしとく $groupzz = ''; $namesei = ''; $namemei = ''; $mailzz = ''; $telzz = ''; $numberzz = ''; $textzz = ''; //各項目前ページから内容があれば入れる if ($_POST) { $groupzz = $_POST["groupzz"]; } if ($_POST) { $namesei = $_POST["namesei"]; } if ($_POST) { $namemei = $_POST["namemei"]; } if ($_POST) { $mailzz = $_POST["mailzz"]; } if ($_POST) { $telzz = $_POST["telzz"]; } if ($_POST) { $numberzz = $_POST["numberzz"]; } if ($_POST) { $textzz = $_POST["textzz"]; } ?> <form name="form1" method="post" action="Confirm.php"> <p><font color="#ff0000">*</font>は必須項目です</p> ▼団体名(任意)<br> <input name="groupzz" type="text" value="<?= htmlspecialchars($groupzz, ENT_QUOTES, 'Shift_JIS'); ?>"> ▼お名前<font color="#ff0000">*</font><br> 姓 <input type="text" name="namesei" value="<?= htmlspecialchars($namesei, ENT_QUOTES, 'Shift_JIS'); ?>"> <br>名 <input type="text" name="namemei" value="<?= htmlspecialchars($namemei, ENT_QUOTES, 'Shift_JIS'); ?>"> ▼メールアドレス<font color="#ff0000">*</font><br> <input type="text" name="mailzz" value="<?= htmlspecialchars($mailzz, ENT_QUOTES, 'Shift_JIS'); ?>"> ▼電話番号<font color="#ff0000">*</font><br> <input type="text" name="telzz" value="<?= htmlspecialchars($telzz, ENT_QUOTES, 'Shift_JIS'); ?>"> ▼人数<font color="#ff0000">*</font><br> <select name="numberzz"> <option value="">---</option> <option value="1名">1名</option> <option value="2名">2名</option> <option value="3名">3名</option> <option value="4名">4名</option> <option value="5名">5名</option> </select> ▼内容<font color="#ff0000">*</font><br> <textarea name="textzz" ><?= htmlspecialchars($textzz, ENT_QUOTES, 'Shift_JIS'); ?>"</textarea> <p> <input type="submit" value="確認画面に進む"> </p> </form> </body> </html>
こっちのポイントはフォームの中でvalueの中に受け取ったこれまでに入力された内容を入れてるところです。
<input name="groupzz" type="text" value="<?= htmlspecialchars($groupzz, ENT_QUOTES, 'Shift_JIS'); ?>">
これによって、自分で入力したデータがフォームの中に入るよね!ってことです。
めでたしめでたし!!
技術評論社
売り上げランキング: 68,078
ソフトバンククリエイティブ
売り上げランキング: 16,761
関連記事
-
【WordPress】Contact Form 7で送信できないからWP-Mail-SMTPで対策!でもgoogle appsのsmtpの設定がわからない人のためだけの記事
タイトル長い。うざい。 って思っても、この記事にたどり着いたってことは似たような悩みをお抱えな
-
lightbox(ライトボックス)のバージョン2.51からPrototypeじゃなくてjQueryになったから設置の時注意
lightbox(ライトボックス)について前記事を書きました。 lightboxって何?って感
-
【PHP,WordPress,Contactform7】ユーザーエージェント(UA)から「デバイス(PC,スマホ,タブレット)」「OS」「ブラウザ」を取得する→これをContactform7に実装
ユーザーエージェント(UA)から「デバイス(PC,スマホ,タブレット)」「OS」「ブラウザ」
-
iPhone5水没 エクスプレス交換サービスで秒速で4,400円(税込)で新品に変わる~AppleCareにより~
今日も元気だ!お酒が旨い。 というわけで尿路結石の激痛で死にかけたのはどこ吹く風と暴飲暴食をし
-
RapidSSLをさくらインターネット専用サーバ(CentOS5)セットアップおよび更新覚書
タイトルそのまんま。 丁度sslの更新だったんですが、今回記憶を辿るのが大変でした。 次
-
HP Mini 210-1000 ネットブック メモリ増設 1GB→2GB (I-O DATA PC2-6400 (DDR2-800) S.O.DIMM 2GB SDX800-2G/EC)
この記事を読む前に、、、 みんなの合言葉 自己責任で!!! すごく限定的な使い
-
Ktai Styleのテスト
Ktai StyleというWordPressのプラグインの動作テストです。 画像も入れてみる。
-
注文住宅(マイホーム)購入ならスーモカウンターがおすすめ(賛否あるけど) 1/3
注文住宅紹介サービス「スーモカウンター」とは? 現在注文住宅を建てようと計画中です。 貧
-
Amazonの神対応に触れて~月曜始まり縦6行カレンダーはおすすめよ~
おじいちゃんに囲碁の本が欲しいって言われたからアマゾンで買うねって言ったら「そんな遠くまで行かなくて
-
注文住宅(マイホーム)購入ならスーモカウンターがおすすめ(賛否あるけど) 2/3
注文住宅(マイホーム)購入ならスーモカウンターがおすすめ(賛否あるけど) 1/3
Comment
参考にさせていただきました!
ありがとうございます!
function h($s)
{
return htmlspecialchars($s, ENT_QUOTES, “UTF-8”);
}
関数を一度設定すると、何度も長いコードを書かなくて(ペースト)する必要がなくなると思います!
お互いがんばりましょう!
コメントありがとうございます。
ご指摘確かにですね(笑)
すいません。日々勉強です(^_^;)