WordPressでカスタム電卓を作成する方法(ステップバイステップ)

インタラクティブなコンテンツは、エンゲージメントを高め、訪問者をサイトに長く滞在させるための最良の方法の1つです。カスタム計算機は、ユーザーの質問に即座に回答すると同時に、より多くのリードを生成するのに役立ちます。

計算機を追加するための最も初心者向けのソリューションを見つけるために、数十のフォームビルダープラグインをテストしました。私たちの経験では、適切なツールを使用すると、コードを書かずにBMI推定器から配送料計算機まで、あらゆるものを構築できます。

この記事では、WordPressでカスタム計算機を簡単に作成する方法をステップバイステップでご紹介します。

WordPressでカスタム計算機を作成する

WordPressにカスタム計算機を追加する理由

カスタム計算機を使用すると、ユーザーはウェブサイトを離れることなく、さまざまなものをすばやく計算できます。

例えば、健康とフィットネスのブログをお持ちの場合、ユーザーがBMIを確認して、ウェブサイトからどのサブスクリプションプランや製品を購入するかを決定できるように、BMI計算機を追加することができます。

BMI計算機の例

世界中に販売している場合、メートル法をヤードポンド法に変換するオンライン計算機は、顧客が製品のサイズや重量が希望通りか確認するのに役立ち、より多くの売上を促進できます。

配送料計算機を提供することで、信頼を築き、カート放棄を減らすこともできます。これにより、顧客はチェックアウト時に予期しない費用に驚くことはありません。

または、不動産ウェブサイトに 住宅ローン計算機 を追加したり、自動車販売サイトに 車の支払い計算機 を追加したりすることもできます。

自動車ローン計算機の例

これらのカスタム計算機は、リードを生成するのにも最適な方法です。たとえば、ユーザーにメールアドレスを入力してもらい、その結果を送信することができます。このように、計算機はWordPressでメールリストを構築するのに役立ちます。

それでは、WordPressでカスタム計算機を簡単に作成する方法を見ていきましょう。

WordPressでカスタム計算機を作成する方法

WPFormsを使用すると、WordPressでカスタム計算機を簡単に作成できます。これは、市場で最高のカスタム計算機プラグインおよびフォームビルダーです。ドラッグ&ドロップビルダー、2000以上の既製テンプレート、および完全なスパム保護が付属しています。

実際、私たちはWPFormsを非常に気に入っており、サイト上のすべての問い合わせフォームや年次調査に使用しています。

このプラグインには計算アドオンもあり、住宅ローン計算機、配送料割引、年齢計算機など、必要な計算機を簡単に作成できます。詳細については、WPFormsレビューをご覧ください。

まず、WPFormsプラグインをインストールして有効化する必要があります。詳細な手順については、初心者向けのガイド「WordPressプラグインのインストール方法」をご覧ください。

注意: WPFormsには無料プランもあります。ただし、計算アドオンを有効にするには、プラグインのプロバージョンが必要です。

アクティベーション後、WordPress管理サイドバーのWPForms » 設定 ページにアクセスしてライセンスキーを入力してください。

このキーはWPFormsウェブサイトのアカウントから取得できます。

WPFormsライセンスキー

その後、WordPressダッシュボードからWPForms » アドオンページに移動し、「計算アドオン」を探してください。

それが完了したら、「アドオンのインストール」ボタンをクリックするだけで、サイトで有効化できます。

Calculationsアドオンをインストールして有効化

次に、管理ダッシュボードから WPForms » 新規追加 ページに移動します。

これにより、「テンプレートの選択」ページに移動します。ここで、作成しようとしているフォームの名前を入力して開始できます。

その後、左側の列にある「計算機」オプションをクリックすると、WPFormsが提供する87以上の既製の計算機テンプレートを開くことができます。それらには以下が含まれます:

  • モーゲージ計算機テンプレート
  • チップ計算機テンプレート
  • リース計算機テンプレート
  • BMI計算機テンプレート
  • 貯蓄&投資電卓テンプレート

ここから、好きなフォームテンプレートの下にある「テンプレートを使用」ボタンをクリックできます。このチュートリアルでは、簡単な「配送料割引計算フォーム」を作成します。

配送料割引計算フォームテンプレートを選択する

これにより、画面にフォームビルダーが開きます。右側にはフォームのプレビューが表示され、左側の列にはフォームフィールドが表示されます。

左側のパネルから簡単にフィールドを追加したり、ドラッグして順序を並べ替えたりできるようになりました。

