ページ内の任意の情報をCookieに保存してContactForm7のフォームに引き継ぐ方法

2017年01月05日 17時24分

リクルートのページで「リクルート末端（募集要項）」→「応募ページ」に遷移する時に末端（募集要項）のなんかしらの情報をCookieに保存し、応募ページで生成したContactForm7のフォームへと情報を引き継ぐってのをやったので備忘録。これほんと僕はメンドイから全然やらないので絶対忘れそうだ・・・

今回やるイメージ

今回やるのはこんなの。ページAの「応募」ボタンを押してページBの応募フォームに移動した時にページAのタイトルをページBの応募フォームの「応募タイトル」に自動で入れる！という感じ。Cookieの取り扱いって面倒なイメージが有るが（僕だけ？）jQueryなら簡単に出来たはず・・・確か。

ちなみに超簡単に実装しているのでセキュリティ面の事は不明（爆）まぁ重要な情報をCookieに保存してるわけじゃないので問題無いと思うが、その辺は各自にお任せ。

Cookieの取り扱いは「jQuery.Cookie.js」というのを使用。いやはやほんとメチャクチャ簡単にCookieの読み書きが出来てビックリ。これは便利だ・・・使い方は以下のサイトで完結しているのでまずは下記サイトをご参照あれ。

ではここから作業。

jQueryとjquery.cookie.jsをヘッダーに読み込ませたら、ページA（応募フォーム）のコードを改造していく。流れ的には「応募する」ボタンを押した際にCookieにページタイトルを保存するという感じ。

//jsコード


//htmlコード

応募する

こんなんですな。#btn-entryのボタンをクリックしたらrecruitnameという名前のCookieにthe_titleで取得したページタイトルが入るという具合。ページタイトルカブるーって場合はカスタムフィールドでなんか任意のユニークコード作ったら良いかもね。

コードを入れたら応募ボタンを押してCookieがブラウザにちゃんと保存されたか確認。Chromeならアドレスバーに

chrome://settings/cookies

って入れてエンターキーを押せばCookie一覧が出て来るので、サイトのURLで検索すればローカルに保存されたCookieの情報が表示される。

見てみると、Cookieの名前に指定した「recruitname」ってのとコンテンツがちゃんと入ってますね！日本語なのでエンコードされてて見えませんが大丈夫でしょう。

最後はContactForm7で作ったページBの応募フォームに入れるだけ。予めCookieの情報を入れたいフォームには任意のidを振っておきましょう。僕は#recruit-titleとしました。

完成！！これでページAのタイトルがCookieで引き継がれてページBのフォームに引き継がれて入力されていると思います！なんだこれ超簡単！！

ちなみにCookieは上書きされるのでクッキーが有る場合は消すみたいな処理は全然入れておりませんが、多分大丈夫でしょう（場合によっては条件分岐せんなんかもですがそこは各自任意で頑張って下さい！）

今回の案件は僕の手持ちじゃないのでこんな遷移にしましたが、個人的にはやっぱページ遷移するのメンドイし嫌い（笑）

ページAの応募概要ページの下にそのままフォーム埋め込めば別にCookie使って遷移の処理入れなくても良いし、応募フォームだけのページもいらないし、ユーザーも遷移する必要無いし、無駄なパケット食わないし・・・などなど。

そういえばせっかくWordPressサイトなのでPHPでCookie処理した方が面白かったのかな・・・今度やるときはPHPを使ったCookie処理に挑戦してみようかな。

SPONCERD

コメントはまだありません