エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


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

      2014/06/26

フォームのボタンを画像に変えたい場合

 

フォームのボタンを画像に変える方法

 
baserCMSですが、お問い合わせフォームのボタンは、テキストで記述されています。
これを画像に変えたい!そういう要望はそれなりにあるのかと思いますが、変更の方法がマニュアルなどに掲載されていないため、かなり悩みましたが、その対応方法を書いておきます。
(ボタンのテキストを変えたい!というときも参考になるでしょう。)
 
 
ボタンの情報の記述は、下記ファイルにあります。
 /baser/plugins/mail/views/elements/mail_form.php
 
69行目、70行目が入力確認ページのボタンで、72行目が入力ページのボタンですが、下記は 72行目の入力ページのボタンをサンプルで書いています。
 
————-

————-
 ↓このように修正
————-

————-
 
修正ポイントは、テキストで表示される「 入力内容を確認する 」を「aaaaa.jpg」の様にファイル名に変更するだけです。実に簡単!
 
使用する画像は「/app/webroot/themed/{テーマ名}/img/」のフォルダに入っていれば、ファイルのパスも記述する必要もなく、自動的にパスも付与されます。
必要であれば、下記の様に「’alt’ => ‘ 入力内容を確認する ’」を追加し、画像の altを追加することもできます。
 
 

ボタンを画像に変える方法は簡単でも説明がない

 
対応方法は分かってみれば至極簡単な方法なのですが、ボタンを画像にするだけなのにここに行きつくまでに 3時間~4時間も試行錯誤してしまいました...
 
※この対応を行うと、すべてのボタンが共通して変更してしまいますので、フォームごとにボタンを変えたい場合は、ページによって分岐する処理を作る必要があるでしょう。(もしくはテンプレートファイルを分岐させる処理が必要でしょう。)
 
 
※ボタンの文言に修正したい場合は、単純にテキストを変更しましょう。
 画像にする場合と同様に、フォームごとにボタンのテキストを変える場合も分岐が必要になりますね。
 
※画像のファイル名が違っていたり、画像が「img」フォルダの中にない場合は、「実行」というよくあるボタンが表示されます。その場合は、画像の場所、ファイル名を確認してみてください。
 
 

リセットボタンは削除しましょう

 
ちなみに、65行目~67行目にある下記の入力のリセットをするボタンの処理ですが、フォームのコンバージョンをアップするためには削除しておくべきですね。
————-

————-
 
まるっと削除してもいいですし、下記の様にコメントアウトしてもいいでしょう。
————-

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

 - baserCMS

GoogleAdwords

GoogleAdwords

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

※入力いただいたコメントは管理者の承認後に掲載されます。

  関連記事

baserCMS getCategoryListの使い方について

baserCMS getCategoryListの使い方についての詳細説明です。公式サイトの説明では分かりにくい部分を補足説明しています。

baserCMSでサイトの構築をしてみることにしました

baserCMSでサイトの構築をしてみることにしました。baserCMSを選んだ理由とそれを XAMPP環境に設置する方法などを説明しています。

baserCMS 3系でテーマが変更されないのはキャッシュが原因

baserCMS 3系ではキャッシュの処理が原因でテーマを変更したけども変更されないという不具合があります。

baserCMS トップページのニュースの部分をメンテナンスしたい場合

トップページのニュース部分をメンテナンスする場合の具体的な方法をサンプルソースを用いて解説しています。

baserCMS ブログカテゴリーの表示を柔軟な形で取得する方法

baserCMSのgetCategoryListではなくもっと柔軟に利用できる方法でブログカテゴリを取得する方法をサンプルコードを用いて説明をしています。

baserCMS favicon.icoを変更したい場合

baserCMS favicon.icoを変更したい場合の参考サイトとそれでも直らない場合の対応方法についての説明です。

baserCMSは 3種類のデバッグモードが用意されています

デバッグモードは3種類あります。デバッグモードにすることでキャッシュされなくなりますので、開発の際には必須の設定です。

baserCMS ID以外のカラムでアソシエーション(連携)をさせる場合

baserCMSで ID以外のカラムでアソシエーション(連携)させる方法と注意点を解説しています。CakePHPとは動作に差異があり注意が必要です。

baserCMSをほかのサーバ、環境にコピーする場合

baserCMSを他のサーバ、環境にコピーする場合の設定方法について説明します。

baserCMSでオリジナルのデータベースから情報を取得する場合

オリジナルで作ったテーブルから情報を取得し利用する場合はプラグインとして機能を拡張することで対応出来ます。その方法について説明しています。