「Contact Form 7」の入力欄に入力例を表示させる方法

上記のようにContact Form 7で作成したメールフォームの入力欄に予め入力例を表示させる方法をご紹介します。Contact Form 7はインストール済みとして解説をさせていただきますので、予めご了承ください。
入力例の表示は特に難しいカスタマイズなど必要なく、メールフォームの管理画面から設定することができます。詳しい手順を見ていきましょう。
まずは、新規でメールフォームを作成するケースの設定方法です。
手順1:メールフォームの新規作成画面にアクセスする。

まずは、メールフォームの新規作成画面にアクセスしてください。
管理画面の「お問い合わせ」⇒「新規追加」⇒「新規追加」と移動しましょう。
手順2:項目作成時に入力例を設定する。

入力例の設定は、項目作成時に行います。
項目の新規作成は【タグの作成】をクリックして任意の項目を選択します。
上記はテキスト項目を作成するときの画面です。

入力例は、上記画像の赤枠部分で行います。
デフォルト値 (オプション)に【表示させたい入力例】を記述しましょう。
上記の画像では【ああああああああああああ】と入力してみました。
【このテキストをプレースホルダーとして使いますか?】にチェックを入れます。
あとは、生成されたコードをフォームに貼り付ければ作業完了です。
手順3:入力例が表示されていることを確認する。

メールフォームの作成が完了したら、メールフォームを表示させ、上記画像の様に入力例が表示されていることを確認してください。
もしも、正常に表示できていない場合、該当箇所のタグに問題があると考えられます。
半角スペースが無くなっているなど、問題点が無いか確認してください。
問題点が見つからない場合、改めて管理画面からタグを作成しましょう。
あれこれと悩むより手っ取り早いです。
既存メールフォームに入力例をコピペで表示させる方法
先ほどは、新しくメールフォームを作成する過程で、入力例を表示させる方法をご紹介しましたが、ここでは既存のメールフォームに入力例を表示させる方法をご紹介します。
基本的にコピペだけの簡単な作業です。
[text* your-name class:form_test]
まず、入力例を表示させたい部分のコードを探します。
今回は、上記のコードに入力例を表示させるコードを追加してみます。
以下の様にコードを追加させましょう。
[text* your-name class:form_test placeholder "例:田中一郎"]
【placeholder “例:田中一郎”】をコードの最後に追加しました。
この様にコードを追加すると、下の画像の様に入力例が表示されます。

入力例を表示させたい場合【placeholder “ここに表示させる内容”】を、既存コードの最後に追加すれば、入力例を表示させることができます。
まとめ
「Contact Form 7」の入力欄に入力例を表示させる方法をご紹介しました。
「Contact Form 7」って、メールフォームに必要な部分はほとんど押さえていますよね。
改めて「Contact Form 7」のすごさに感心してしまいました。
メールフォームに入力例を記述すると、フォームの送信率も向上する傾向にあります。
難しい作業ではありませんので、この機会に実装されてはいかがでしょうか?
コメントを残す