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

ライフ・カラーズと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関連記事

  • スウェーデン探訪記 1/3

    ライフ・カラーズ岡本明才がブログを始めました。 今回は海外のリノベーション事情をちょこっと体験して……

    スタッフブログ | 2016/05/04
  • 調査の途中におもしろい窓発見

    不動産の業務で土地の調査があります。法務局に行けば地積測量図なるものがゲットでき、土地の広さが詳……

    スタッフブログ | 2017/03/23
  • GWはコレンスへ

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

    スタッフブログ | 2017/05/02
  • 歓迎会

    新しいスタッフの歓迎会を、かるぽーと近くにある「にこみちゃん」で行いました。 人と人との距離が近い……

    スタッフブログ | 2016/07/22