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で開発環境と公開環境でドメイン、フォルダが変わる場合の不具合
baserCMSで開発環境と公開環境でドメインが変わる場合は URLに絡む設定を変更する必要がありますのでその解説です。
-
baserCMSでサイトの構築をしてみることにしました
baserCMSでサイトの構築をしてみることにしました。baserCMSを選んだ理由とそれを XAMPP環境に設置する方法などを説明しています。
-
baserCMS favicon.icoを変更したい場合
baserCMS favicon.icoを変更したい場合の参考サイトとそれでも直らない場合の対応方法についての説明です。
-
baserCMS サイト管理者権限でファイルアップロードを行う・権限設定の詳細について
Admin権限以外の権限でファイルをアップロード、ページの更新をする際の権限設定の仕方と、権限設定全般についての設定のコツについて解説しています。
-
baserCMS getCategoryの使い方について
baserCMS getCategoryの使い方についての説明です。公式サイトの説明ではわかりにくいところを補足説明しています。
-
baserCMS 画面が真っ白になる不具合があった場合の対応の一つ
baserCMSで画面が真っ白になる不具合があった場合の対応方法の説明です。PHPでエラーが起こっている場合がほとんどですが、その対処方法です。
-
baserCMS トップページのニュースの部分をメンテナンスしたい場合
トップページのニュース部分をメンテナンスする場合の具体的な方法をサンプルソースを用いて解説しています。
-
baserCMS ブログカテゴリーの表示を柔軟な形で取得する方法
baserCMSのgetCategoryListではなくもっと柔軟に利用できる方法でブログカテゴリを取得する方法をサンプルコードを用いて説明をしています。
-
baserCMSでwp_is_mobileと同じスマホ振り分け関数を実装
baserCMS版 wp_is_mobile関数です。Google Adsenseの規約対応のためにも必要な関数です。
-
baserCMSをほかのサーバ、環境にコピーする場合
baserCMSを他のサーバ、環境にコピーする場合の設定方法について説明します。