JetFormBuilderで見積もりフォームを作る方法。計算フィールドの具体例

Web制作の問い合わせフォームで「まず概算だけ知りたい」という読者に対して、毎回手動で返信するのは意外と負担です。もちろん正式な見積もりはヒアリング後に出すべきですが、ページ数や必要機能から大まかな金額をその場で見せられると、問い合わせ前の不安を減らせます。

今回はJetFormBuilderの計算フィールドを使い、制作料金の概算見積もりフォームを作る例で考えます。Elementorで作ったサービスページにフォームを置き、「ページ数」「デザイン種別」「追加機能」を選ぶと、概算金額が自動で変わる構成です。

大事なのは、計算フィールドを「料金表の完全自動化」として考えすぎないことです。この記事では、問い合わせ前の目安を出し、送信後に管理者が正式見積もりへ進めるための実務的なフォームとして設計します。

JetFormBuilder公式ページを見てみる

この記事で作るもの

• Web制作サービス用の概算見積もりフォーム
• ページ数、デザイン種別、追加機能の入力項目
• 入力値を使って概算金額を出す計算フィールド
• 送信後に管理画面とメール通知で確認する流れ
• 複雑にしすぎない料金シミュレーターの境界線

まず何を作るのか

例として、WordPressサイト制作のサービスページに置くフォームを作ります。読者がページ数や必要機能を選ぶと、画面内に概算金額が表示されます。送信すると、管理者には入力内容と概算金額が届き、正式な見積もり作成に進めます。

フォームの入力項目は、最初から細かくしすぎません。実務では、サーバー移行、撮影、ライティング、予約機能、会員機能、決済、外部連携など、料金に影響する要素はたくさんあります。ただ、最初のフォームで全部聞くと離脱しやすくなります。ここでは、見積もりの方向性が伝わる最低限の項目に絞ります。

JetFormBuilderの計算フィールドは、フォーム内の値やメタ情報を使って計算できるフィールドです。公式ドキュメントでも、数式、四則演算、丸め、条件式、フィールド値のマクロなどが案内されています。今回はその中でも、初心者が実務に置き換えやすい「選択肢の値を合計する」使い方に絞ります。

JetEngineでどのデータを持たせるのか

この記事の主役はJetFormBuilderですが、JetEngineと組み合わせるなら、サービス情報をデータの箱（CPT）として持たせると管理しやすくなります。たとえば、Web制作サービスを service_plan というCPTで管理し、サービスページごとに基本料金や説明を持たせます。

設定例は次の通りです。

このようにしておくと、Elementor側のサービス詳細ページで基本料金を表示し、その下にJetFormBuilderの見積もりフォームを置けます。さらに、計算式の中で現在表示しているサービスのメタ値を使う構成にすれば、サービスごとに基本料金を変える発展形も考えられます。最初は固定値で十分ですが、複数プランに広げるならJetEngine側のデータ設計が効いてきます。

Elementor側ではどう表示するのか

Elementor側では、サービスページの中にフォームを埋め込みます。構成としては、上から「サービスの説明」「料金の考え方」「見積もりフォーム」「注意書き」「問い合わせ導線」の順が分かりやすいです。計算結果をいきなり見せるより、何の概算なのかを先に説明してからフォームを置きます。

フォーム側では、次のような並びにします。

• ページ数: 5ページ / 10ページ / 20ページ
• デザイン種別: テンプレート調整 / オリジナル設計
• 追加機能: 問い合わせフォーム / 予約導線 / 会員向けページ
• 概算金額: Calculated Fieldで表示
• お名前、メール、相談内容
• 送信ボタン

計算結果はフォームの中盤に置くと、読者が選択を変えながら確認できます。ただし、送信ボタンの直前にも「この金額は概算です」と短く添えると誤解が減ります。本文内で大きく広告的に見せるより、フォームの判断材料として自然に見せる方が信頼感が出ます。

計算フィールドの具体例

JetFormBuilderの選択系フィールドでは、選択肢ごとに計算用の値を持たせます。たとえば、ページ数のRadioでは「5ページ」の表示ラベルに対して、計算用の値を 50000 にします。追加機能のCheckboxでは、選ばれたものの値が合計に入るようにします。

概算金額のCalculated Fieldには、次のような考え方の式を入れます。実際のフィールド名は、フォーム内で設定した名前に合わせてください。

