『Jazzy Forms』のドロップダウンメニューの使い方・作成方法

2018年1月30日

ドロップダウンメニュー
WordPressで計算フォームを設置できるプラグイン『Jazzy Forms』で出来ることを色々紹介して行きます。【Drop-down Menu】を使った簡単な計算について説明して行きます。

『Jazzy Forms』の【Drop-down Menu】の使い方

新しく計算フォームの名前をつけますので【new】をクリックしてここでは【TEST6】としています

ドロプダウンメニュー

まずは管理画面で以下の4つのフォームを右にドラッグ アンド ドロップします

ドロプダウンメニュー

使用するフォームとタイトル
  • 【Free HTML】:果物を選んで購入個数を決めてください
  • 【Drop-down Menu】:果物を選んでください
  • 【Input】:購入する個数を入力して下さい
  • 【Output】:購入金額は以下の通りです

では1つずつ見ていきます。

Jazzy Formsで【Drop-down Menu】を使った計算表の作成

ドロップダウンメニューは色んな使い方がありますが、ここでは単純な計算をドロップダウンメニューを使って行います。

Jazzy Forms【Free HTML】フォームの作成

【Free HTML】フォームの入力内容
  • HTML codeを入力します。(文字だけでもいいですし私は自分のブログの見出し(h4)を使っています)

ドロプダウンメニュー

Jazzy Forms【Drop-down Menu】フォームの作成

【Drop-down Menu】フォームの作成内容
  • ①タイトルを入力します(任意)
  • ②計算する為に使うIDを入力(任意)
  • ③【Add】をクリックすると項目が増えます
  • ③計算したいタイトル(左)とその値段(右)を入力します
  • ③一番上は値が空欄で無いと計算が作動しないケースもあります

ドロプダウンメニュー

Jazzy Forms【Input】フォームの作成

【Input】フォームの作成内容
  • ①タイトルを入力します(任意)
  • ②計算する為に使うIDを入力(任意)
  • ③Defaultは最初に表示したい値なので0なら0もしくは空欄でいいですがアレンジして使って下さい

ドロプダウンメニュー

Jazzy Forms【Output】フォームの作成

【Output】フォームの作成内容
  • ①タイトルを入力します(任意)
  • ②さらに計算を続ける場合は計算する為に使うIDを入力(任意)
  • ③Formulaには上記のIDを使い計算を入力します(ここではA*B)

記事にショートコードをコピーして挿入する

ドロップダウンメニューの計算のシヨートコード
  • ①【General】:【General】タブをクリック
  • ②【Shortcode】:ショートコードをコピー
  • ③【Save】:保存します
  • あとはコードを記事のお好きな場所に張り付ければ終了です

ドロプダウンメニュー

以下が出来上がった計算表です
  • 果物選んで購入個数を決めてください

Jazzy Formsの【Drop-down Menu】のまとめ

【Drop-down Menu】は決められた項目に対して値を設定して他の値との計算などに使えます。例えばお店のメニューが決まっていて料金も決まっていて後は個数が分かれば代金が分かるわけです。

又、上記で言えば個数も限界値があるのであれば【Drop-down Menu】を2つ使って計算も可能です。

【Drop-down Menu】を2つ使った計算

先ほどと同じ計算で個数の入力を決められた個数に限定されるようなケースは【Drop-down Menu】を2つ使って計算も可能です。

以下が出来上がった計算表です。こちらは【Reset Botton】を加えました
  • 果物選んで購入個数を決めてください


特段【Drop-down Menu】を2つ使う必要のない計算ですが、どちらも選択内容が固定されたもの同士を計算する場合は計算を使う人におかしな数字を入力してのエラーもありません。使い方は人それぞれですので、色んな計算に使ってみてはいかがでしょうか