この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
コンタクトフォーム７で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はメールアドレスやテキストエリアなどの項目にも使うことができます。
こちらは当ブログのお問い合わせフォームですが、透かしを入れてあげるとよりユーザーが入力しやすくなりますね。
まずは試してみてください
いかがでしたでしょうか？
タグの法則さえある程度理解すればフォームをきれいに表示させることができます。
何度かやれば、すぐに覚えることができるので、まずは現在使ってるフォームでできるかどうか試してみてくださいね！