%page_count% + %design_type% + %option_items%

公式の計算式ガイドでは、四則演算に加えて、Math.round() のような丸め処理や、条件によって値を変える式も案内されています。たとえば、法人向けだけ最低金額を上げたい場合は、単純な合計だけでなく条件式を使う考え方になります。

(%client_type% == 2) ? (%estimate_total% + 30000) : %estimate_total%

上の式は、考え方を示す簡易例です。実際には、選択肢の値、フィールド名、比較に使う値をフォーム設定に合わせて確認してください。条件式を増やすほどフォームは便利になりますが、同時に「なぜその金額になったのか」を説明しにくくなります。

条件分岐を入れるときの考え方

見積もりフォームでは、個人と法人、テンプレート制作とオリジナル制作、保守ありと保守なしで料金を変えたいことがあります。この場合、フォームの表示条件や計算式を増やせます。ただし、最初から複雑な分岐にすると、編集者も利用者も分かりにくくなります。

おすすめは、まず料金に大きく影響する分岐だけを入れることです。たとえば、次の3つに絞ります。

• デザインをテンプレート調整にするか、オリジナル設計にするか
• 予約や会員機能のような大きな追加機能を選ぶか
• 保守契約の相談も希望するか

このくらいなら、フォームを見た読者も理解できます。逆に、細かい作業項目を30個並べて全部計算しようとすると、概算フォームではなく見積もり業務システムになります。そこまで必要なら、WordPressフォームだけで完結させず、業務フローや権限、顧客管理の設計も含めて検討した方が安全です。

送信後の運用まで決めておく

計算フォームは、画面上で金額を出して終わりではありません。送信後に、管理者が何を見て、どう返信するかまで決めておく必要があります。JetFormBuilderでは、送信後のアクションとしてメール通知や投稿作成などを組み合わせられます。今回のような概算見積もりでは、まずメール通知と記録を整えるだけでも実務に使いやすくなります。

通知メールには、最低限次の情報を入れます。

• 氏名、メールアドレス
• ページ数、デザイン種別、追加機能
• 概算金額 estimate_total
• 相談内容
• 正式見積もりが必要かどうか

自動返信メールには、概算金額をそのまま強く断定しない方が安全です。「入力内容に基づく概算です。正式な金額はヒアリング後にご案内します」と入れておくと、誤解を減らせます。計算フィールドは営業判断を助ける道具であり、契約条件を自動確定するものではないと考えてください。

どこから複雑になりすぎるのか

複雑になりすぎる境界は、フォームを見た読者が「何を選べばよいか分からない」と感じるところです。制作側は細かく計算したくなりますが、問い合わせ前の読者に必要なのは、正確な見積書ではなく、予算感と相談のきっかけです。

次のような状態になったら、設計を見直した方がいいです。

• 選択項目が多すぎて、フォームがLPより長くなっている
• 条件式が増えすぎて、管理者が計算根拠を説明できない
• 割引やキャンペーンをフォーム内だけで管理している
• 個人情報や支払い情報に近い内容まで同じフォームで扱っている
• 正式見積もりと概算表示の区別が曖昧になっている

とくに個人情報や契約に関わるフォームでは、プライバシーポリシー、同意、保存期間、管理者権限、スパム対策を別途考える必要があります。JetFormBuilderはフォームと計算の仕組みを作れますが、法務、セキュリティ、顧客対応の設計まで自動で代替するものではありません。

管理者があとで直しやすい設計にする

見積もりフォームでよくある失敗は、最初から完璧な料金表を再現しようとすることです。制作料金は、ページ数だけでなく、素材の有無、文章作成、撮影、既存サイトからの移行、外部ツール連携、確認回数などで変わります。これを全部フォームに入れると、読者は途中で疲れますし、管理者も式を保守できなくなります。

最初は「料金に大きく影響する項目」だけを計算に入れます。今回なら、ページ数、デザイン種別、追加機能の3つです。細かい調整は、送信後の正式見積もりで扱います。フォーム内の概算金額は、問い合わせ前の目安として使い、契約金額の確定には使わない方針にします。

管理者があとで直しやすくするには、選択肢のラベルと計算用の値を表にして残しておくと便利です。たとえば「10ページ=90000」「オリジナル設計=80000」「予約導線=60000」のように、フォーム設定と同じ内容を運用メモに残します。将来、価格改定をするときに、どの選択肢の値を直せばよいかが分かります。

