「placeholder」の設定方法！【contact form 7】

お問い合わせフォームからの質問に誤った情報が書き込まれている場合などよくありませんか？

データを集めている場合は誤った情報を収集してしまうので自分で手打ちする手間が増えてしまいます。そこでお問い合わせフォームのプレースホルダーという設定についてご紹介します！

プレースホルダー（placeholder）はあまり聞きなれない言葉ですがフォームを打つ前から半透明で書かれている例文のことです。「山田　太郎」などヒントを書いておくことで間違い入力や誤入力を減らすことができ、データをきれいに取ることで分析しやすくなります。

今回はお問い合わせフォームによく用いられている「ContactForm7」においてどのように設定するか実際の画像を見ながら方法をまとめていきます。

手順としてはの2〜3分で完了します。
このほか、プレースホルダーを利用していると気になる応用についても解説します！

プレースホルダーを追加する

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

簡単にプレースホルダーを追加する場合新しくフォームタグを生成する方法があります。

まず元のコンタクトフォームタグを消して、使用するコンタクトフォームタグを選びます。

デフォルト値にプレースホルダー内に入れたい例文を入力し、

「このテキストを項目のプレースホルダーとして使用する」にチェックを入れます。

タグを挿入するボタンを押して挿入しこの状態で保存をし更新すると実装することができます！

次に元のコンタクトフォームタグを消さずにプレースホルダーを実装する方法をご紹介します。

サンプルフォームの「氏名」タグに、オプションの「placeholder」と表示内容のテキストを追加し、中の入力例は「””」で囲みます。

[text * your-name placeholder ”山田　太郎”]

入力する際のスペースは半角スペースでないとフォームが消えてしまうので実装されていない場合はスペースが全て半角スペースであるか確認してください。

下のフォームタグのplaceholderの記述例をまとめました。参考にしてみてください！

続いてplaceholder内の改行について説明します。

お問い合わせ内容などの長めの入力例や説明文の場合、改行を入れた方が見やすい場合があります。

しかし、placeholder内のHTMLコードが無効になるので、HTMLコードである<br>を入力しても改行することはできず、そのまま表示されてしまいます。

なのでplaceholder内で改行をさせたい場合は改行タグの<br>を実体参照「$#13;$#10;」で記述する必要があります。$#○○;の○○の部分にテキストデータの中で改行を指示するコード番号を入力することで改行することができます。

これでplaceholder内で改行することができました。

ただし、ブラウザによって改行タグが適応が違うので注意してください。

jQueryを使って改行させる方法もありますのでブラウザの差異で悩む場合は検索し実装してみてください。

長い例文をplaceholderに入れたい場合には、入力フォームの幅を変更させることができます。

タグにオプションを追加することでフォームの幅を広げます。

textやemail、urlなどのフォームは「size:X」で幅を指定します。Xに数値を入れることでフォームの幅を変更させることができます。

textareaではsizeではなく「幅x高さ」で記載します。間の×は小文字のエックスです。

こちらを設定しても変更されない場合は、テーマでお問合せフォームの大きさが固定されている場合があります。この場合は気軽にお問い合わせよりご相談ください！

ContactForm7のフォームにplaceholderを追加すると、間違いや誤入力を減らしたり、離脱率を下げることができます。

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