Contact Form 7でカラーコードを選択して送信する方法【Contact Form 7カスタマイズ】

お客さんの書いた赤色ってどの赤色なのか、カラーコード書いてもらうのも大変だし、う~ん悩む…!!

お客様の希望を入力してもらって送信するような使い方をする場合に、カラーピッカーを使った色選択をして送信する方法をご紹介します。

「Color Picker for Contact Form 7」プラグインを使う方法

ContactForm7自体に、カラー選択できる機能はありませんが、プラグインを使うことで解決できます。

※実際に使用したのはWordpress5.3ですが、利用できました。未検証が気になる方は後述するjsでの実装をお試しください。

使い方はカンタン!
プラグインを有効化してから、ContactForm7のフォームを見ると「color」が選べるようになっているので、テキストやテキストエリアのように表示させたいところにポチッと入れるだけ。

これで、お客様はカラーピッカーで色を選択でき、受け取り側はカラーコードで内容を受け取れるようになります。

「jscolor.js」をContact Form7で使う

あまりプラグインを増やしたくない方は、こちらのjscolor.jsを使う方法がおすすめです。
こちらでは実装していないので、紹介だけになりますが、こちらの記事を参考にしてみてください。
Integrating color picker to contact form 7 plugin(英文)

※画像はGoogle Chromeで翻訳したものになります。
オーダーメイド型の商品の申し込みフォームとかに、便利なのでぜひ使ってみてくださいね!
この記事を書いている人
Picture of WEBデザイナー 小谷 優歌
WEBデザイナー 小谷 優歌
WEBデザイナーとして20年、中小企業を中心に年間80件近くのサイト制作・改善を行う。サイト制作にとどまらず、商工会でのセミナー講師や、中小企業へIT顧問・専門家として技術アドバイスを提供。 デザイン制作だけでなく「WEBやITを使って問題を解決したい」「結果を重視して取り組みたい方」へのウェブ活用のサポートを専門としている。