「Contact Form 7」の入力欄に入力例を表示させる方法
  • 「Contact Form 7」の入力欄に入力例を表示させる方法
  • 記事公開:2015/01/18
  • 最終更新:2015/09/17

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

【Contact Form 7】の入力欄に入力例を表示させる方法をご紹介します。メールフォームの入力欄に薄く入力例が表示されるのがありますが、Contact Form 7でも同じことができます。手順を知りたい方は続きをお読みください。

この記事は約 4 分で読めます。

WordPressサイトの常時SSL化はお任せください。

ADhttps://wordpress-supporters.com/wordpress-ssl/

常時SSL化されていないサイトにGOOGLEが警告文を表示させるまであと僅か!
今すぐにでも必要なWordPressサイトの常時SSL化は、プロに丸投げしてください。
今だけ20,000円OFF、GOOGLE対策、リミット間近、サポート充実。

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

contact-form-7_input-example_000

上記のようにContact Form 7で作成したメールフォームの入力欄に予め入力例を表示させる方法をご紹介します。Contact Form 7はインストール済みとして解説をさせていただきますので、予めご了承ください。

入力例の表示は特に難しいカスタマイズなど必要なく、メールフォームの管理画面から設定することができます。詳しい手順を見ていきましょう。

まずは、新規でメールフォームを作成するケースの設定方法です。

手順1:メールフォームの新規作成画面にアクセスする。

contact-form-7_input-example_001

まずは、メールフォームの新規作成画面にアクセスしてください。
管理画面の「お問い合わせ」⇒「新規追加」⇒「新規追加」と移動しましょう。

手順2:項目作成時に入力例を設定する。

contact-form-7_input-example_002

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

contact-form-7_input-example_003

入力例は、上記画像の赤枠部分で行います。

デフォルト値 (オプション)に【表示させたい入力例】を記述しましょう。
上記の画像では【ああああああああああああ】と入力してみました。

【このテキストをプレースホルダーとして使いますか?】にチェックを入れます。

あとは、生成されたコードをフォームに貼り付ければ作業完了です。

手順3:入力例が表示されていることを確認する。

contact-form-7_input-example_000

メールフォームの作成が完了したら、メールフォームを表示させ、上記画像の様に入力例が表示されていることを確認してください。

もしも、正常に表示できていない場合、該当箇所のタグに問題があると考えられます。
半角スペースが無くなっているなど、問題点が無いか確認してください。

問題点が見つからない場合、改めて管理画面からタグを作成しましょう。
あれこれと悩むより手っ取り早いです。

既存メールフォームに入力例をコピペで表示させる方法

先ほどは、新しくメールフォームを作成する過程で、入力例を表示させる方法をご紹介しましたが、ここでは既存のメールフォームに入力例を表示させる方法をご紹介します。

基本的にコピペだけの簡単な作業です。

[text* your-name class:form_test]

まず、入力例を表示させたい部分のコードを探します。
今回は、上記のコードに入力例を表示させるコードを追加してみます。

以下の様にコードを追加させましょう。

[text* your-name class:form_test placeholder "例:田中一郎"]

【placeholder “例:田中一郎”】をコードの最後に追加しました。
この様にコードを追加すると、下の画像の様に入力例が表示されます。

contact-form-7_input-example_002

入力例を表示させたい場合【placeholder “ここに表示させる内容”】を、既存コードの最後に追加すれば、入力例を表示させることができます。

まとめ

「Contact Form 7」の入力欄に入力例を表示させる方法をご紹介しました。

「Contact Form 7」って、メールフォームに必要な部分はほとんど押さえていますよね。
改めて「Contact Form 7」のすごさに感心してしまいました。

メールフォームに入力例を記述すると、フォームの送信率も向上する傾向にあります。
難しい作業ではありませんので、この機会に実装されてはいかがでしょうか?

WordPressサイトの常時SSL化はお任せください。

ADhttps://wordpress-supporters.com/wordpress-ssl/

常時SSL化されていないサイトにGOOGLEが警告文を表示させるまであと僅か!
今すぐにでも必要なWordPressサイトの常時SSL化は、プロに丸投げしてください。
今だけ20,000円OFF、GOOGLE対策、リミット間近、サポート充実。

この記事が気に入ったら【いいね】しよう!

Wordpressサイトのカスタマイズで
お困りではありませんか?

あなたのWordpressサイトを、ご希望に沿ってカスタマイズいたします。
次に該当する方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしたいが、自分でカスタマイズする暇がない。カスタマイズが得意な人に丸投げしたい。
  • Wordpressサイトをカスタマイズしてみたが、上手くカスタマイズできなかった。カスタマイズ経験が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしてみたら、バグが発生して困っている。正常に動作するように正しくカスタマイズしてほしい。

一つでも該当する方は、以下のリンクからチェックしてみてください。

詳細を確認する

現在、上記サービスは別ドメインで運用しております。
ドメインは異なりますが、わたしが提供させていただいているサービスです。

著者:takaya kondo

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • 2016-01-16

    プラグインの落とし穴!プロがプラグインを最低限しか導入しない5つの理由

    プロがプラグインを最低限しか導入しない5つの理由をご紹介します。プラグインはサイトに色々な機能を実装できる頼もしい仕組みですが、その反面で危険性も隠されています。プラグインの危険性を知りたい方は、2分間だけこのコンテンツを読んでください。 記事を読む

  • 2015-12-17

    WordPressで投稿のカテゴリー情報を取得して表示するコード

    投稿のカテゴリー情報を取得して表示するコードをご紹介します。特定の投稿でそのカテゴリー情報を取得して表示したり使いたい方は参考にしてください。3分後には自由にカテゴリー情報を取得できる様になっています。 記事を読む

  • 2015-02-24

    WordPressサイトに前後記事へのリンクを表示させる方法

    WordPressで構築したサイトに前後記事へのリンクを表示させる方法をご紹介します。記事ページの下部などでよく見かける「前の記事」「次の記事」といったナビゲーションリンクです。1分で表示できますので、参考にしてください。 記事を読む

  • 2015-09-19

    WordPress管理画面が崩れた!原因と解決方法のまとめ

    Wordpress管理画面が崩れる原因とその解決方法を解説しています。ここ最近、管理画面のメニューが重なったりする崩れが生じていました。2分程度でできる簡単な解決方法です。参考にしてください。 記事を読む

  • 2015-02-28

    WordPressサイトの検索結果にヒットした件数を表示させる。

    検索結果にヒットした件数を表示させたい! WordPressの検索結果にヒットした件数を表示させたいと思ったことはありませんか? ちょっと調べる機会があったので、やり方を書き残しておこうと思います。 記事を読む

コメントを残す


(必須)