ブログのつくり方

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

こんな方に読んで欲しい!orこんな悩みはありませんか?

  • Contact Form7(コンタクトフォーム7)を使っている
  • チェックボックス、ラジオボタンの使い勝手が悪いと感じている
  • 問い合わせ件数を増やしたい

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

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

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

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

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

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

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

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

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

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

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

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

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

[contact-form-7 404 "Not Found"]

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

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

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

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

cf7_clickable_01

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

cf7_clickable_02

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

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

簡単ですね!

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

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

2. まとめ

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

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

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

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

\参考になったらポチッとお願いします!/

-ブログのつくり方
-,

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