ユーザーが商品を選択し、即座に支払いを行うことができる、あなたのウェブサイトのための価格計算機を作成する方法を疑問に思っていますか？
WPFormsを使えば、様々なビジネスやユースケースの注文フォームを作成することができ、自動的に価格を計算することができます。
それでは早速、あなたのウェブサイトに価格計算ツールを作成するために必要なステップをご紹介しましょう！
ウェブサイト用価格計算機の作成方法
WPFormsを使用してあなたのウェブサイトのための価格計算機を作成することは信じられないほど簡単です。以下のステップに従って始めてください！
1.WPFormsプラグインのインストールと有効化
WPFormsは、お問い合わせフォームや 注文フォームなどのフォームを作成するのに最適なツールです。2,000以上のWordPressフォームテンプレートがあります。
計算アドオンを使用するには、WPForms Proを取得する必要があります。これは、カスタマイズ可能な合計フィールドを持つ注文フォームのようなより多くの機能を提供します。
まずはProライセンスをご購入ください。その後、あなたのウェブサイトにWPFormsをインストールしてください。ヘルプが必要な場合は、WordPressにプラグインを追加する方法についての指示に従ってください。
2.WPFormsとStripeの接続
WPFormsを入手したら、Stripe Pro Addonを追加する必要があります。
必要であれば、PayPalや Squareのような他の支払いプロセッサ用のアドオンをインストールすることもできますが、価格計算フォームを作成するにはStripeをお勧めします。
つまり、WordPressのメニューからWPFormsに行き、アドオンをクリックします。
Stripe Proアドオンを探し、ウェブサイトにインストールしてください。インストールボタンをクリックし、有効化ボタンをクリックしてください。
次に、WPForms " Settingsに行き、Paymentsをクリックします。ここでは、使用する通貨の種類を選択することができます。
次に、青いボタンをクリックしてStripeの詳細を入力し、サイトをStripeに接続します。Stripeアカウントをお持ちでない場合は、今すぐ作成できます。
Stripeに接続したら、WPForms " Settings " Paymentsに戻ります。緑色のチェックマークが表示されているはずです。
これで、価格計算機能を備えた注文フォームを作成し、Stripeで即座に支払いを受けることができます！
3.注文書テンプレートを選択する
それでは注文フォームを作成してみましょう。WordPressのダッシュボードからWPFormsに移動し、新規追加 オプションをクリックします。
その後、フォームに名前を付け、テンプレートを選択します。このガイドでは、フォーム作成をスピードアップするために請求書/注文フォームを選択します。
このテンプレートには、複数アイテムフィールドと合計フィールドがあります。異なる種類の商品を追加し、合計金額を計算するようにフォームを変更することができます。
複数項目フィールドに変更を加える
このガイドでは、通常のMultiple Itemsフィールドから始め、異なるタイプのシャツを含むように変更します。
複数項目]フィールドをクリックして、中身を変更します。ここでは、フォームをあなたのビジネスにもっと関連したものにするためにできることを説明します：
- ラベル：選択肢の名前です。
- アイテムこれらは、あなたが選択することができるさまざまなものとその費用です。
- 商品ラベルの後に価格を表示する：各アイテムの価格を表示したい場合はチェックを入れてください。
一度完了すれば、誰かが商品を選ぶたびに、その人が選んだ商品に合わせて合計金額がすぐに変わる。
また、クーポンコードを作成することもでき、顧客がそれを使用することで、注文合計金額から割引を受けることができる。
複数の製品を選ぶ
複数の商品を選んでもらうこともできます。様々なフィールドとカスタマイズオプションで簡単にできます。
例えば、Tシャツとスウェットを買いたい人がいれば、同じフォームで両方を選ぶことができる。
Payment Fieldsセクションに移動し、Checkbox Itemsフィールドを使用します。ここで、すべての商品をリストアップすることができます。
これで、誰かが複数の商品を選ぶと、その選択した商品の合計金額が表示される。
Stripeクレジットカードフィールドの追加
オーダーフォームの最も重要な部分は、顧客がオンラインで簡単に支払いを行い、支払いを確実に受け取り、注文の発送を進めることができるようにすることです。
先にStripe Proを追加してWPFormsに接続し、サイト上で支払いを受け付けることができるようにしました。今度はStripeをフォームに追加しましょう。
フォームにStripeでの支払いを設定するには、支払いフィールドの下にあるStripeクレジットカードフィールドを探し、フォームに追加します。
次に、Paymentsセクションに行き、Stripeの設定を見てください。ワンタイムペイメントを有効にするオプションをオンにします。
これで、顧客はさまざまな商品を選び、合計金額を確認し、支払いをすべて1つのフォームで行うことができます！
4.高度な合計のためにカスタム数式を使用する
注文フォームで顧客に表示される合計価格について、より多くのことをしたい場合は、計算アドオンを使用することができます。
WPForms " Addonsに移動し、Calculations Addonを探します。そして、アドオンのインストールボタンをクリックしてください。その後、有効化ボタンをクリックしてください。
これで、合計価格に対して複雑な計算式を作ることができます。例えば、数量のフィールドを追加したり、消費税の控除を挿入することができます。
数量フィールドの追加
欲しい商品の数を選択させたいですか？数量フィールドをフォームに追加しましょう。ドロップダウンフィールドを右側のフォームエリアに移動するだけです。
次に、このドロップダウンフィールドの フィールドオプションに進みます。フィールド名を "数量 "に変更し、人々が選択できる数字を入力します。
次に、フォームにSingle Itemフィールドを追加します。プレビューにドラッグ＆ドロップするか、単にクリックしてください。
このSingle ItemフィールドのLabelを"Total Price "のように変更します。次に、詳細設定タブに行き、計算を有効にするをオンにします。
数式ボックスで、複数項目フィールドを数量ドロップダウン・フィールドに接続します。これは簡単な乗算式でできます。
$FX_amount * $FX
ここだよ、 $FX はID#Xのフィールドの値である。 $FX_amount はID#Xの支払いフィールドの価格値である。
Multiple Itemsフィールドを開き、フィールドIDをメモしてください。これはGeneralタブのField Optionsにあります。
"数量 "というドロップダウン・フィールドにも同じことをする。これは次のステップで重要なことで、ここで計算式を作成するからだ。
あとは、これらの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))
これは、最終金額を表示したい場所に追加することができます。ここでは、"Total Price + Tax "と名付けた Single Itemフィールドを使用します。
計算式を作成する際には、正しいフィールド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日間の返金保証がついています。
この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。
