前回の記事同様、Concrete5についているフォームブロックには結構不満があってですね。
送信ボタン押した時に、ページの先頭に行っちゃうんですよ。
例えば「お問い合わせ」っていうお問い合わせ専門のページを作って、コンテンツ部分はフォームのみしか存在しないっていう場合は、ページの先頭に戻ってもウインドウ上にはフォームのエリアが見えているから、エラーがあった場合や、確認画面、完了画面も見えるから言う程問題じゃないんですが、
縦1000pxくらいの紹介コンテンツがあって、「申し込みは以下のフォームから」みたいなフォームを含むページの場合、送信ボタンをクリックした後にページの先頭に戻ってしまうと「あれ？これ送信できたのかな？」って思って改めてそこまでスクロールして見てもらわなきゃいけないという、ユーザに負担をかけるユーザビリティ的に非常に粗悪なものになってしまう訳です。
で、どうしたもんかなーと考えたあげく、フォームブロックのカスタムテンプレートではどうにもなりませんでした。
というのも、submitボタンクリックした時点で、フォームのID取得のためにURL内に「#」が使われてて、フォーム部分へスクロールするためのhtml側の「#」が重複して使用出来ないっていうのがあって、もう私諦めようと思いました。
お客さんには説明して、「フォームだけは別ページにしてもらえませんか」って懇願して、許してもらおうと思ったんですが、
今をときめくjavascriptちゃんなら！javascriptちゃんならきっとなんとかしてくれるッ！と思い、試してみました。
[javascript]
$(function(){
var getURL = location.href; //URLを取得
var contactScroll = $(‘#contact’).offset().top; //#contactの位置を取得
if ( getURL.indexOf( "submit_form#" ) != -1 ) { //indexOfでURL内に含まれる文字列"submit_form#"を検索して、存在した場合の処理
window.scrollBy(0, contactScroll); //ウインドウを#contactの位置までスクロール
}
});
[/javascript]
前述の様に、フォームブロックでフォームIDを取得してURLに#が使われてるなら、URLに入ってるフォームIDを逆手にとってやろうと。
↓フォームの送信ボタンをクリックしたら、URLにクッソ長いパラメータが付くのですが、共通して「cID」とか「stackID」とかが存在します。
https://www.xxxxxx.xcom/index.php?cID=1&stackID=169&bID=69&btask=passthru_stack&ccm_token=1363257182:45a7934ae05865ab764c648a45552a6b&method=submit_form#1363252323&listbeginp=
フォームのブロックに必ずつくのは「submit_form#」なので、javascriptでURL内を検索して「submit_form#」があったら「#contact」の場所までウインドウをスクロールしてやれば良いと気づいたんです！
あぁ、解決できてホント良かった！！