こんな方に読んで欲しい!
- Contact Form 7(コンタクトフォーム7)を使っている!
- チェックボックス、ラジオボタンの使い勝手が悪いと感じている!
- 操作性を良くし、問い合わせ件数を増やしたい!
Webサイトを作ったら問い合わせフォームを必ず作りましょう!
WordPressには様々な問い合わせフォームを作ることができるプラグイン(追加機能)がありますが、
- 機能が豊富
- 作成者が日本人
- たくさんの利用実績(500万回以上のインストール実績)がある
- wordpressの最新バージョンに対応
- カスタマイズに関する記事が大量にある
などの理由からContact Form 7(コンタクトフォーム7)がおすすめです!
この記事は、Contact Form7をインストール済であることを前提に、チェックボックスとラジオボタンの使い勝手を良くする方法をお伝えします。
さらに詳しく!
Contact Form7の基本的な使い方やインストール方法については、以下の記事を参考にしてください。
1. Contact Form 7でチェックボックスとラジオボタンの選択肢をクリックできるようにするカスタマイズ
1-1. 使い勝手が良いと、問い合わせが増える
問い合わせフォームの使い勝手を改善すると、結果として問い合わせが増えます。 実際には、「増える」というよりも、「問い合わせ前に離脱しにくくなる」と言った方が正しいですね。
ユーザーが「何かしら連絡を取ってみたいな!」と思った時に、問い合わせフォームの項目が非常に多かったり、わかりにくかったり、使いにくかったりすると、送信ボタンを押す前に「面倒だからやめた」となってしまうわけです。
これは非常に大きな損失です。問い合わせフォームの使い勝手を良くカスタマイズし、確実に問い合わせにつながるように設定しましょう!
実際、チェックボックスは非常に押しづらいです。
百聞は一見に如かず。ちょっと下の選択肢をクリックしてみてください。
使い勝手の比較
どっちの使い勝手が良いと思いますか?
おそらく、誰に聞いても「チェックボックスのボックスと、選択肢の文字そのものもクリックできる」方の使い勝手が良いと答えますよね。
1-2. 選択肢もクリックできるようにカスタマイズする手順
管理画面左メニュー>「お問い合わせ」>「コンタクトフォーム」をクリックします。
次に、修正したいフォームのタイトルをクリックします。
フォームが表示されますが、さきほどの例の「チェックボックスのボックスしかクリックできない」方は、こんな感じです。
1 |
[checkbox checkbox-999 "広告について" "見学について" "その他のお問い合わせ"] |
これに「 use_label_element 」を加えるだけで、「チェックボックスのボックスと、選択肢の文字そのものもクリックできる」になります。
1 |
[checkbox checkbox-999 use_label_element "広告について" "見学について" "その他のお問い合わせ"] |
簡単ですね!
ちなみに、生成されたソースコードを見ると、
1 2 3 4 5 6 |
<label> <input type="checkbox" name="checkbox-999[]" value="その他のお問い合わせ"> <span class="wpcf7-list-item-label"> その他のお問い合わせ </span> </label> |
のように、チェックボックスと文字の両方が<label>で囲われているのがわかります。
2. まとめ
少し工夫することで、問い合わせフォームがクリックしやすいチェックボックスになりました。
今回はContact Form 7のショートコードとオプションを使うことで、使い勝手を良くできました。
問い合わせフォームに限ったことではありませんが、ただ単に設置すれば良いというわけではなく、ユーザーの視点で見て便利かどうか、使いやすいかどうか、少しずつでも改善していくことが重要です。
こういうちょっとした改善でも、「塵も積もれば山となる」です。気が付いたら少しずつ直していきましょう!