簡単な使い方をサンプルフォームを作りながらまとめてみます。Formは、記事の中にフォームを埋め込めるWordPressのプラグインです。ネットで調べてみると、お問い合わせフォームなどに利用している方が多いみたいですね。このプラグインには有料版と無料版がありますが、私のやりたい事は無料版でできました。有料版では、メール送信その他盛りだくさんの機能があるようですが、簡単な計算フォームでしたら無料版で十分だと思います。ちなみに、私の作りたかったフォームははこちらの記事の中にあります。失業保険がいくらもらえるかを自動計算するフォームです。計算するようになっています。このフォームを作るにあたり、計算する時に色々な条件を設定する必要がある事から「IF」等の構文が使えるものを探していました。使い方では、簡単なサンプルフォームを作ってみます。サンプルフォームはこちらです。このフォームは、「みかん」「りんご」「メロン」のどれかを選択して、個数を入れると合計金額を計算して表示するといった簡単なフォームになります。構文を入れるために、計算条件として個数が2個以上であれば合計価格は1割引になるようにしています。それでは実際に作っていきましょう。プラグインのインストールプラグインの新規追加から、こちらのプラグインをインストールして有効化しておきます。Formの設定が追加されているはずです。これでインストールは完了です。Formの設定を押下するとメインメニューが開きます。メインメニューはこのような画面になります。作成済フォームの一覧がここに表示されます。このリスト上で、作成済フォームの設定やコピー/削除などが行なえます。サンプルフォームが5個入っており、サンプルフォームの中身を見れば、たいていの事は理解できるかと思います。新規フォームの作成ボタンです。フォームの名前を入力してaddボタンを押すと新規フォームが作成されます。「test」という名前のフォームを追加すると以下のようになるはずです。3settingボタンフォーム(アイテム)リストから編集したいフォームのsettinngボタンを押すと、該当フォームの編集画面に移ります。新規作成した「test」のsettingを押下してフォーム編集画面を開きます。このような画面が表示されます。Formは、大きく分けて3つの機能でフォームを編集します。機能選択タブで以下のこの3つの機能を選択します。Fieldフォームコントールを選択する画面です。フォームコントロールはフォームに設置する様々な要素の事です。数値入力フィールドや、ラジオボタン、プルダウンメニュー、計算結果フィールドなど、たくさんのコントロールが選べます。追加したいコントロールを押すと、右側の3フォーム画面へコントロールが追加・配置されます。fieldで追加したコントロールの内容を編集するタブです。Settingsフォーム全体の設定をするタブです。Fieldタブが選択されているので、フォームコントロール一覧が表示されています。タブを変更すると、それぞれの編集画面に切り替わります。3フォーム画面1のフォームコントロールを追加・配置していくと、この画面でフォームの内容が表示されます。Settingsに移り、フォームコントロールの内容編集ができます。4セーブボタン、プレビューボタン保存と、プレビューボタンです。プレビューでは、実際にフォームが動作しますので、動作確認テストができます。フォームコントロールを追加するまずは、フォームコントロールを追加して、作りたいフォームの要素を決めます。Fieldタブを選択している画面で、追加したいコントロールを押すと、右側の画面に選択したコントロールが埋め込まれます。今回のサンプルでは、4個のコントロールを使います。Buttons(ラジオボタン)果物の種類を選択するためのコントロールとして使用します。2Number(数値入力)果物の個数を入力するためのコントロールとして使用します。ちなみに、このコントロールは新規フォームを作成すると最初から右側に設置されていますので、あえて追加する必要はありません。3Button(ボタン)計算をする時に押すボタンとして使用します。Value(計算結果)計算結果表示のためのフィールドとして使用します。このコントロールも新規フォームを作成すると最初から右側に設置されていますので、あえて追加する必要はありません。使いたいフォームコントロールを追加したら、それぞれのコントロールを編集していきます。Settingsタブに切り替わりコントロールの編集ができるようになります。Labelラジオボタンの任意タイトルを書きます。2RequiredRequiredにチェックを入れます。する事で入力必須項目となり、ラジオボタンのどれかを選択しないと計算ボタンを押しても計算が実行できず、エラーメッセージが出るようになります。3Choicesラジオボタンの内容を入力します。Textはボタン名称、Valueはボタン名称に対応する数値です。このラジオボタンのValueは価格にしています。右側に編集した結果が反映されているはずです。Settingsタブに切り替わりコントロールの編集ができるようになります。Label任意タイトルを書きます。Sixeコントロールのサイズを選択します。Small、Medium、Largeから選択でき、コントロールの横サイズが変更できます。ここではSmallを選択しています。Formatdigit(桁)またはnumber(数)を選択します。用途に応じて使い分けますが実際のところどちらでも動作に変わりはありません。画面ではdigitになっていますが、桁区切りのカンマ「,」等を表示したいのであればnumberが良いと思います。4Min、Max入力の最小値、最大値を入れておきます。ここで入力した範囲を超えるとエラーメッセージで出るようになります。5RequiredRequiredにチェックを入れます。する事で入力必須項目となり、入力しないと計算ボタンを押しても計算が実行できず、エラーメッセージが出るようになります。右側に編集した結果が反映されているはずです。Settingsタブに切り替わりコントロールの編集ができるようになります。typeボタンのタイプ(目的)選択します。resetは入力したものを空白にする機能、buttonは単純なボタン(イベントは自分で書く必要あり)、calculateは計算をして計算結果コントロールに表示するボタンです。このフォームではcalculateを使用します。2Valueボタンに表示されるテキストです。Userボタンの説明を書いておきます。右側に編集した結果が反映されているはずです。Settingsタブに切り替わりコントロールの編集ができるようになります。Label任意タイトルを書きます。Sixeコントロールのサイズを選択します。Small、Medium、Largeから選択でき、コントロールの横サイズが変更できます。ここではSmallを選択しています。Ecuationこのフィールドで、計算する時の条件文などを構文で記入できます。IFやORなどの使える構文は、Operatorsから選択できます。tutorialから説明サイトに飛びますのでそこで確認するようになっています。条件文で書く各コントロールのラベル名は、Operandsから選択できます。各コントロールのラベル名(fieldname1〜)は変更不可で覚えきれませので、ここで出てくるとありがたいです。ここでは、2個以上の入力ならば1割引にするという仕様を実現するためにIF文を使っています。field結果の最後に表示される文字列を入力します。xx,xxx円と表示したいので、「円」を入力しておきます。3,000,000)桁区切りの記号を入れておきます。一般的にはカンマですよね。「,」を入力しておきます。右側に編集した結果が反映されているはずです。Settingsタブでフォーム外観などの全体設定をしておきます。Descriptionフォームタイトルと説明を書きます。2自動計算をするか否かのチェックボックスこのサンプルフォームはボタンを押してから計算をさせる仕様としているので、全てのチェックを外しておきます。fieldsをチェックしておくと、ボタンがなくても数値を入力すれば自動で計算してくれます。3フォームの外観テンプレートあらかじめフォームの外観テンプレートが12種類ありますので、お好みの外観をここで選んでください。4CSSカスタマイズここでCSSのカスタマイズを記述できます。Nameですが、見出しタグのh2となっており、そのまま表示するとブログのスタイルに勝手に合わせてしまい、私の記事に挿入する時の外観としては好ましくありませんでした。そのため、ここでh2スタイルをクリアしています。information)で説明ページに飛びますので確認できます。CSSに詳しい方なら、もっと素敵なカスタマイズができるかと思いますよ。右側に編集した結果が反映されているはずです。プレビューで動作確認をするPreviewボタンを押してプレビューを表示し動作確認をします。Changesボタンを押して保存しておきます。これでサンプルフォームの作成は完成です。最後に実際の記事への挿入です。1メイン画面で作成したフォームの右側にあるShortcodeをコピーします。2コピーしたShortcodeを記事に貼り付けます。これで、記事への挿入は終了です。まとめ作業のおおまかな流れとしては以下となります。Formの説明となります。Formの全ての機能は説明していません。複雑な事もできるようですが、私自身もそこまで使いこなせていないのが本当のところです。本記事がこれから計算フォーム等を作成する方への参考になれば幸いです。最後まで読んで頂きましてありがとうございました。導入するのではないでしょうか。私も多分に漏れず入れています。本ブログのWordPressテンプレートはStinger8を使用しております。素人の私は、先人の皆様のブログ等を参考に試行錯誤しながらカスタマイズしています。「保存」ボタン押すとアイコンがくるくる回って終わらない。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。プロフィールhotaruです。夢は妻と2人で車で日本一周旅行に行く事です。当サイトは、ロリポップで運用しています。FX口座開設は、DMMFXがお得です。