WordPressの問い合わせフォーム作成プラグイン「Contact Form 7」の入力欄に、プレースホルダー（入力例や説明文）を追加する方法をご紹介します。
プレースホルダーとは、お問い合わせフォームの入力欄に表示される説明文や例文のことで、入力欄に何らかの文字を入力するまで表示されています。
以下のように入力欄にあらかじめ入力例が表示され、文字を入力すると例文が消えます。各項目ごとにプレースホルダーを表示することで、間違い入力や誤入力を減らすことができます。
プレースホルダーの追加は、Contact Form 7のフォームテンプレートに「placeholder」を追記するだけです。また、プレースホルダー内の文章を改行する方法も解説します。
プレースホルダーを追加
では、Contact Form 7の入力フォームにプレースホルダーを追加してみましょう。
左メニューの「お問い合わせ」からフォームを選び、テンプレートを編集します。
サンプルフォームの「お名前」タグに、オプションの「placeholder」と表示内容のテキストを追加します。赤い文字が追加したオプションのコードで、中の入力例は「”」で区切ります。
[text* your-name placeholder “例： 伊和市 太郎”]
このように入力例のプレースホルダーが表示されました。
Contact Form 7のplaceholderオプションは、以下のフォームタグで利用できます。
text
email
url
tel
textarea
number
range
date
captchar
あとは入力例や説明が必要な場所に、プレースホルダーを追加してください。
プレースホルダー内の改行
続いてプレースホルダー内の改行方法について説明します。メッセージ本文欄に長めの入力例や説明を追加する時は、改行を入れたほうがいい場合があります。
しかし、プレースホルダー内ではHTMLコードが無効になるので、通常の改行タグ「＜br＞」を入れても、単なる文字としてそのまま表示されます。
プレースホルダー内で改行させるためには、改行タグ「＜br＞」を実体参照「＆#13;＆#10;」で記述する必要があります。
これでプレースホルダー内で改行できるようになりました。
ただし、ブラウザによって改行タグの解釈が変わるので注意してください。ChromeとFirefoxではちゃんと改行されましたが、Edgeは余計な改行が1つ入る感じになり、Safariでは改行されませんでした。jQueryを使って改行させる方法もあるので調べてみてください。
長いプレースホルダーを全て表示させる
長いプレースホルダーを表示させる場合は、入力フォームの幅を変更してください。
以下はデフォルトのフォームに長いプレースホルダーを追加したのですが、幅が足りないので途中で切れています。
こんな時はタグにオプションを追加して、フォームの幅を広げてください。
テキストやメールアドレス、URLなど1行だけのフォームは「size」で幅を指定します。赤い部分が追記したオプションのコードです。sizeはテーマの幅に合わせて数値を変更しましょう。
[text text-455 size:80 placeholder “入力欄を広げる”]
入力フォームの幅が広がったので、プレースホルダーが途切れずに表示されていますね。
あとは他のフォームも幅を広げて、全体が揃うように調整してください。メッセージ本文に使うテキストエリアの幅は、sizeではなく「幅x高さ」で記載します。
[textarea your-message 60×5 placeholder “例：プレースホルダー”]
ContactForm7のフォームにプレースホルダー（入力例や説明文）を追加すると、間違いや誤入力を減らしたり、離脱率を下げることができます。
プレースホルダーは簡単に設定できるので、ContactForm7をお使いの方はぜひ試してください。
Contact Form 7のカスタマイズに関する記事は以下をご覧ください。確認画面や完了画面の追加、reCAPTCHA v3の導入方法を紹介しています。
