ブログ・エス技研

当ブログは引越しをしました。10秒後に自動で転送しますが、転送されない場合は、http://blog.s-giken.net/ をご覧ください。
ブログ・エス技研 TOP  >  スポンサー広告 >  baserCMS >  baserCMS お問い合わせフォームのボタンを画像に変えたい場合(ボタンのテキストを変えたい!っていう場合も)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --年--月--日 --:-- ] カテゴリ:スポンサー広告 | TB(-) | CM(-)

baserCMS お問い合わせフォームのボタンを画像に変えたい場合(ボタンのテキストを変えたい!っていう場合も)

baserCMSですが、お問い合わせフォームのボタンは、テキストで記述されています。
これを画像に変えたい!そういう要望はそれなりにあるのかと思いますが、変更の方法がマニュアルなどに掲載されていないため、かなり悩みましたが、その対応方法を書いておきます。
(ボタンのテキストを変えたい!というときも参考になるでしょう。)


ボタンの情報の記述は、下記ファイルにあります。
 /baser/plugins/mail/views/elements/mail_form.php

69行目、70行目が入力確認ページのボタンで、72行目が入力ページのボタンですが、下記は 72行目の入力ページのボタンをサンプルで書いています。

-------------
<?php echo $mailform->submit(' 入力内容を確認する ', array('div' => false, 'class' => 'btn-orange button form-submit', 'id' => 'BtnMessageConfirm'))  ?>
-------------
 ↓このように修正
-------------
<?php echo $mailform->submit( 'aaaaa.jpg', array('alt' => ' 入力内容を確認する ', 'div' => false, 'class' => 'btn-orange button form-submit', 'id' => 'BtnMessageConfirm'))  ?>
-------------

修正ポイントは、テキストで表示される「 入力内容を確認する 」を「aaaaa.jpg」の様にファイル名に変更するだけです。実に簡単!

使用する画像は「/app/webroot/themed/{テーマ名}/img/」のフォルダに入っていれば、ファイルのパスも記述する必要もなく、自動的にパスも付与されます。
必要であれば、下記の様に「'alt' => ' 入力内容を確認する '」を追加し、画像の altを追加することもできます。



対応方法は分かってみれば至極簡単な方法なのですが、ボタンを画像にするだけなのにここに行きつくまでに 3時間~4時間も試行錯誤してしまいました...

※この対応を行うと、すべてのボタンが共通して変更してしまいますので、フォームごとにボタンを変えたい場合は、ページによって分岐する処理を作る必要があるでしょう。(もしくはテンプレートファイルを分岐させる処理が必要でしょう。)


※ボタンの文言に修正したい場合は、単純にテキストを変更しましょう。
 画像にする場合と同様に、フォームごとにボタンのテキストを変える場合も分岐が必要になりますね。

※画像のファイル名が違っていたり、画像が「img」フォルダの中にない場合は、「実行」というよくあるボタンが表示されます。その場合は、画像の場所、ファイル名を確認してみてください。



ちなみに、65行目~67行目にある下記の入力のリセットをするボタンの処理ですが、フォームのコンバージョンをアップするためには削除しておくべきですね。
-------------
<?php if($this->action=='index'): ?>
	
<?php endif; ?>
-------------

まるっと削除してもいいですし、下記の様にコメントアウトしてもいいでしょう。
-------------
<?php /* if($this->action=='index'): ?>
	
<?php endif; */ ?>
-------------

※コンバージョンアップのためには、入力する項目を減らす、不必要なリンクを減らす、といった対策に加え、「リセットボタン」は使わないということも重要だそうです。

関連記事
スポンサーサイト
[ 2013年11月13日 23:03 ] カテゴリ:baserCMS | TB(0) | CM(0)
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

プロフィール

エス技研

Author:エス技研
性別:男性
職業:Web系エンジニア
エンジニアになって 15年ほど経ちますが、その途中で 5年ほどディレクタ、マネジメントを中心とした業務を行っていたためにやや現場を離れていましたが、転職をきっかけに 2012年に現場に復帰し、新たな技術を楽しみながら勉強しています。
メインの環境は LAMP環境です。

FC2ブログランキング
FC2カウンター
FC2拍手ランキング
GoogleAdWords
カレンダー
04 | 2017/05 | 06
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
検索フォーム
ブロとも申請フォーム
QRコード
QR
フリーエリア


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。