ContactForm7はWordPressに簡単にコンタクトフォームを導入できるプラグインですが、デフォルトのままでは入力欄が表示されるのみでユーザーにとっては少し使いづらさがあります。
今回はContactForm7でplaceholderを設定する事でフォーム入力の分かりやすさを改善する方法をお伝えします。
さくっと導入方法だけ確認したい！という方は設定のしかたからご覧ください。
そもそもplaceholderとは？
フォーム入力の際に入力の補助としてテキスト欄に例として表示させるテキストです。
通常ContactForm7で作ったフォームはこのような形になっています。
この状態でもちゃんと機能するフォームではあるのですが、ユーザーにとって分かりづらい箇所があるのはお分かりでしょうか？
例えば電話番号の入力欄。
携帯番号は入れていいのか、“-”を入れるのか入れないのかといった事が見ただけでは判断できません。
一度入力してみれば分かる事ではありますが、こういった小さなストレスがフォーム離脱を招きかねません。
placeholderを設定しておくことで
このように該当する入力欄にどのように記述すればいいのかを分かりやすく示すことが可能です。
設定のしかた
新しくフォームを追加する場合と、既にあるフォームに追加する2パターンを解説します。
新しくフォームを追加する場合
新しくフォームを追加する際には
通常このように名前だけが入力されている状態かと思います。
ここでデフォルト値にplaceholderとして表示させたいテキストを入れ、「このテキストを項目のプレースホルダーとして使用する」にチェックを入れます。
この状態で「タグを挿入」を押せばplaceholderの設定は完了です。
注意点！
「このテキストを項目のプレースホルダーとして使用する」にチェックを入れ忘れるとデフォルトでフォームに「田中 太郎」と入力された状態になってしまいます。
折角利便性を上げようとしているのに、一度入力欄からテキストを消さないとユーザーが入力できない状態になってしまいます。
よりフォームに対してのストレスが増えてしまいますのでチェックが入っているかは漏れないように確認してください。
既にあるフォームに追加する場合
既にフォームを作成済みで、また新たに設定するのが面倒くさいという場合は、
<li>お名前 [text text-1]</li>↓
<li>お名前 [text text-1 placeholder"田中 太郎"]</li>このように既に作成されたフォームのタグに対してplaceholderの記述を追記する事で設定が可能です。
新しくフォームを追加する場合の注意点と同じく、
<li>お名前 [text text-1 "田中 太郎"]</li>上記のようにplaceholderの記述が抜けた状態だとデフォルトでフォームに「田中 太郎」と入力された状態になってしまいますので注意してください。
まとめ
ContactForm7で作るフォームにplaceholderで入力例を表示させる方法でした。
特にユーザーからお問い合わせを獲得したいサイトでは、入力フォームの分かりやすさ次第で問い合わせ数が大きく変わってきます。
一度フォームを確認してみて、もしplaceholderの設定がなされてない場合は是非導入してみてください。
