*

【PHP】メールフォーム　一度入力した内容が消えてしまう時　POST使って入力内容を保持　～メールフォームパッケージダウンロードあり～

公開日： : 最終更新日：2013/06/24 how to, ウェブ・ネット・PC（パソコン）, サーバ・プログラム

前に、

【PHP】スマホ対応　メールフォーム設置　PEARを使ってgmailのsmtpサーバで送信する（ダウンロード可能）

っちゅう、クソ長ったらしいやつ書きまして。。。

まあこれでメールフォーム（お問い合わせフォーム）はある程度良いのですが一つ問題が。。。

例えばこんな感じでフォーム入力します。


form01

「電話番号は営業の電話とかうっとおしいから入れたくないな」なんて感じで必須項目だったけど入力しなかった場合、

form02

こんな感じでエラーが返されます。

「しょうがねえなあ、入れるか」と戻るボタンを押すと、

form03


叫びの壷　（ツボ　つぼ）
なんでじゃーーーーー！


これまでに苦労して入力した内容が消えてしまうってことが起こってしまうのでした。

叫びの壷（叫びの壺）
叫びの壷（叫びの壺）
posted with amazlet at 13.06.21
ドリーム
売り上げランキング: 102,079
Amazon.co.jpで詳細を見る


これは非常にもったいないです。

せっかく自分のサイトでお問い合わせまでしてくれているのに、


C777_senbeiwotabeteMBA

もういいや、メンドクサイ

ってなったら、超もったいないです。





で、対策を考えなければ！

なんですが、僕みたいに何も考えずにお問い合わせフォーム作っていて、、、

◆入力した内容の間違えに気づいたり
◆エラー（必須項目未入力とか）

で、戻った時にこれまで入力した内容が消える場合と消えない場合があるのですが、これはブラウザに依存する、それすわち

相手（の設定や環境）に依存する

というわけです。




サービスの提供者としては相手側の設定によって挙動が変わったりするのはやっぱり良くないです。

ウェブサイトのブラウザ対応についても

うちのサイトは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っていうので、しっかり保持をしよう、というアプローチで作りました。

と、僕があみだしたみたいに言ってるけど、よくやる方法です。





そして、改良したのがこちら。

