WordPress個別サポート

WordPressのプラグインなどで作成したフォームの各項目に説明文を表示する方法を紹介します。

問い合わせフォームのメッセージ欄などに「何かご希望があればこちらに入力してください」のガイダンスを表示したり、郵便番号や電話番号の入力例を表示しておき、何か入力された時点で消えるのが典型的な動きです。

フォーム要素に説明文を表示する

フォーム要素に説明文を表示する

自作のフォームとプラグインで自動作成されるフォームでは作業が異なるので注意が必要です。以下、簡単に説明します。

スポンサーリンク

説明文を表示するplaceholder属性

フォーム項目のplaceholder属性を使うと、説明文を表示することができます。たとえば、メッセージ欄などを作成するtextareaタグには次のように記述することができます。

<textarea placeholder="ご要望はこちらに入力してください。"></textarea>

表示結果は次のようになります。

説明文が表示される

説明文が表示される

何か入力すると説明文は消えます。

何か入力すると説明文は消える

何か入力すると説明文は消える

名前や住所、郵便番号、電話番号などを入力するテキストボックス(inputタグ)でも同じように指定できます。

<input type="text" name="postcode" placeholder="(例:113-0022)">

表示結果は次のようになります。

郵便番号の入力例を表示

郵便番号の入力例を表示

プラグインで作成したフォームにplaceholder属性を付加する

タグを手作業で入力したフォームの場合は上記のように任意のタグにplaceholder属性を指定すれば良いのですが、問題はプラグインで作成するフォームです。

多くの場合はショートコードを使うことでフォームが自動作成されるので、個々のフォーム要素のタグを編集できないこともあります。

その場合、自動作成されたフォームに対してjQueryを使ってplaceholder属性を後付けする方法があります。

以下、予約システムのプラグイン「MTS Simple Booking C」で作成した予約フォームのメッセージ欄に説明文を表示する例で説明します。

自動作成されたフォーム要素の名前を調べる

まずは、説明文を表示したいフォーム要素の名前(IDまたはclass名)を調べます。

インスペクタ(「要素を調査」などのメニュー)を使って説明文を表示したいテキストエリア「メッセージ」のソースを調べてみると「booking-note」というIDが付いています。

説明文を表示する要素のIDまたはクラス名を調べる

説明文を表示する要素のIDまたはクラス名を調べる

その要素に対するjQueryを記述する

この「booking-note」に対してplaceholder属性を後付けするjQueryを記述します。具体的には次のようなコードを子テーマのfunctions.phpなどに入力します。

/* 「booking-note」に説明文を付加 */
function my_wp_footer(){ 
?>
<script type="text/javascript">
jQuery(function() {
    var msg = 'ご要望はこちらに入力してください。';
    jQuery('#booking-note').attr('placeholder', msg);
});
</script>
<?php
}
add_action('wp_footer', 'my_wp_footer');

指定したフォーム要素に説明文が表示されるようになります。

指定したフォーム要素に説明文が表示される

指定したフォーム要素に説明文が表示される

まとめ

このようにplaceholder属性を使うと、フォーム要素に説明文を表示できるようになりますが、場合によってはjQueryで後付けするなどの工夫が必要です。あとはいろいろと試行錯誤してみてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
wordpress講座受講予約
WordPress講座の問い合わせ先
脱・初心者を目指すWordPress 189のヒント

関連記事

BizVektorのカスタマイズ

Lightningのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート