リピーターの方に便利!予約フォーム等の離脱防止に!cookieをJavaで保存 | 佐渡の洋食屋店長のブログ

佐渡の洋食屋店長のブログ

佐渡の洋食屋店長のマニアックなブログです。 グルメネタは少なく、マニアックなネットTEC的なネタ、佐渡ネタが豊富なブログです。

佐渡の洋食屋店長のブログ-javascript cookie

以前から、佐渡の老舗旅館 ご縁の宿伊藤屋の予約フォームでリピーターの方にいちいち入力してもらうのが、不便だなぁと思っていて・・・解決策がわからず、ほったらかしだったわけですが・・・。

逃げてはだめだ。。。逃げてはだめだ。。。逃げてはだめだ。。。逃げてはだめだ。。。逃げてはだめだ。。。逃げてはだめだ。。。逃げてはだめだ。。。逃げてはだめだ。。。逃げてはだめだ。。。逃げてはだめだ。。。逃げてはだめだ。。。逃げてはだめだ。。。逃げてはだめだ。。。逃げてはだめだ。。。逃げてはだめだ。。。逃げてはだめだ。。。逃げてはだめだ。。。逃げてはだめだ。。。逃げてはだめだ。。。逃げてはだめだ。。。

ということで・・・やっちゃいました。
そして出来ちゃいました。
意外と簡単にね♪

JavascriptでCookieを保存&読み込みすればいいのですよね。
今まで会員登録させようか・・・でも、それってなんかお客様にとっても束縛してるようで、なんとなく嫌だし、CGI組むといろいろと面倒なことになるし・・・システム的にも保存のセキュリティ的にも、ちょっとなぁ・・・ということで、JavascriptでCookie実装させました。

仕組みは簡単で、フォームのsubmitボタンを押すと、Cookieが保存されます。
以後はサイトを開けば勝手に過去入力したフォーム情報を読み込んでくれます。
ちなみに、お客様のパソコンにCookie情報が保存されるので安心。

当館のリピーターの方は、直接電話でお申込みする方が多いのですけども、中には毎回入力フォームからお申込みいただくお客様もいらっしゃるので、利便性向上ということで導入いたしました。


■javascript cookie保存・読み込み導入方法
導入は簡単です。
フォーム入力ページのソースの</head>タグの前に以下コードをコピペで終了。

<script type="text/javascript">
var key = 'SetFormData';
function SetCookie() {
var p = new Array();
var d1 = document.getElementsByTagName('input');
for (var i = 0; i < d1.length; i++) {
if (d1[i].type == 'text') p.push(d1[i].id + '&' + escape(d1[i].value));
}
var ssl = (document.location.protocol == 'https:') ? ';secure' : '';
document.cookie = key + '=' + p.join('|') + '|_EOD;' + ExpDate(360) + ssl;
}
function ExpDate(t) {
exp = new Date();
exp.setTime(exp.getTime() + 1000*60*60*24*t);
return 'expires=' + exp.toGMTString();
}
function SetParam() {
if (document.cookie) {
var k = key + '=';
var p = new Array();
var c = document.cookie;
var st = c.indexOf(k, 0);
var ed = c.indexOf('|_EOD', 0);
var d = c.substring(st + k.length, ed);
p = d.split('|');
for (var i = 0; i < p.length; i++) {
v = p[i].split('&');
if (v[1]) document.getElementById(v[0]).value = unescape(v[1]);
}
}
}
window.onload = SetParam;
window.onsubmit = SetCookie;
</script>



実験してみたい!という方はこちらの予約フォーム予約月を入力せずに、決定ボタンを押してみてください。F5ボタンでリロードしても、入力情報が補完されると思います。
もし正しく機能してないよ!というツッコミがございましたら、コメントください。

さて、次はFacebookアプリからの予約フォームについて・・・を記事にしたいと思います。


このブログの更新情報をFacebookで購読できます。
↓↓


ブログ読者登録はこちらです。
↓↓
読者になる