WordPress個別サポート

見積もりフォームのような計算系のフォームをWordPressサイトに追加したい場合、Jazzy Formsプラグインが役立ちます。診断系のコンテンツにも活用できますが、ここでは選択内容に応じて合計金額が切り替わる見積もりフォームを例に使い方を説明します。

Jazzy Formsで作る見積もりフォームの例

Jazzy Formsで作る見積もりフォームの例

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

Jazzy Formsのインストール

「プラグイン」‐「新規追加」メニューからJazzy Formsプラグインをインストール、有効化します。

Jazzy Formsプラグインのインストール

Jazzy Formsプラグインのインストール

見積もりフォームの作成

続いて、見積もりフォームを作成します。いきなり複雑なフォームを作るのも大変なので、ひとまず次のような単純な見積もりフォームとします。パソコン教室の料金見積もりです。

Jazzy Formsで作る見積もりフォームの例

Jazzy Formsで作る見積もりフォームの例

機能は次のようになります。

パソコン教室の料金見積もりフォームの作成
  • 受講するコースを選択する(ラジオボタン:択一式)
  • 追加オプションを選択する(チェックボックス)
  • それぞれの料金を合計して表示する

以下、手順を紹介します。

新規フォームの作成

「Forms」メニューを開き、「New Form Title:」にフォーム名(例:見積もりフォーム)を入力します。

フォーム名の入力

フォーム名の入力

画面下の「Save」ボタンをクリックすると保存されます。

続いて、見積もりフォームに必要な項目を追加します。

コース選択(ラジオボタン)の作成

画面左側のフォーム要素を右側にドラッグアンドドロップしてフォームを組み立てます。ここでは、コースを選ぶためのラジオボタンを使います。

コース選択に使うラジオボタンをドラッグアンドドロップ

コース選択に使うラジオボタンをドラッグアンドドロップ

開いた画面でタイトル(1)とID(2)を入力します。IDは料金計算に使うので固有の名前をアルファベットで入力しておきましょう。個々の選択肢(3)と料金(4)も入力します。「Add」(5)をクリックすると、新たな選択肢を追加することができます。

選択肢の設定

ラジオボタンの設定

「Value」の使い道は料金とは限りません。診断系コンテンツでは質問ごとのポイントを設定することもできるでしょう。回答に応じてマイナスの数字も設定できます。あとはアイデア次第です。
診断系コンテンツの選択肢のvalue設定例

診断系コンテンツの選択肢のvalue設定例

オプション選択(チェックボックス)の作成

続いて、オプション選択に使うチェックボックスをドラッグアンドドロップします。

チェックボックスをドラッグアンドドロップ

チェックボックスをドラッグアンドドロップ

ラジオボタンと同じようにタイトル(1)とID(2)を入力します。さらに、チェックされたときの料金(3)と、チェックされなかったときの料金(4)を入力します。

チェックボックスの設定

チェックボックスの設定

合計金額の出力エリア(Output)の作成

合計金額を表示するため、「Output」をドラッグアンドドロップします。

出力エリアのドラッグアンドドロップ

出力エリアのドラッグアンドドロップ

ここまでと同じようにタイトル(1)とID(2)を入力します。

合計金額の設定

合計金額の設定

その他の項目は次のように設定することができます。

  • Formula --- 計算式を入力します。ここではコース(course)とオプション(pc)の合計です。すべて半角で入力(例:course + pc)しましょう。
  • Number format --- 金額の前後に付けるマークです。「Unit before number」には数字の前に付けるマーク(例:¥)、「Unit after number」には後に付けるマーク(例:「円」)を指定します。
  • Leading zeros --- 前に付けるゼロの桁数を選択します。
  • Decimals --- 小数点以下の桁数を選択します。
  • Thousands separator --- 3けた桁ごとの区切り文字を選択します。
  • Decimal point --- 小数点以下を区切る文字を選択します。

作成したフォームの表示

作成したフォームを保存して「General」タブからショートコードをコピーします。

見積もりフォームのショートコードをコピー

見積もりフォームのショートコードをコピー

コピーしたショートコードを任意の固定ページにペーストして見積もりフォームの表示を確認しましょう。

見積もりフォームの表示結果

見積もりフォームの表示結果

見積もりフォームのカスタマイズ

あとはJazzy Formsのメニューやフォーム要素を試しながら試行錯誤していただければと思いますが、カスタマイズ例をいくつか紹介します。

小計の表示

コースの隣に「コース料金」を表示するなど、小計を表示したい場合は、ラジオボタンと出力エリアを左右に並べる方法があります。

小計を表示する

小計を表示する

それには、左側に表示する項目の「Appearance」を開いて、「Width」で「1/2」を選択します。

左側の項目の幅を1/2に

左側の項目の幅を1/2に

さらに右側に表示する項目(出力エリア:Output)を追加して、同じように「Width」で「1/2」を選択します。このとき、「Start new row」のチェックは外しましょう。

右側の項目の幅も1/2に

右側の項目の幅も1/2に

これで、選択肢と小計などの項目を左右に並べて表示することができます。

選択肢に商品画像を表示

商品やサービスの画像を選択するスタイルにしたければ、CSSをカスタマイズする方法があります。

商品やサービスの画像を選択してもらうイメージ

商品やサービスの画像を選択してもらうイメージ

たとえば、次のようにラジオボタンの箇条書きについて:after擬似要素に画像を指定します。

/* コース1の画像 */
#jzzf_2_course li:nth-of-type(1):after {
    content: url(http://…略….png);
}
あくまでサンプルです。制作中のサイトで使うにはCSSセレクタや画像ファイル名の修正が必要です。

これで、選択肢のラジオボタンに画像が表示されるようになります。商品画像を選ぶ形にできます。

具体的なCSSは細かすぎるので掲載しませんが、興味がある方はWordPress個別サポートにご相談ください。

さらにCSSをカスタマイズすれば、こんな感じに仕上げることもできます。

見積もりフォームの仕上がり例

見積もりフォームの仕上がり例

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート