Javascriptを使って簡単！ フォームでカラーピッカーを実装する方法

新年気持ちも新たに弊社（ウェブ制作会社）のウェブサイトをリニューアルしたのですが、
それに伴い、オンライン上で使っている簡易ヒアリングシートを作り直してみました。

ヒアリングシート | Webデザイン事務所ピチカートデザイン

その中で、メインカラーやアクセントカラーを入力する項目があるのですが、
色の指定を直感で入力できる便利なプラグインがあったので使ってみました。

手順1. JSColorをダウンロード

以下のサイトよりjscolor-1.4.2.zipをダウンロードします。
Download of JSColor – JavaScript / HTML Color Picker, Selector, Chooser

手順2. ダウンロードしたファイルをアップロードして、headタグ内で読み込み

headタグ内に以下のようなソースを挿入します。

<script type="text/javascript" src="jscolor.js"></script>

（実際はアップロードしたjscolor.jsファイルの場所を指定してください）

手順3. カラーピッカーを実装したい部分にclassを追加

あとは、実装したいinputタグに以下のようにclass="color"を追加するだけ。

<input class="color">

以下の画像のように表示されれば、実装成功です。おめでとうございます！

シンプルで使いやすいので、なかなか便利です。
ぜひ使ってみてください！