メールフォームを変更しました。

ライフ・カラーズと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の制作もしておりますので、お店のホームページなどをお考えでしたらご相談ください。

お問い合わせ

メールフォームを変更しました。
門脇千夏

門脇千夏

RELATION関連記事

  • 空中扉

    昔ながらの両脇部屋の空中扉ですが、今回は廊下側も撮影しています。 むかしは寮として使われて……

    スタッフブログ | 2016/01/26
  • GWはコレンスへ

    最近のポカポカ陽気が気持ちいいですね。 コレンスの木々も色づいてきれいになってきました。 ……

    スタッフブログ | 2017/05/02
  • D'S STYLEとは...

    間仕切りがなく、自由な間取りが売りのD'S STYLE。しかし子供が成長した時、その部分がマイナスに……

    スタッフブログ | 2017/04/13
  • 草と家

    草に覆われた集合住宅。 窓を覆う程の草が部屋の中に侵入 この草はこちらです→リノつく……

    スタッフブログ | 2016/01/26