AI要約
ユーザーが製品を選択して即座に支払いができる、ウェブサイト用の価格計算ツールを作成する方法をお探しですか?
WPFormsを使用すると、ユーザーはさまざまなビジネスやユースケース向けの注文フォームを作成でき、価格を自動計算できることをお知らせできて嬉しく思います。
それでは、早速、ウェブサイト用の価格計算ツールを作成するために必要な手順を見ていきましょう!
ウェブサイトの価格計算ツールを作成する方法
WPForms を使用してウェブサイトに価格計算ツールを作成するのは非常に簡単です。始めるには以下の手順に従ってください!
この記事の内容
1. WPFormsプラグインをインストールして有効化する
WPForms は、お問い合わせフォームや注文フォームのようなフォームを作成するための優れたツールです。2,100 以上のWordPress フォームテンプレートを利用できます。
計算アドオンを使用するには、WPForms Pro を入手する必要があります。これにより、カスタマイズ可能な合計フィールドを持つ注文フォームなどの機能がさらに利用できるようになります。

開始するには、Proライセンスを購入してください。次に、ウェブサイトにWPFormsをインストールします。ヘルプが必要な場合は、WordPressにプラグインを追加する方法の手順に従ってください。
2. WPForms と Stripe を接続する
WPForms を入手したら、Stripe Pro アドオンを追加する必要があります。
必要に応じて、PayPal や Square などの別の決済処理業者のアドオンをインストールすることもできますが、価格計算フォームの作成には Stripe をお勧めします。
さて、WordPress のメニューから WPForms に移動し、アドオンをクリックします。

Stripe Pro アドオンを探し、ウェブサイトにインストールします。これを行うには、インストールボタンをクリックし、次に有効化ボタンをクリックします。

次に、WPForms » 設定に移動し、決済をクリックします。ここで、使用したい通貨の種類を選択できます。

次に、青いボタンをクリックして Stripe の詳細を入力し、サイトを Stripe に接続します。Stripe アカウントをお持ちでない場合は、今すぐ作成できます。

Stripe に接続したら、WPForms » 設定 » 決済に戻ります。接続されていることを示す緑色のチェックマークが表示されるはずです。

これで、価格計算機能付きの注文フォームを作成し、Stripe で即座に支払いを受け取ることができます!
3. 注文フォームテンプレートを選択する
それでは、注文フォームを作成しましょう。WordPress ダッシュボードから WPForms に移動し、新規追加オプションをクリックします。

その後、フォームに名前を付け、テンプレートを選択します。このガイドでは、フォーム作成を迅速に進めるために、請求書/注文フォームを選択します。

このテンプレートには、複数商品フィールドと合計フィールドが含まれています。フォームを変更して、さまざまな種類の製品を追加し、合計価格を計算できます。
複数商品フィールドの変更
このガイドでは、通常の複数商品フィールドから始めて、さまざまな種類のシャツを含めるように変更します。
複数商品フィールドをクリックして、内容を変更します。フォームをビジネスに関連性の高いものにするために、次のことができます。
- ラベル: これは選択肢の名前です。
- 商品: これらは選択できるさまざまな項目とその費用です。
- 商品ラベルの後に価格を表示: 各商品の価格を表示したい場合は、これをチェックします。

完了すると、誰かが商品を選択するたびに、選択した内容に合わせて合計価格がすぐに変更されます。

クーポンコードを作成することもできます。顧客はそれを使用して注文合計金額の割引を受けることができます。
複数の商品を選択する
おそらく、複数の商品を選べるようにしたいでしょう。これは、さまざまなフィールドとカスタマイズオプションを使用して簡単に行えます。
たとえば、Tシャツとスウェットシャツを購入したい場合、同じフォームで両方を選択できます。
「支払いフィールド」セクションに移動し、「チェックボックスアイテム」フィールドを使用します。ここに、すべての商品をリストできます。

これで、複数の商品が選択されると、合計金額にすべての選択肢が加算されます。

Stripeクレジットカードフィールドの追加
注文フォームの最も重要な部分は、顧客がオンラインで簡単に支払いを行えるようにすることです。これにより、支払いが確実に受け取られ、注文の発送に進むことができます。
先ほど、Stripe Proを追加し、WPFormsに接続してサイトでの支払いを受け付けられるようにしました。次に、フォームにStripeを追加します。
フォームでStripe支払いを受け付けるには、「支払いフィールド」の下にある「Stripeクレジットカード」フィールドを見つけてフォームに追加します。

次に、「支払い」セクションに移動し、「Stripe」の設定を確認します。「1回限りの支払いを受け付ける」オプションをオンにします。

これで、顧客はさまざまな商品を選択し、合計金額を確認し、すべてを1つのフォームで支払うことができます!
4. カスタム数式を使用して高度な合計を計算する
注文フォームで顧客に表示される合計金額をさらに活用したい場合は、「計算アドオン」を使用できます。
「WPForms » アドオン」に移動し、「計算アドオン」を探します。次に、「アドオンのインストール」ボタンをクリックします。その後、「有効化」ボタンをクリックします。

これで、合計金額の複雑な数式を作成できます。たとえば、数量フィールドを追加したり、売上税の控除を挿入したりできます。
数量フィールドの追加
商品の数量を選択できるようにしたいですか?フォームに数量フィールドを追加します。右側のフォームエリアに「ドロップダウン」フィールドをドラッグアンドドロップするだけです。

次に、この「ドロップダウン」フィールドの「フィールドオプション」に移動します。名前を「数量」に変更し、人々が選択できる数値を入力します。

