【初心者必見！】WordPress「Contact Form7」でチェックボックスとラジオボタンの選択肢もクリックできるようにする方法

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

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

• 機能が豊富
• 作成者が日本人
• たくさんの利用実績（500万回以上のインストール実績）がある
• wordpressの最新バージョンに対応
• カスタマイズに関する記事が大量にある

などの理由からContact Form 7（コンタクトフォーム7）がおすすめです！

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

Contact Form7の基本的な使い方やインストール方法については、以下の記事を参考にしてください。

インターネットビジネスラボ

カスタマイズ事例もたくさん！「Contact Form 7」の基本的な使い方を徹底解説！

こんな方に読んでほしい！ WordPressで問い合わせフォームを作りたい！ 会員登録フォームや申込みフォームを作りたい！ Contact Form 7の導入方法を知りたい！ブログやコーポレートサイト（会社Webサイト）を始めると、その目的によっては、 問い合わせフォーム ...

1. Contact Form 7でチェックボックスとラジオボタンの選択肢もクリックできるようにする方法

1-1. 使い勝手が良いと、問い合わせが増える

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

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

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

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

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

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

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

1-2. 選択肢もクリックできるようにする手順

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

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

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

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

簡単ですね！

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

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

2. まとめ

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

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

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

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