baserCMS お問い合わせフォームのボタンを画像に変えたい場合(ボタンのテキストを変えたい!っていう場合も)
2014/06/26
フォームのボタンを画像に変えたい場合
フォームのボタンを画像に変える方法
baserCMSですが、お問い合わせフォームのボタンは、テキストで記述されています。
これを画像に変えたい!そういう要望はそれなりにあるのかと思いますが、変更の方法がマニュアルなどに掲載されていないため、かなり悩みましたが、その対応方法を書いておきます。
(ボタンのテキストを変えたい!というときも参考になるでしょう。)
ボタンの情報の記述は、下記ファイルにあります。
/baser/plugins/mail/views/elements/mail_form.php
69行目、70行目が入力確認ページのボタンで、72行目が入力ページのボタンですが、下記は 72行目の入力ページのボタンをサンプルで書いています。
————-
1 |
<?php echo $mailform->submit(' 入力内容を確認する ', array('div' => false, 'class' => 'btn-orange button form-submit', 'id' => 'BtnMessageConfirm')) ?> |
————-
↓このように修正
————-
1 |
<?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行目にある下記の入力のリセットをするボタンの処理ですが、フォームのコンバージョンをアップするためには削除しておくべきですね。
————-
1 2 3 |
<?php if($this->action=='index'): ?> <input name="resetdata" value=" 取り消す " type="reset" class="btn-gray button" /> <?php endif; ?> |
————-
まるっと削除してもいいですし、下記の様にコメントアウトしてもいいでしょう。
————-
1 2 3 |
<?php /* if($this->action=='index'): ?> <input name="resetdata" value=" 取り消す " type="reset" class="btn-gray button" /> <?php endif; */ ?> |
————-
※コンバージョンアップのためには、入力する項目を減らす、不必要なリンクを減らす、といった対策に加え、「リセットボタン」は使わないということも重要だそうです。
GoogleAdwords
GoogleAdwords
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!
関連記事
-
baserCMSは 3種類のデバッグモードが用意されています
デバッグモードは3種類あります。デバッグモードにすることでキャッシュされなくなりますので、開発の際には必須の設定です。
-
baserCMSのメルマガで当サイトが紹介されていたようです
baserCMSのメルマガで当サイトが紹介されていたようです。非常にありがたく、嬉しく思っており、今後も baserCMSが少しでも広がっていくお手伝いをさせていただければ、と思っています。
-
baserCMS getCategoryListの使い方について
baserCMS getCategoryListの使い方についての詳細説明です。公式サイトの説明では分かりにくい部分を補足説明しています。
-
baserCMSをほかのサーバ、環境にコピーする場合
baserCMSを他のサーバ、環境にコピーする場合の設定方法について説明します。
-
baserCMS ID以外のカラムでアソシエーション(連携)をさせる場合
baserCMSで ID以外のカラムでアソシエーション(連携)させる方法と注意点を解説しています。CakePHPとは動作に差異があり注意が必要です。
-
baserCMSでサイトの構築をしてみることにしました
baserCMSでサイトの構築をしてみることにしました。baserCMSを選んだ理由とそれを XAMPP環境に設置する方法などを説明しています。
-
baserCMS ブログカテゴリーの表示を柔軟な形で取得する方法
baserCMSのgetCategoryListではなくもっと柔軟に利用できる方法でブログカテゴリを取得する方法をサンプルコードを用いて説明をしています。
-
baserCMS favicon.icoを変更したい場合
baserCMS favicon.icoを変更したい場合の参考サイトとそれでも直らない場合の対応方法についての説明です。
-
baserCMS 画面が真っ白になる不具合があった場合の対応の一つ
baserCMSで画面が真っ白になる不具合があった場合の対応方法の説明です。PHPでエラーが起こっている場合がほとんどですが、その対処方法です。
-
ロリポップで baserCMSを利用する際の Basic認証の設置には注意しましょう
ロリポップではBasic認証を設置する際に.htaccessを書き換えますがbaserCMSで利用する処理も上書きされます。その対処方法の解説です。