【Contact Form 7】カスタマイズ・使い方③　チェックボックスとラジオボタンの「選択肢」をクリックできるようにする方法

こんな方に読んで欲しい！

Webサイトを作ったら問い合わせフォームを必ず作りましょう！

WordPressには様々な問い合わせフォームを作ることができるプラグイン（追加機能）がありますが、

この記事は、Contact Form7をインストール済であることを前提に、チェックボックスとラジオボタンの使い勝手を良くする方法をお伝えします。

さらに詳しく！

1. Contact Form 7でチェックボックスとラジオボタンの選択肢をクリックできるようにするカスタマイズ

問い合わせフォームの使い勝手を改善すると、結果として問い合わせが増えます。実際には、「増える」というよりも、「問い合わせ前に離脱しにくくなる」と言った方が正しいですね。

ユーザーが「何かしら連絡を取ってみたいな！」と思った時に、問い合わせフォームの項目が非常に多かったり、わかりにくかったり、使いにくかったりすると、送信ボタンを押す前に「面倒だからやめた」となってしまうわけです。

これは非常に大きな損失です。問い合わせフォームの使い勝手を良くカスタマイズし、確実に問い合わせにつながるように設定しましょう！

実際、チェックボックスは非常に押しづらいです。

百聞は一見に如かず。ちょっと下の選択肢をクリックしてみてください。

使い勝手の比較

どっちの使い勝手が良いと思いますか？

おそらく、誰に聞いても「チェックボックスのボックスと、選択肢の文字そのものもクリックできる」方の使い勝手が良いと答えますよね。

管理画面左メニュー＞「お問い合わせ」＞「コンタクトフォーム」をクリックします。

次に、修正したいフォームのタイトルをクリックします。

フォームが表示されますが、さきほどの例の「チェックボックスのボックスしかクリックできない」方は、こんな感じです。

[checkbox checkbox-999 "広告について" "見学について" "その他のお問い合わせ"]

1	[checkbox checkbox-999 "広告について" "見学について" "その他のお問い合わせ"]

これに「 use_label_element 」を加えるだけで、「チェックボックスのボックスと、選択肢の文字そのものもクリックできる」になります。

[checkbox checkbox-999 use_label_element "広告について" "見学について" "その他のお問い合わせ"]

1	[checkbox checkbox-999 use_label_element "広告について" "見学について" "その他のお問い合わせ"]

簡単ですね！

ちなみに、生成されたソースコードを見ると、

<label>
  <input type="checkbox" name="checkbox-999[]" value="その他のお問い合わせ">
  <span class="wpcf7-list-item-label">
    その他のお問い合わせ
  </span>
</label>

<label>

その他のお問い合わせ

</span>

</label>

のように、チェックボックスと文字の両方が<label>で囲われているのがわかります。

少し工夫することで、問い合わせフォームがクリックしやすいチェックボックスになりました。

今回はContact Form 7のショートコードとオプションを使うことで、使い勝手を良くできました。

問い合わせフォームに限ったことではありませんが、ただ単に設置すれば良いというわけではなく、ユーザーの視点で見て便利かどうか、使いやすいかどうか、少しずつでも改善していくことが重要です。

こういうちょっとした改善でも、「塵も積もれば山となる」です。気が付いたら少しずつ直していきましょう！