こちらのページでは、「Contact Form 7」で作ったお問合せフォームの入力欄に、「placeholder」を使って薄いグレーの文字で記入例を表示させる方法について解説しています。
記入例を表示させることで、ユーザーの方が迷わず入力できるようになる、つまりは、離脱されることが少なくなる、というおすすめの設定です。
完成形を確認しよう
まず最初に、完成形を確認しましょう。
「Contact Form 7」で作ったお問合わせフォームは、デフォルトの設定のままだと下の画像のように表示されるのですが・・・
こちらを、「placeholder」を使って下の画像のように予め記入例が薄いグレーの文字で表示されるように設定を変更してみましょう。
「placeholder」の使い方
WordPress のダッシュボードを開きます。
① お問い合わせ ＞ ② コンタクトフォーム をクリックし、
③ の お問合せ をクリックして、コンタクトフォームを表示させます。
フォームに書かれているデフォルトのコードを全て削除します。
下記のコードを全てコピーして、先ほど削除したところに貼り付けて 保存 をクリックします。
<label> お名前（必須）
[text* your-name placeholder "例） 山田 花子"] </label>
<label> フリガナ（必須）
[text* your-name-kana placeholder "例） ヤマダ ハナコ"] </label>
<label> メールアドレス（必須）
[email* your-email placeholder "例） contact@example.com"] </label>
<label> 題名
[text your-subject] </label>
<label> メッセージ本文
[textarea your-message] </label>
[submit "送信"]このときに、例えば１行目の「お名前」を入力の必須項目にしたい場合は、２行目の [ text* your-name placeholder … ] のように「text」の後ろに「*」をつけておきましょう。
そうすることで、「送信ボタン」がクリックされた際に、「お名前」が未入力であった場合は「お名前を入力してください」とエラー表示がされるようになります。
設定はこれだけです。
お問合せページを開いて、下の画像のよう薄いグレーの文字で記入例が表示されるようになったか確認してみましょう。
まとめ
今回は、お問合せフォームを作るのなら、絶対にしておきたい設定についてご紹介させていただきました。
次のページでは、お問合せフォームに、下の画像のように個人情報の取扱いについての項目を追加する方法について説明しています。
こちらも簡単にできますので、合わせて設定してしまいましょう！
引き続き、個人情報の取扱いについての項目を追加したい方はこちらからどうぞ。