計算機フォームテンプレートが、左側のフォームフィールドを持つフォームビルダーで開きます

次に、「利用可能なアイテム」セクションまでスクロールし、このフィールドをクリックしてサイドバーで設定を開きます。

それが完了したら、eコマースストアで販売するすべての商品のタイトル、画像、価格を追加できます。

ただし、販売する商品の画像を追加したい場合は、「画像選択を使用」オプションをオンにする必要があることに注意してください。

また、「+」ボタンをクリックして項目を追加したり、「-」ボタンをクリックしてセクションから項目を削除したりすることもできます。

販売したい商品の価格、画像、名前をフォームに追加する

次に、「配送料」というラベルのフィールドをクリックして、左側の列でその設定を開きます。このフィールドは、製品の合計に基づいて配送料の割引を計算します。このフィールドには計算に必要な数式が含まれているため、削除しないことが重要です。

デフォルトでは、このテンプレートには、注文合計価格に基づいて配送料の割引を計算する、事前に記述された数式が含まれています。

ただし、配送料の割引を変更したい場合は、左側の列から「高度」タブに切り替え、「数式」セクションまでスクロールしてください。

ここで、10の値を希望する割引率に置き換えることができます。製品の合計金額を変更することもできます。

配送割引をさらにカスタマイズしたい場合は、上部にある「チートシート」リンクをクリックしてください。これにより、「計算式チートシート」ページに移動し、使用するルールと文字列をより深く理解することができます。

配送料割引の値を変更する

その後、他のすべてのフィールドオプションの設定も同様の方法で構成できます。

新機能: 計算式をより簡単に作成する方法をお探しですか?WPFormsには、面倒な作業を代行してくれる強力なAI計算機能が搭載されました。

数式ボックスの横にある「数式を生成」ボタンをクリックするだけで、AIアシスタントとのチャットを開始できます。

数式を生成ボタンをクリック

次に、単純な英語で計算したいことを説明できます。

例えば、「100ドルを超える注文には15%の配送料割引を適用し、その後、追加の50ドルごとに割引を0.25%増やします」のように入力できます。

WPForms AI 計算

「Enter」ボタンを押すと、AIが自動的に正しい数式を生成し、ワンクリックでフォームに追加できます。

💡 ヒント: AIに計算ニーズを具体的に説明するほど、より正確でカスタマイズされた数式が得られます。

完了したら、設定を保存するために上部にある「保存」ボタンをクリックすることを忘れないでください。

カスタム計算機フォームを保存する

WordPress のブロックエディターで、配送計算フォームを追加したいページまたは投稿を開きます。ブロックエディター

ここから、左上隅の追加ブロック「+」ボタンをクリックしてブロックメニューを開き、WPFormsブロックを埋め込みます。

それが終わったら、ブロック内のドロップダウンメニューから配送割引計算フォームを選択するだけです。

ページに計算機フォームを追加する

最後に、上部にある「更新」または「公開」ボタンをクリックして設定を保存します。これで、WordPressウェブサイトにアクセスして、カスタム計算機フォームが実際に動作していることを確認できます。

ここでは、配送料フィールドが、顧客がサイトから注文しているさまざまな商品の価格に応じて、配送料を自動的に計算します。

配送料割引計算フォームプレビュー

WordPressで計算フォームをカスタマイズする

ある時点で、コンバージョンを増やすことができるかどうかを確認するために電卓を変更しようとするかもしれません。たとえば、「メール」フィールドを必須にしたい場合があります。

これらの変更を行うには、WordPressダッシュボードからWPForms » すべてのフォームページにアクセスしてください。

そこに移動したら、フォーム名の下の「編集」リンクをクリックして、フォームビルダーで再度起動します。

フォーム名の下の「編集」リンクをクリックします

上記の手順に従って、フォームフィールドをカスタマイズしたり、新しいフィールドを追加したりできます。

完了したら、「保存」ボタンをクリックするだけで、これらの変更はビジネスウェブサイトまたはブログに自動的に表示されます。

計算フォームの入力内容の表示

ウェブサイトでフォームが完了すると、WPFormsはそのエントリを自動的にWordPressデータベースに保存します。これにより、人々がフォームをどのように使用しているかを確認し、訪問者の連絡先情報を表示できます。

この情報を表示するには、WordPressダッシュボードのWPForms » Entriesページに移動し、「フォーム名」セクションまでスクロールダウンするだけです。

その後、電卓フォームをクリックしてエントリを表示します。

エントリページでカスタム電卓フォームを選択します

