ライフ・カラーズとcorensのメールフォームの、チェックボックス、表示・非表示の切り替え、画像をアップロードする部分を追加・変更しました。
チェックボックス
よくお問い合わせの項目で見るチェックボックス。
| テスト | チェック1 チェック2 チェック3 |
|---|
ライフ・カラーズやcorensのホームページでは、このチェックボックスをデフォルトのまま使っていました。
でもこういうのってスマホとかでチェックしづらかったりするんですよね・・・。
なので、下記のサイトの最後に掲載されているのを参考に見た目を変更しました。
フォームのセレクトボックスとチェックボックス・ラジオボタンをCSSで装飾する
で、変更した後がこれです。
| テスト |
|---|
デフォルトより、動きがあって楽しいしチェックしやすくなりました。
表示・非表示の切り替え
次に、下記のように項目をチェックしたら表示する動きをつけました。
「#welcome」で囲んだ部分を、
jQueryというもので、「する」という項目をクリックすると表示するようにしています。↓
$('input[value="する"]').click(function() {
$("#welcome").slideToggle(this.checked);
});
これで必要な時だけ、入力項目を表示することができます。
画像をアップロード
corensのフォームで画像をアップロードしてもらう項目があるのですが、これもデフォルトでは使いづらい上にダサい感じが・・・。
デフォルト↓
これを使いやすく、カッコよくする表示するには「Dropify」をいうjQueryを使います。
使い方は下記のサイトを参考にしました。
あのダサいデザインとはおさらば! input[type=file] をかっこ良く表示できる jQuery プラグイン『Dropify』の使い方
Dropifyを使うと、これが
簡単にかっこよくなりました。
最後に
こういうお問い合わせフォームも、少し手間を加えるだけでも使い勝手や見た目も変わるのがwebの面白いところの一つかなと思います。
ライフ・カラーズではwebの制作もしておりますので、お店のホームページなどをお考えでしたらご相談ください。