Contact Form 7 にプレースホルダー(入力例)を追加する

スポンサーリンク
スポンサーリンク

contactform7 プレースホルダー追加

WordPressの問い合わせフォーム作成プラグイン「Contact Form 7」の入力欄に、プレースホルダー(入力例や説明文)を追加する方法をご紹介します。

プレースホルダーとは、お問い合わせフォームの入力欄に表示される説明文や例文のことで、入力欄に何らかの文字を入力するまで表示されています。

以下のように入力欄にあらかじめ入力例が表示され、文字を入力すると例文が消えます。各項目ごとにプレースホルダーを表示することで、間違い入力や誤入力を減らすことができます。

contactform7 プレースホルダー

プレースホルダーの追加は、Contact Form 7のフォームテンプレートに「placeholder」を追記するだけです。また、プレースホルダー内の文章を改行する方法も解説します。

スポンサーリンク

プレースホルダーを追加

では、Contact Form 7の入力フォームにプレースホルダーを追加してみましょう。

contactform7 入力フォーム

左メニューの「お問い合わせ」からフォームを選び、テンプレートを編集します。

contactform7 フォームテンプレート

サンプルフォームの「お名前」タグに、オプションの「placeholder」と表示内容のテキストを追加します。赤い文字が追加したオプションのコードで、中の入力例は「”」で区切ります。

[text* your-name placeholder “例: 伊和市 太郎”]

このように入力例のプレースホルダーが表示されました。

contactform7 プレースホルダー

Contact Form 7のplaceholderオプションは、以下のフォームタグで利用できます。

text
email
url
tel
textarea
number
range
date
captchar

あとは入力例や説明が必要な場所に、プレースホルダーを追加してください。

contactform7 プレースホルダー

プレースホルダー内の改行

続いてプレースホルダー内の改行方法について説明します。メッセージ本文欄に長めの入力例や説明を追加する時は、改行を入れたほうがいい場合があります。

しかし、プレースホルダー内ではHTMLコードが無効になるので、通常の改行タグ「<br>」を入れても、単なる文字としてそのまま表示されます。

contactform7 プレースホルダー改行

プレースホルダー内で改行させるためには、改行タグ「<br>」を実体参照「
」で記述する必要があります。




contactform7 プレースホルダー改行

これでプレースホルダー内で改行できるようになりました。

contactform7 プレースホルダー改行

ただし、ブラウザによって改行タグの解釈が変わるので注意してください。ChromeとFirefoxではちゃんと改行されましたが、Edgeは余計な改行が1つ入る感じになり、Safariでは改行されませんでした。jQueryを使って改行させる方法もあるので調べてみてください。

長いプレースホルダーを全て表示させる

長いプレースホルダーを表示させる場合は、入力フォームの幅を変更してください。

以下はデフォルトのフォームに長いプレースホルダーを追加したのですが、幅が足りないので途中で切れています。

contactform7 プレースホルダー表示

こんな時はタグにオプションを追加して、フォームの幅を広げてください。

テキストやメールアドレス、URLなど1行だけのフォームは「size」で幅を指定します。赤い部分が追記したオプションのコードです。sizeはテーマの幅に合わせて数値を変更しましょう。

[text text-455 size:80 placeholder “入力欄を広げる”]

入力フォームの幅が広がったので、プレースホルダーが途切れずに表示されていますね。

contactform7 プレースホルダー表示

あとは他のフォームも幅を広げて、全体が揃うように調整してください。メッセージ本文に使うテキストエリアの幅は、sizeではなく「幅x高さ」で記載します。

[textarea your-message 60×5 placeholder “例:プレースホルダー”]

contactform7 プレースホルダー表示

ContactForm7のフォームにプレースホルダー(入力例や説明文)を追加すると、間違いや誤入力を減らしたり、離脱率を下げることができます。

プレースホルダーは簡単に設定できるので、ContactForm7をお使いの方はぜひ試してください。

Contact Form 7のカスタマイズに関する記事は以下をご覧ください。確認画面や完了画面の追加、reCAPTCHA v3の導入方法を紹介しています。

Contact Form 7の使い方や設定方法
Contact Form 7の記事一覧です。フォームに入力した内容の確認画面や、メール送信後の完了画面を追加したり、メール送信後のサンクスページ移動方法、スパムメール対策のreCAPTCHAv3設定方法も紹介しています。
タイトルとURLをコピーしました