ブログ型ホームページ制作ならWebma! 制作費無料、月額格安。無制限フォローと強力なSEO、そしてアクセス解析レポートも毎週提供の集客できるホームページ制作サービス
お気軽にお問い合わせください。
0120-980-939
受付時間 10:00~18:00(土・日・祝日除く)
公開日:2016年7月29日
content0729

営業時間などを入力する項目はドロップダウンメニューがおすすめ

仮に以下のような、テキストのコードで作った時間を直接入力するフォームがあったとします。

上記画像のお問い合わせ編集ページ内のコードは以下の通りです。

[text* your-time class:form-control]

このコードにした時のメリットとしては、お客様が「14:00」でも「14時」でも「午後早め」でも好きなように入力できるという点ですね。
ですがデメリットとしてはお客様が誤って営業時間外の時間を入力してしまったら、あなたもお客様も確認の作業が手間ですよね。
そんな時はドロップダウンメニューで時間の項目をつくり、そこから選択してあげるようにしましょう!

セットで覚えると便利!ある特定の数値や項目をデフォルト値に設定する方法

テキストのタグからドロップダウンメニューへステップアップをしたら、セットで一緒に覚えておきたいのがデフォルト値

例えば10時~18時まで1時間刻みので時間を選択するドロップダウンメニューを作成した際、通常通り作成すると10:00(もしくは空白)となりますね。
ですがよく選択されるのが14時なので、フォーム画面を表示させたときに既に14時に選択されていると便利だな~と思うことはありませんか?

好きな時間や項目を表示させることは簡単にできます!

お問い合わせフォームの編集画面でドロップダウンのタグを作成します。

①タグを挿入したい箇所を左クリックし、メニューから「ドロップダウンメニュー」をクリックします。

「フォームタグ生成:ドロップダウンメニュー」の画面が表示されますので、以下の設定をしてください。

ⅰ)必須項目か任意項目か

必須の場合、項目が選択されていないとフォームが送信されないようになっています。
必須項目を選択した場合、タグ内の”select”の後にアスタリスクが付きます。

※タグ挿入後任意項目にしたい場合はこのアスタリスクを外すだけでOKです。

ⅱ)タグの名前

基本的に名前は「your-(半角英語で任意の名前)」を入力してください。今回時間の選択なので「your-hour」としました。

ⅲ)オプション

選択項目を入力していきます。1項目1行で時間やメニューを入力していきます。

②入力が終わりましたら画面右下「タグを挿入」をクリックします。

すると、以下のようなタグが挿入されます。

[select* your-hour "10時" "11時" "12時" "13時" "14時" "15時" "16時" "17時" "18時"]

さて、この状態ですとドロップダウンメニューは「10時」を表示している状態です。
ここからデフォルト値を設定していきます!

③”default:”を手入力

“default:”のあとは14時の項目が挿入したコードの左から何番目かという数字を入力します。

①10時 ②11時 ③12時 ④13時 ⑤14時

この場合14時は5番目ですね。ですのでタグ内名前の後に、半角スペースdefault:5と入力します。

[select* your-hour default:5 "10時" "11時" "12時" "13時" "14時" "15時" "16時" "17時" "18時"]

④仕上がりを確認してみましょう!

このお問い合わせフォームのショートコードをコピーし、フォームを表示させたいページに貼り付けます。
保存ボタンをクリックし、ページを表示させてください。
この数字を変更することで最初のオプションの項目以外のものでもデフォルト値に設定できましたね!

この記事のキーワード

この記事の著者

渡邉清子
渡邉清子
Webma!チーム デザイナー
記事一覧

PR

engage




著者一覧

多胡祐子
多胡祐子

Webma!チーム デザイナー

渡邉清子
渡邉清子

Webma!チーム デザイナー

増子貴仁
増子貴仁

Cross&Crown LLC代表社員、Cross&Crown Security Intelligence LLC代表社員。

mautic is open source marketing automation