表示金額の見せ方で信頼感が変わる

計算結果は、ただ大きな数字を出せばよいわけではありません。読者にとっては、その金額が何を含むのか、どこまでが概算なのかが重要です。フォームの近くに「概算金額には初期設計と基本実装を含みます」「正式な金額は内容確認後にご案内します」のような短い説明を置くと、数字だけが独り歩きしにくくなります。

金額表示は、フォーム内では「概算金額」として見せます。「お支払い金額」「確定料金」のような表現は避けます。支払い機能や契約管理まで含める場合は、決済、キャンセル、個人情報、メール通知、管理者権限を別の設計として考える必要があります。JetFormBuilderの計算フィールドは便利ですが、支払い契約の仕組みそのものではありません。

また、割引を入れる場合は慎重にします。「今だけ10%OFF」のようなキャンペーンをフォームの式に直接入れると、キャンペーン終了時に消し忘れることがあります。割引を使うなら、終了日、表示文、計算式、メール本文をセットで見直す運用にしておくと安全です。

小さくテストするための確認項目

公開前には、管理者として最低限のテストをします。5ページ、テンプレート、追加機能なしを選んだときに想定通りの金額になるか。10ページ、オリジナル、予約導線ありを選んだときに合計が合うか。Checkboxを複数選んだときに、選択した分だけ加算されるか。未選択の状態で変な数字が出ないか。スマホ画面で計算結果が見切れないか。これらを確認します。

送信テストも必要です。管理者宛メールに概算金額が入っているか、自動返信に「正式見積もりではない」説明が入っているか、送信記録で入力値を追えるかを確認します。フォームの見た目だけではなく、送信後にスタッフが対応できる状態まで確認して初めて実務で使えます。

もし計算結果が合わない場合は、式だけを見るのではなく、各選択肢の値を確認します。表示ラベルは「予約機能」でも、計算値が空になっていると合計に入りません。フィールド名を変更したのに式の中の名前を直していない、Checkboxの値が文字列扱いになっている、条件分岐の比較値が合っていない、といった原因もよくあります。

この構成が向いているケース

• Web制作、広告運用、コンサルティングなど、概算レンジを先に見せたいサービス
• ページ数や機能追加で価格が大きく変わるサービス
• 問い合わせ前の心理的ハードルを下げたいサービスページ
• 正式見積もりの前に、相談内容を整理して受け取りたい制作会社

逆に、価格が完全固定の商品や、個別条件が多すぎて概算がほとんど意味を持たない案件では、計算フォームよりも普通の相談フォームの方が分かりやすいことがあります。フォームを高機能にする前に、読者が知りたい情報を絞ることが大切です。

公開後に見直すべき数字

見積もりフォームは、公開して終わりではありません。問い合わせの質を見ながら、選択肢と計算値を調整します。たとえば、概算が低すぎて予算の合わない問い合わせが増えるなら、基本料金や追加機能の値を見直します。逆に、概算が高く見えすぎて送信数が落ちるなら、選択肢の説明や料金の含まれる範囲を見直します。

ただし、数字を頻繁に変えすぎると管理者が混乱します。変更した日、変更前の値、変更後の値、理由を簡単に残しておくと安心です。フォームの計算式はページ上では見えにくい部分なので、担当者が変わったときに「なぜこの金額になるのか」を追える状態にしておく必要があります。

また、フォーム送信後の対応時間も見直しポイントです。概算を自動表示しても、正式見積もりの返信が遅ければ機会損失になります。JetFormBuilderで受け取った内容をもとに、スタッフが何を確認し、どのテンプレートで返信し、どの段階で商談に進めるのかまで決めておくと、フォームが単なる飾りではなく営業導線として機能します。

まとめ

JetFormBuilderの計算フィールドを使うと、ページ数、デザイン種別、追加機能のような入力値から、概算見積もりをフォーム内で表示できます。今回の例では、page_count、design_type、option_items を用意し、estimate_total で合計を見せる構成にしました。

運用面では、画面上の自動計算だけでなく、送信後のメール通知、管理画面での確認、正式見積もりへの導線まで決めておくことが重要です。最初はシンプルな式から始め、条件分岐や複雑な料金表は必要になってから足す方が、読者にも管理者にも扱いやすいフォームになります。

JetFormBuilder公式ページを見てみる