WordPressブログに簡単にフォームを埋め込むためのプラグイン、Calculated Fields Form を使用してみました。
せっかくですので、簡単な使い方をサンプルフォームを作りながらまとめてみます。
Calculated Fields Formとは
Calculated Fields Formは、記事の中にフォームを埋め込めるWordPressのプラグインです。
ネットで調べてみると、お問い合わせフォームなどに利用している方が多いみたいですね。
このプラグインには有料版と無料版がありますが、私のやりたい事は無料版でできました。
有料版では、メール送信その他盛りだくさんの機能があるようですが、簡単な計算フォームでしたら無料版で十分だと思います。
ちなみに、私の作りたかったフォームははこちらの記事の中にあります。
失業保険がいくらもらえるかを自動計算するフォームです。
直近の収入・年齢・勤続年数・退職理由を入力すると、雇用保険の基本手当の仕様に準じて、給付総額・給付日数・日額・月額を計算するようになっています。
このフォームを作るにあたり、計算する時に色々な条件を設定する必要がある事から「IF」等の構文が使えるものを探していました。
そこでヒットしたのが、Calculated Fields Formでした。
Calculated Fields Form の使い方
では、簡単なサンプルフォームを作ってみます。
サンプルフォームはこちらです。
このフォームは、「みかん」「りんご」「メロン」のどれかを選択して、個数を入れると合計金額を計算して表示するといった簡単なフォームになります。
構文を入れるために、計算条件として個数が2個以上であれば合計価格は1割引になるようにしています。
それでは実際に作っていきましょう。
プラグインのインストール
プラグインの新規追加から、こちらのプラグインをインストールして有効化しておきます。
有効化すると、WordPressのメニューにCalculated Fields Formの設定が追加されているはずです。
これでインストールは完了です。
メイン画面
WordPressのメニューにCalculated Fields Formの設定ボタン押下、またはインストール済プラグイン一覧からCalculated Fields Formの設定を押下するとメインメニューが開きます。
メインメニューはこのような画面になります。
①フォーム（アイテム）リスト一覧
作成済フォームの一覧がここに表示されます。
このリスト上で、作成済フォームの設定やコピー／削除などが行なえます。
あらかじめサンプルフォームが5個入っており、サンプルフォームの中身を見れば、たいていの事は理解できるかと思います。
②新規アイテム追加
新規フォームの作成ボタンです。
フォームの名前を入力してaddボタンを押すと新規フォームが作成されます。
例えば「test」という名前のフォームを追加すると以下のようになるはずです。
③settingボタン
フォーム（アイテム）リストから編集したいフォームのsettinngボタンを押すと、該当フォームの編集画面に移ります。
フォーム編集画面
新規作成した「test」のsettingを押下してフォーム編集画面を開きます。
このような画面が表示されます。
①機能選択タブ
Calculated Fields Formは、大きく分けて3つの機能でフォームを編集します。
機能選択タブで以下のこの3つの機能を選択します。
- Add a Field
フォームコントールを選択する画面です。
フォームコントロールはフォームに設置する様々な要素の事です。
数値入力フィールドや、ラジオボタン、プルダウンメニュー、計算結果フィールドなど、たくさんのコントロールが選べます。
追加したいコントロールを押すと、右側の③フォーム画面へコントロールが追加・配置されます。 - Field Settings
Add a fieldで追加したコントロールの内容を編集するタブです。 - Form Settings
フォーム全体の設定をするタブです。
②機能選択タブの内容
上記の画像ではAdd a Fieldタブが選択されているので、フォームコントロール一覧が表示されています。
タブを変更すると、それぞれの編集画面に切り替わります。
③フォーム画面
①のフォームコントロールを追加・配置していくと、この画面でフォームの内容が表示されます。
ここからフォームコントロールを選択するとField Settingsに移り、フォームコントロールの内容編集ができます。
④セーブボタン、プレビューボタン
保存と、プレビューボタンです。
プレビューでは、実際にフォームが動作しますので、動作確認テストができます。
Add a Field フォームコントロールを追加する
まずは、フォームコントロールを追加して、作りたいフォームの要素を決めます。
Add a Fieldタブを選択している画面で、追加したいコントロールを押すと、右側の画面に選択したコントロールが埋め込まれます。
今回のサンプルでは、4個のコントロールを使います。
①Radio Buttons（ラジオボタン）
果物の種類を選択するためのコントロールとして使用します。
②Number（数値入力）
果物の個数を入力するためのコントロールとして使用します。
ちなみに、このコントロールは新規フォームを作成すると最初から右側に設置されていますので、あえて追加する必要はありません。
③Button（ボタン）
計算をする時に押すボタンとして使用します。
④Calculated Value（計算結果）
計算結果表示のためのフィールドとして使用します。
このコントロールも新規フォームを作成すると最初から右側に設置されていますので、あえて追加する必要はありません。
Field Settings フォームコントロールの編集
使いたいフォームコントロールを追加したら、それぞれのコントロールを編集していきます。
Radio Buttons（ラジオボタン）コントロールの設定
右側に設置したRadio Buttonsコントロールを押すと、Field Settingsタブに切り替わりコントロールの編集ができるようになります。
①Field Label
ラジオボタンの任意タイトルを書きます。
②Required
Requiredにチェックを入れます。
こうする事で入力必須項目となり、ラジオボタンのどれかを選択しないと計算ボタンを押しても計算が実行できず、エラーメッセージが出るようになります。
③Choices
ラジオボタンの内容を入力します。
Textはボタン名称、Valueはボタン名称に対応する数値です。
このラジオボタンのValueは価格にしています。
④編集結果
右側に編集した結果が反映されているはずです。
Number（数値入力）コントロールの設定
右側に設置したNumberコントロールを押すと、Field Settingsタブに切り替わりコントロールの編集ができるようになります。
①Field Label
任意タイトルを書きます。
②Field Sixe
コントロールのサイズを選択します。
Small、Medium、Largeから選択でき、コントロールの横サイズが変更できます。
ここではSmallを選択しています。
③Number Format
digit（桁）またはnumber（数）を選択します。
用途に応じて使い分けますが実際のところどちらでも動作に変わりはありません。
画面ではdigitになっていますが、桁区切りのカンマ「,」等を表示したいのであればnumberが良いと思います。
④Min、Max
入力の最小値、最大値を入れておきます。
ここで入力した範囲を超えるとエラーメッセージで出るようになります。
⑤Required
Requiredにチェックを入れます。
こうする事で入力必須項目となり、入力しないと計算ボタンを押しても計算が実行できず、エラーメッセージが出るようになります。
⑥編集結果
右側に編集した結果が反映されているはずです。
Button（ボタン）コントロールの設定
右側に設置したButtonコントロールを押すと、Field Settingsタブに切り替わりコントロールの編集ができるようになります。
①Select button type
ボタンのタイプ（目的）選択します。
resetは入力したものを空白にする機能、buttonは単純なボタン（イベントは自分で書く必要あり）、calculateは計算をして計算結果コントロールに表示するボタンです。
このフォームではcalculateを使用します。
②Value
ボタンに表示されるテキストです。
③Instructions for User
ボタンの説明を書いておきます。
④編集結果
右側に編集した結果が反映されているはずです。
Calculated Value（計算結果）コントロールの設定
右側に設置したCalculated Valueコントロールを押すと、Field Settingsタブに切り替わりコントロールの編集ができるようになります。
①Field Label
任意タイトルを書きます。
②Field Sixe
コントロールのサイズを選択します。
Small、Medium、Largeから選択でき、コントロールの横サイズが変更できます。
ここではSmallを選択しています。
③Set Ecuation
このフィールドで、計算する時の条件文などを構文で記入できます。
IFやORなどの使える構文は、Operatorsから選択できます。
詳しい情報は、Read an equation tutorialから説明サイトに飛びますのでそこで確認するようになっています。
条件文で書く各コントロールのラベル名は、Operandsから選択できます。
各コントロールのラベル名（fieldname1〜）は変更不可で覚えきれませので、ここで出てくるとありがたいです。
ここでは、2個以上の入力ならば1割引にするという仕様を実現するためにIF文を使っています。
こんな感じです。
IF(fieldname2>1,fieldname2*fieldname4*0.9,fieldname2*fieldname4)
④Symbol to display at the end of calculated field
結果の最後に表示される文字列を入力します。
xx,xxx円と表示したいので、「円」を入力しておきます。
⑤Symbol for grouping thousands (Ex: 3,000,000)
桁区切りの記号を入れておきます。
一般的にはカンマですよね。「,」を入力しておきます。
⑥編集結果
右側に編集した結果が反映されているはずです。
Form Settings フォーム全体の設定
次に、Form Settingsタブでフォーム外観などの全体設定をしておきます。
①Form Name / Description
フォームタイトルと説明を書きます。
②自動計算をするか否かのチェックボックス
このサンプルフォームはボタンを押してから計算をさせる仕様としているので、全てのチェックを外しておきます。
例えば、Eval dynamically the equations associated to the calculated fieldsをチェックしておくと、ボタンがなくても数値を入力すれば自動で計算してくれます。
③フォームの外観テンプレート
あらかじめフォームの外観テンプレートが12種類ありますので、お好みの外観をここで選んでください。
④CSSカスタマイズ
ここでCSSのカスタマイズを記述できます。
実は①のForm Nameですが、見出しタグのh2となっており、そのまま表示するとブログのスタイルに勝手に合わせてしまい、私の記事に挿入する時の外観としては好ましくありませんでした。
そのため、ここでh2スタイルをクリアしています。
CSSのカスタマイズ方法は、Customize Form Design (Enter the CSS rules. More information)で説明ページに飛びますので確認できます。
CSSに詳しい方なら、もっと素敵なカスタマイズができるかと思いますよ。
⑤編集結果
右側に編集した結果が反映されているはずです。
プレビューで動作確認をする
Previewボタンを押してプレビューを表示し動作確認をします。
問題なければ、Save Changesボタンを押して保存しておきます。
これでサンプルフォームの作成は完成です。
実際の記事への挿入
最後に実際の記事への挿入です。
①メイン画面で作成したフォームの右側にあるShortcodeをコピーします。
②コピーしたShortcodeを記事に貼り付けます。
これで、記事への挿入は終了です。
簡単です。
まとめ
作業のおおまかな流れとしては以下となります。
- メイン画面で新規フォームを追加
- Add a Field タブで新規フォームにコントロールを追加・配置する
- Field Settings タブで各コントロールを編集する
- Form Settings タブでフォーム外観を設定する
- プレビューでテストする
- 実際の記事への挿入
以上で、サンプルフォームを作りながらのCalculated Fields Formの説明となります。
本記事では、簡単なサンプルフォームを作成する説明となっていますので、Calculated Fields Formの全ての機能は説明していません。
もっと複雑な事もできるようですが、私自身もそこまで使いこなせていないのが本当のところです。ご容赦願います。
本記事がこれから計算フォーム等を作成する方への参考になれば幸いです。
最後まで読んで頂きましてありがとうございました。
