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

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

  • お家の中で「日向ぼっこ」

    こんにちは、石川です。体験宿泊お客様PHOTOシリーズです^^ 先日ご宿泊いただきましたH様より、……

    スタッフブログ | 2017/03/21
  • コーポ廿代美化計画

    梅雨明けし、日差しがさらに強くなったような気がする今日この頃。 コーポ廿代事務所の正面美化計画……

    スタッフブログ | 2017/07/21
  • 水回りのコーキング

    水回りの角などに白いゴムみたいのが付いていますが、水が染み込まないようにコーキングを施しています。 ……

    スタッフブログ | 2016/02/09
  • 桜井町出店ラッシュ

    コレンスの北に元古道具屋の空き店舗が 何やら工事をしています。 作業台があり、内装工……

    スタッフブログ | 2017/04/28