WordPressプラグインで計算フォーム作成『Jazzy Forms』の使い方

WordPressで計算フォームを設置できるプラグイン『Jazzy Forms』に関しての説明です。WordPressの記事内で簡易な計算をユーザーにしてもらうのに非常に便利なプラグインです。

WordPressプラグイン『Jazzy Forms』をインストール

Jazzy Formsのインストール
  1. 左メニュー【プラグインの新規追加】をクリック
  2. 右上検索窓に【Jazzy Forms】と入力
  3. Jazzy Formsを【今すぐインストール】をクリック
  4. 【有効化】をクリック

WordPressの左のメニューに【Forms】が挿入されるのでクリックして管理画面を開きます

Jazzy Formsの使い方と管理画面

Jazzy Formsの使用方法
  • ①【Select a form】:計算式のネーム(任意でつける)
  • ②【Elements】:実際に計算を作る画面です
  • ③【Input】:計算式の中身(1+2なら1や2を表す)
  • ④【Text Area】:任意で文字を入力できる
  • ⑤【Drop-down Menu】:ドロップダウンメニューを作成
  • ⑥【Radio buttons】:ラジオボタンを作成
  • ⑦【Checkbox】:チェックボックスを作成
  • ⑧【Output】:実際の計算結果及び計算式を入力
  • ⑨【Update Button】:実際に計算実行をするボタン
  • ⑩【Reset Button】:入力したものをリセットするボタン

英語表記なので少しわかりずらいですが、ここでは基本的なInputとOutputの使い方を説明します。

『Input』について(Jazzy Forms使用方法)

『Input』を右にドラッグ&ドロップで追加し広げた画面が以下のものです

例えばリンゴ〇個とミカン〇個を足して果物は何個?という質問であれば『Input』はこのリンゴとミカンを表します
Jazzy Formsの『Input』について
  • ①【Title】:任意のタイトルを入力します。このタイトルが表示されます
  • ②【ID】:計算するときに必要なIDです(A+Bと作りたいならA及びBとします)
  • ③【Default】:入力ボックスの初期の文字(0や入力や白紙でもいい)
  • ④【With】:横幅の表示数(1~4つまで選べます)
  • ⑤【Start new row】:横幅が1つ以上ならその数に合わせチェックを外します

『Input』の出来上がり

ここでは先ほどのリンゴとミカンの数を入力する画面を作ったものが以下のものです。(まだ計算結果を表示する所は作っていない状態です。)

『Output』について(Jazzy Forms使用方法)

『Input』2つと『Output』1つを右にドラッグ&ドロップで追加し『Output』広げた画面が以下のものです
『Input』にはすでにリンゴ(ID:A)とミカン(ID:B)が入力されています。

Jazzy Formsの『Output』について
  • ①【Title】:任意のタイトルを入力します。このタイトルが表示されます
  • ②【ID】:この値を使ってまだ計算を続けるならば任意で入力
  • ③【Formula】:InputのIDを使い計算する(+,-,/,*を使用可能)
記事内に張り付けるためのショートコードをコピーします

Jazzy Formsのシヨートコード
  • ①【Title】:任意のタイトルを入力します
  • ②【General】:【General】タブをクリック
  • ③【Shortcode】:ショートコードをコピー
  • ④【Save】:保存します
以下が出来上がった計算式です

『Reset Button』を追加する

【Reset Button】を追加すると入力項目を消去できます。【Title】を【リセット】と変更したものが以下です

ここでは一番簡単な計算をしてみました。『Input』と『Output』を使うだけでも簡単な計算は出来そうです。加法,減法,乗法,除法の四則演算が使えるだけでも色々使えることは多いと思います。計算内には簡単な『if』も使えます。エクセルで『if』になじみがある人は分かるでしょうが、『if』が使えれば計算書の幅は大きく広がります。

Jazzy Formsが英語表記なので少しわかりずらいことと、全ての機能を使いこなすのは中々難しいですが、ブログ記事内で簡単に計算書が作れるので、意外と重宝できるWordPressで計算フォームを設置できるプラグインだと思います。