ご自由にダウンロードして頂いて、自分のサイトに実装してみてね(^^ゞ

button_download_orange








パッケージ内容ですが、

new_kaiso

前回から変わったのが、

◆Confirm.phpを修正
→戻ったり、内容を修正するときも、入力したデータを保持するようにした。

◆index2.phpを追加
→Confirm.phpから保持されたデータを受け取れる用にhtmlじゃなくてphpファイルを用意

てな感じです。



全体のフローとしては、

phpflow


てな感じです。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'); ?>">

これによって、自分で入力したデータがフォームの中に入るよね！ってことです。

めでたしめでたし！！






即戦力になるための PHPシステム開発の教科書
即戦力になるための PHPシステム開発の教科書
posted with amazlet at 13.06.21
マッキーソフト株式会社
技術評論社
売り上げランキング: 68,078
Amazon.co.jpで詳細を見る


PHPによるWebアプリケーションスーパーサンプル 第2版
PHPによるWebアプリケーションスーパーサンプル 第2版
posted with amazlet at 13.06.21
西沢 直木
ソフトバンククリエイティブ
売り上げランキング: 16,761
Amazon.co.jpで詳細を見る


ドカベン 文庫版 全31巻 完結セット(秋田文庫) [コミックセット]
ドカベン 文庫版 全31巻 完結セット(秋田文庫) [コミックセット]
posted with amazlet at 13.06.21
水島 新司
秋田書店
Amazon.co.jpで詳細を見る

関連記事

512px-Tux.svg

【CentOS,vsftp,Linux（UNIX）】FTPユーザーアカウントの作成とディレクトリのアクセス制限覚書

外注先にサイトの作成やシステムの構築などを依頼する場合に、特定のディレクトリ（フォルダ）以外にアクセ

記事を読む

7463062672_3c75a70543_z

Dropbox proが1TBで1,200円/月（年払い12,000円）とかいうギャグで、クラウドでバックアップツールとして最強過ぎる件　世代管理もできるという

クラウドストレージの老舗Dropboxがギャグを展開中（笑） Dropbox / IN 30

記事を読む

IMG_0700

zenbookのACアダブターを間違えて買ったので、プラグだけ買って作り直すの巻

zenbookかっちょいいですね！MacBook Airのパクリインスパイア系のウルトラブッ

記事を読む

51BWJS4n5CL._BO2,204,203,200_PIsitb-sticker-arrow-click,TopRight,35,-76_AA300_SH20_OU09_

注文住宅（マイホーム）購入ならスーモカウンターがおすすめ（賛否あるけど）　3/3

注文住宅（マイホーム）購入ならスーモカウンターがおすすめ（賛否あるけど）　1/3 注文住宅（マイホ

記事を読む

愛車　エブリー

20年戦士のオンボロ愛車をパワーアップ（スズキ・エブリーにNARDI取り付け）

少し前にカーステを取り替えた愛車の青春カー！ ※青春カーの命名はN君です。

記事を読む

【結婚式二次会のゲームなどにおすすめ】めくりフリップ　自作　手作り　作り方　材料　で検索にひっかかれ！！

先日友達の結婚式の二次会の幹事をやりました。 その中でゲームの中でめくりフリップあった方がいい

記事を読む

ua1

【PHP】ユーザーエージェント（UA）から「デバイス（PC,スマホ,タブレット）」「OS」「ブラウザ」を取得する

ユーザーエージェントとは、サイトにアクセスしてきたユーザーの情報を表したものです。 こちらのペ

記事を読む

line

【jQuery】Chart.jsを使って簡単にカッコイイレーダーチャートを実装するの巻

友達の結婚式のプロフィールムービーが終わって一息ついていた頃。。。 いつもお世話になっている弁

記事を読む

kaiso

【PHP】スマホ対応　メールフォーム設置　PEARを使ってgmailのsmtpサーバで送信する（ダウンロード可能）

メールフォーム（お問い合わせフォーム）をサイトに設置したいというのはよくあります。 で、フォー

記事を読む

美女Linux

美女Linuxのブログパーツをこのブログに入れた。そんだけ。。。

このブログもいろいろ寂しいので、少しでも華やかにしようかなと思いまして。。。 美女Li

記事を読む

Message

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

PREV
天才クリエイターさんと飲んで来ました！～人と仕事が集まる～
NEXT
google Analytics（グーグルアナリティクス）で、自分を除外したいけど、スマホだとIP変わっちゃうよ(>_<)ってときの対処方

  • 中の人

    高橋拓郎（30歳）
    愛知県知多市生まれ。
    大学在学中に個人で始めた事業を、大学院中退後法人化（法人化のために中退が正しいかも）。
    簡単にコンタクトとれるのでt@takuro.infoまで何か御用があればなんなりと。
    ブログの感想やご意見も大歓迎です！

  • カテゴリー

NEW ENTRY

1280px-IS01_open
「いま、IS01を想う。」に想う。。。おっさんくさい話。

川脇議員に貴重なお時間を割いていただき、インタビューをさせて頂いたので

インタビュー中の川脇議員
知多市議会議員「川脇ひろゆき議員」を訪ねて～その1 選挙所感と市議会議員のお仕事とは？～

中々文字起こしって大変なのね。 というわけで時間が死ぬほどかかっ

出陣式の様子（本人提供）
知多市議会議員「川脇ひろゆき議員」を訪ねて～プロローグ～

先の統一地方選挙では、無投票当選が乱発したことでも話題になりました。

cf7
【PHP,WordPress,Contactform7】ユーザーエージェント（UA）から「デバイス（PC,スマホ,タブレット）」「OS」「ブラウザ」を取得する→これをContactform7に実装

ユーザーエージェント（UA）から「デバイス（PC,スマホ,タブ

ua1
【PHP】ユーザーエージェント（UA）から「デバイス（PC,スマホ,タブレット）」「OS」「ブラウザ」を取得する

ユーザーエージェントとは、サイトにアクセスしてきたユーザーの情報を表し

→もっと見る

  • AdSense

  • 楽天市場

PAGE TOP ↑