これにより、ページ上のすべてのフォームエントリのリストが開きます。ここから、円アイコンをクリックしてエントリを既読としてマークできます。

各エントリの横にある「表示」リンクをクリックして、メールアドレス、電話番号、注文した商品、配送料割引など、すべてのフォームの詳細を表示することもできます。

計算フォームの入力内容を表示する

場合によっては、WordPressダッシュボードにアクセスできない人とフォームのデータを共有したい場合があります。例えば、WordPress開発代理店を経営していて、クライアントのために複数のウェブサイトを管理している場合などです。

WPForms を使用すると、データを CSV または XLSX ファイルとしてエクスポートできます。「すべてエクスポート」リンクを一番上でクリックするだけで、エクスポートツールが開きます。

これにより、エクスポートしたいデータのすべてのフォームフィールドを選択できる新しい画面が開きます。その後、「エクスポートファイルをダウンロード」ボタンをクリックして、フォームデータをXLSXファイルとして保存します。

CSVファイルとしてエクスポートしたいデータのフォームフィールドを選択してください

ボーナス:Formidable Formsで複雑なカスタム計算機を作成する

WordPressウェブサイトでより複雑な計算機を作成したい場合は、Formidable Formsの使用をお勧めします。これは、ドラッグアンドドロップビルダー、既製のテンプレート、動的フィールドを備えた高度なフォームプラグインです。

さらに、このプラグインは数式、条件付きロジック、さらには日付ベースの計算を使用して高度な計算を実行できるため、複雑なプロジェクトに最適です。

Formidable forms

このプラグインを使用して、パーセンテージ計算機、価格計算機、ローン計算機、年齢計算機、生命保険計算機、複利計算機など、さまざまな種類の計算機を作成できます。

例えば、オンラインコースを販売している場合、ROI(投資収益率)計算フォームを追加して、コースの購入が収益性をどのように向上させるかをユーザーに示すことができます。

WordPressにカスタム計算機を追加する

Formidable Formsのその他の機能には、条件付きロジック、進捗インジケーター、複数ページフォーム、およびユーザーがより迅速にフォームに入力するのに役立つChatGPTフィールドが含まれます。

Formidable Formsは、さまざまなメールマーケティングサービスと連携して、メールリストを増やすこともできます。詳細については、完全なFormidable Formsレビューをご覧ください。

WordPress 計算機に関するよくある質問

ここでは、読者がウェブサイトにカスタム計算機を追加することについて、私たちによく尋ねる質問をいくつか紹介します。

1. プラグインなしで WordPress でカスタム計算機を作成できますか?

はい、ただし高度な技術スキルが必要です。数式とロジックを処理するには、カスタム JavaScript および PHP コードを作成する必要があります。ほとんどのユーザーにとって、WPForms のようなプラグインを使用する方が、はるかに安全で、高速で、簡単です。

2. 複雑な数式を知る必要がありますか?

いいえ。独自の数式を作成することもできますが、WPForms には AI 連携が追加されました。計算機に実行させたいことを通常の英語で説明するだけで、プラグインが数式を作成してくれます。

3. 計算結果に基づいて支払いを受け取ることができますか?

もちろんです。見積もり計算機や配送計算機を作成している場合は、Stripe や PayPal のような支払いゲートウェイを統合できます。これにより、計算フィールドに表示された正確な金額を即座に徴収できます。

4. 計算機に入力されたデータを保存できますか?

はい。WPForms のようなプラグインは、すべてのフォーム送信を WordPress データベースに保存します。これらのエントリを表示したり、スプレッドシートにエクスポートしたり、メールマーケティングサービスに接続してリードをフォローアップしたりできます。

追加リソース

この記事が WordPress でカスタム計算機を追加するのに役立ったことを願っています。追加のリソースも参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

3 CommentsLeave a Reply

  1. 複雑なものを誰にでも分かりやすくしてくれました。カスタム電卓の作成方法を段階的に説明していただき、達成可能で楽しいものに感じられます!実世界の問題を解決し、ユーザーエクスペリエンスを向上させるために電卓を使用することに重点を置いている点は的確です。このガイドは、ウェブサイトを次のレベルに引き上げたい人にとって画期的なものです。専門知識を共有していただきありがとうございます。

  2. 私も健康ウェブサイトにBMI計算機を作成したかったのですが、WP Forms Proバージョンを持っていません。将来購入して、あなたの簡単なガイドに従う予定です。さて、あなたは私を非常によく導き、このプラグインを購入するように説得しました。

コメントを残す

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。