EC-CUBEで最初にやっておきたい10のカスタマイズ・3「フォームの必須入力項目をわかりやすくする」

読了時間:約 6分36秒

EC-CUBEで最初にやっておきたい10のカスタマイズ・3「フォームの必須入力項目をわかりやすくする」

引き続き、EC-CUBEを使ってECサイトを構築するときに、ぜひともやっておきたいカスタマイズをご紹介します。

今日は、「3.フォームの必須入力項目をわかりやすくする」です。

 

EC-CUBEの入力フォームは、入力必須項目に「 」が付いているだけで、ちょっとわかりにくいと思うんです。

 

買い物カゴの入力画面が使いにくいと、いわゆる「カゴ落ち」につながってしまいます。ここはきちっと、ユーザビリティを上げておきましょう。

もくじ

 

カスタマイズのイメージ

まず、カスタマイズ前の入力フォームはこんな感じです↓

カスタマイズ前の入力フォーム

 

 

これを、カスタマイズして「必須」と「任意」の項目をわかりやすくしたのがこちらです↓

カスタマイズ後の入力フォーム

(「性別」と「職業」の欄は、前回の記事「2.お客様情報入力から性別選択の必須をはずす」で非表示にしています。)

 

すべての項目に「必須」もしくは「任意」どちらかのマークをつけることで、その項目が「必須」なのか「任意」なのかを明確にしています。

 

アイコン画像を用意しよう

まず、「必須」と「任意」のアイコン画像を用意します。

よろしければこちらの画像をダウンロードしてお使いください。

ダウンロードicon.zip

 

EC-CUBE管理画面の「コンテンツ管理>ファイル管理」を開き、
packages の「表示」→ default の「表示」→ img の「表示」→ icon の「表示」
とクリックしていきます。

 

EC-CUBE コンテンツ管理>ファイル管理

 

この画面で、「ファイルのアップロード」の「選択」ボタンをクリックし、「必須」と「任意」のアイコン画像をアップロードします。

 

tplファイルをカスタマイズ

今回カスタマイズするファイルは、下記の3つです。

data/Smarty/templates/default/shopping/nonmember_input.tpl

data/Smarty/templates/default/frontparts/form_personal_input.tpl

data/Smarty/templates/default/contact/index.tpl

 

このファイルの中にある

[html]<span class="attention">※</span>[/html]

という部分が、「 」を表示させています。

 

まずこれを取ってしまって、かわりに <th>class="required" を付けます。

具体的には、

[html]<th>お名前<span class="attention">※</span></th>[/html]

これを、

[html]<th class="required">お名前</th>[/html]

のように書き換えます。

 

また、必須でない項目には <th>class="optional" を追加します。

[html]<th>FAX番号</th>[/html]

これを、

[html]<th class="optional">FAX番号</th>[/html]

とします。

 

CSSをカスタマイズ

EC-CUBE管理画面の「デザイン管理>PC>CSS設定」を開き、table.css の「編集」をクリックします。

 

この中に、

[css]
th.required {
background: #f0f0f0 url("../img/icon/required.png") 94% 50% no-repeat;
padding-right: 55px;
}
th.optional {
background: #f0f0f0 url("../img/icon/optional.png") 94% 50% no-repeat;
padding-right: 55px;
}
[/css]

を追記します。

(画像名の「required.png」や「optional.png」は、ご自分で付けたものに変更してください。)

 

これで、「必須」と「任意」のアイコンマークが表示されるようになりました!

 

この記事が、EC-CUBEカスタマイズのお役に立てれば幸いです。

 

次回は「4.EC-CUBEのMYページにログアウトボタンを追加する」を解説します!

RSSフィードを購読する

ITポケットでは、ビジネスや生活が向上するTipsを発信しています。
よろしければRSSフィードをご購読ください。

シェアする

このエントリーをはてなブックマークに追加

関連記事

コメント

お仕事のご依頼について

コーポレートサイト、ECサイト、CMS、ブログなど、あらゆるWebサイトの制作をお手伝いいたします。

企画からデザイン、その後の運営や保守まで対応することが可能です。

自らECサイト運営を行っていることもあり、顧客目線でのサイトづくりが得意です。

得意なこと

HTML5 / CSS3 / JavaScript

WordPress

ECサイト(EC-CUBE / Zen Cart / カラーミーショップ)

各ブログのカスタマイズ

 

クライアントのご要望にお答えし、予算やケースにあった選択で、臨機応変に対応いたします。

ご相談・ご質問や、お見積もりのご依頼など、お気軽にお問い合わせください。

プロフィール

菊地翼

菊地翼(きくちつばさ)
WEBクリエイター。株式会社ウイングフォレスト代表取締役。マカー歴18年。IT・ガジェット・ライフハックと甘いものが大好き!

詳しくはこちら 

サイト内検索