ブログのつくり方

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

2019年5月22日

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

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

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

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

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

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

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

 

さらに詳しく!

 

\記事を読む前にクリックで応援してください!/

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

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

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

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

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

 

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

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

使い勝手の比較

    1、チェックボックスのボックスしかクリックできない
    広告について見学についてその他のお問い合わせ

    2、チェックボックスのボックスと、選択肢の文字そのものもクリックできる

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

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

    1-2. 選択肢もクリックできるようにカスタマイズする手順

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

    cf7_clickable_01

     

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

    cf7_clickable_02

     

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

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

    簡単ですね!

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

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

    2. まとめ

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

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

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

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

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

    -ブログのつくり方
    -,

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