無料7日間!NetChildが開発したインスタツール

コンタクトフォーム7で入力欄をまとめてすっきり&透かしを入れる方法

コンタクトフォーム7で1項目の中に複数入力欄を出す方法を解説します。

文章にすると分かりにくいですが、画像で見てもらうと一目瞭然です。

個人ブログなどで、姓名などを入力してもらうことはないかもしれませんが、あくまでもサンプルです。

上の例でいうと、姓名と希望日時・希望時間帯は同じ類の項目になります。

一つにまとめたとしても、何を入力すればいいか分かりますよね。

 

また、一つにまとめることで、何を入力してもらうか分からなくなる場合は、透かし(ウォーターマーク)入れるといいです。

こんな時におススメの方法です
  • 入力項目が多く、すっきりさせたい
  • 似たような項目が多く、一つにまとめたい

 

コンタクトフォーム7での項目のまとめ方

お名前の姓名の箇所で説明していきます。

<label> 姓(必須)
[text* your-name]</label>

<label> 名(必須)
[text* your-name2]</label>

普通に記載したらこうですが、これだとフォーム項目は分かれて表示されます。

<label></label>というタグが一つの項目になっているので、一つのタグの間に2つのコードを記載してあげればいいのです。

 

どうするのかというと、

<label> お名前(必須)
[text* your-name][text* your-name2]</label>

このようになります。

 

 

ただこのままだと、このように何を入力したらいいのかわからなくなります。

ここで透かし(ウォーターマーク)を入れてあげるのです。

透かしは入力しないときは表示され、入力するときには表示が消えるというものです。

 

入力欄への透かしの入れ方

<label> お名前(必須)
[text* your-name watermark”姓”][text* your-name2 watermark”名”]</label>

このように「watermark”●●”」という記述を所定の位置に入れてあげればOKです。

watermarkの記載を入れれば画像のようになります。

watermarkはメールアドレスやテキストエリアなどの項目にも使うことができます。

こちらは当ブログのお問い合わせフォームですが、透かしを入れてあげるとよりユーザーが入力しやすくなりますね。

 

まずは試してみてください

いかがでしたでしょうか?
タグの法則さえある程度理解すればフォームをきれいに表示させることができます。

何度かやれば、すぐに覚えることができるので、まずは現在使ってるフォームでできるかどうか試してみてくださいね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です