次に、「単一アイテム」フィールドをフォームに追加します。プレビューにドラッグアンドドロップするか、クリックするだけで追加できます。

この単一アイテムフィールドの「ラベル」を「合計金額」などに変更します。次に、「詳細設定」タブに移動し、「計算を有効にする」をオンにします。

「数式」ボックスで、「複数アイテム」フィールドを数量の「ドロップダウン」フィールドに接続します。簡単な乗算数式でこれを行うことができます。
$FX_amount * $FX
ここで、$FXはID #Xのフィールドの値であり、$FX_amountはID #Xの支払いフィールドの価格値です。
複数のアイテムフィールドを開き、そのフィールドIDを書き留めます。これは、フィールドオプションの一般タブの下にあります。

「数量」という名前のドロップダウンフィールドについても同様に行います。これは次のステップで重要になります。なぜなら、そこで数式を作成するからです。

これで、これらのIDを(商品価格×数量)の数式に入れるだけです。したがって、$FX_amount * $FXは$F5_amount * $F10になります。
「合計金額」という名前の単一アイテムフィールドの数式ボックスに数式$F5_amount * $F10を入力します。次に、数式の検証をクリックして、それが正しいことを確認します。

これで、商品とその数量を選択すると、追加したカスタム数式のおかげで、合計金額が自動的に計算されるようになります!
売上税控除の挿入
州または国の売上税を注文フォームで自動計算したい場合は、売上税計算フォームテンプレートをご覧ください。
税金を計算する場合、通常は小計(商品の価格×商品の数)に税率を掛けます。
前のステップで学んだように、このユースケースの数式(商品の価格×商品の数)は次のとおりです。
$F5_amount * $F10
売上税額が小計の10%として計算されると仮定しましょう。標準的な税金計算の数式は次のとおりです。
0.10 * ($F5_amount * $F10)
税金が含まれた総計は、小計と税金を加算することで決定されます。次の式がその方程式を表します。
($F5_amount * $F10) + (0.10 * ($F5_amount * $F10))
これは、最終金額を表示したい場所にどこでも追加できます。ここでは、「合計金額+税金」という名前の単一アイテムフィールドを使用します。

数式を作成する際は、計算が正しく行われるように、正しいフィールドIDを使用する必要があることを忘れないでください。数式の作成に関する追加情報やヘルプについては、この計算チートシートをご覧ください。
素晴らしい!WPFormsを使用してWordPressで価格計算ツールを正常に作成しましたが、メリットはそれだけではありません。
Stripe Webhook統合を使用すると、WordPressダッシュボードから直接、Stripeの返金ステータス、サブスクリプションデータ、または取引履歴を表示することもできます。
5. 請求書/注文フォームを発行する
WPFormsを使用すると、フォームを簡単に公開し、ウェブサイトで公開できます。フォームの作成が完了したら、保存ボタンをクリックします。

次に、保存ボタンの横にある埋め込みをクリックします。新しいページまたは既存のページにフォームを公開することを選択できます。

WPFormsは、何もする必要なくWordPressエディターに移動します。新しいページにすでにフォームが表示されています。
WPFormsの計算を使用して注文フォームとオンライン計算ツールをアクティブにするには、公開ボタンをクリックするだけです。

公開後、予防措置として、埋め込みフォームをテストして、期待どおりに機能することを確認し、懸念事項を排除してください。

ウェブサイトに価格計算ツールを作成するためのFAQ
計算は読者の間で人気のあるトピックです。それに関するよくある質問への回答を以下に示します。
ウェブサイトにカスタム計算ツールを作成するにはどうすればよいですか?
ウェブサイトにカスタム計算ツールを作成するには、WPForms Proと計算アドオンを使用できます。まず、WordPressサイトにWPForms Proをインストールします。
次に、ドラッグアンドドロップビルダーを使用して、数量や商品選択などの入力フィールドを追加し、注文フォームを完成させます。
完了したら、計算アドオンを有効にして、健康&フィットネスウェブサイト向けのマクロ栄養素計算ツールのようなカスタム計算ツールを作成します。
ウェブサイトに計算を追加するにはどうすればよいですか?
ウェブサイトに計算を追加するには、計算アドオンを提供するWPForms Proのようなフォームビルダーの使用を検討してください。
WPFormsをインストールした後、新しいフォームを作成し、計算機能を使用してフィールドに数学演算を追加します。
基本的な算術演算または複雑な式を使用してさまざまな数式を作成し、ユーザー入力に基づいて値を動的に計算できます。これは、注文フォーム、予約フォームなどに最適です。
価格数式を作成するにはどうすればよいですか?
ウェブサイトで価格数式を作成するには、WPForms Proと計算アドオンを利用できます。
まず、提供している商品やサービスのフィールドを持つフォームを設定します。これらの商品に価格を割り当てます。
次に、計算アドオンを使用して、商品価格に数量を掛け、追加料金や割引を加える数式を作成します。
次に、カスタム住宅ローン計算ツールの作成方法を学ぶ
ウェブサイトにカスタム住宅ローン計算ツールを作成したいですか?オンライン住宅ローン計算ツールを使用することで、ローン担当者は申請者をより迅速にスクリーニングし、煩雑な書類作業を減らすことができます。WordPressテンプレートを使用してカスタム住宅ローン計算ツールを作成する方法に関するこのガイドをご覧ください。
フォームの作成準備はできましたか?最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
もしこの記事がお役に立ったなら、WordPressの無料チュートリアルやガイドをもっと知るために、FacebookとTwitterでフォローしてください。
