WPForms を使用してカスタム オンライン電卓を作成する方法

公開: 2023-11-13

ウェブサイト固有のニーズに合わせて WordPress で計算機を作成する方法を考えたことはありますか?

訪問者の電子メール アドレスを取得することにより、計算機はビジネスに追加の見込み客を生み出す優れた方法です。

今すぐ電卓を作成しましょう

電卓を使用すると、ユーザーを Web サイトに長く滞在させ、質問に答えることができるため、エンゲージメントを高めることもできます。

この記事では、WPForms を使用して WordPress でカスタム電卓を作成する手順を説明します。

WordPress にカスタム電卓を追加する理由

カスタム計算機を使用すると、ユーザーはサイトを離れることなく簡単に計算できるため、エンゲージメント率が向上します。

たとえば、自動車 Web サイトを運営している場合は、自動車支払い計算ツールを追加すると、訪問者が新車の月々の支払い額を簡単に計算し、購入の決定に役立てることができます。

同様に、フィットネスや健康の Web サイトは、ユーザーが自分の健康状態を判断し、十分な情報に基づいてより前向きな選択を行えるようにする BMI 計算ツールなしでは完成しません。

また、e コマース Web サイトで送料の見積もりを即座に取得できる送料計算ツールを潜在的な顧客に提供することで、透明性を高め、顧客の信頼を高めることもできます。

または、獣医師のサイトに犬の年齢計算ツールを追加して、飼い主が犬の年齢を人間の年齢で理解できるようにすることもできます。 そうは言っても、WPForms を使用してあらゆるタイプの計算機を簡単に作成する方法を見てみましょう。

WordPress でカスタム電卓を作成する方法

WPForms を使用して WordPress でカスタム電卓を作成するのは非常に簡単です。 以下の簡単な手順に従うだけです。

記事上で

  • 1. WPForms Proをインストールしてアクティブ化する
  • 2. 計算アドオンを入手する
  • 3. プロがデザインした計算機テンプレートを選択する
  • 4. 電卓フォームのテンプレートをカスタマイズする
  • 5. 計算フォームを公開する

1. WPForms Proをインストールしてアクティブ化する

WPForms は、あらゆるタイプのフォームを作成できる最高のフォームビルダーおよび計算プラグインです。 多数のオンライン ビジネスが見込み顧客発掘ツールとして使用できる、既成の計算フォーム テンプレートの膨大なリストが提供されています。

このチュートリアルでは計算アドオンを使用するため、WPForms Pro にサブスクライブする必要があります。WPForms Pro では、プレミアム統合、アドオン、条件付きロジック、フォーム レポートなどの数多くの貴重な機能へのアクセスも提供されます。

The WPForms homepage

Pro ライセンスを購入した後、Web サイトに WPForms プラグインをインストールしてアクティブ化します。 まず、WordPress プラグインのインストール方法に関する簡単な手順をお読みください。

2. 計算アドオンを入手する

Calculations アドオンを WordPress Web サイトにインストールするのは非常に簡単です。 WordPress ダッシュボードで、 [WPForms]をクリックし、 [アドオン]を選択します。

WPForms addons

アドオンの検索」フィールドに「計算」と入力します。 次に、 「アドオンのインストール」ボタンをクリックし、 「アクティブ化」ボタンをクリックします。

Activate Calculations Addon

よくやった! 次に、テンプレートを使用して計算フォームを作成し、それを変更して潜在顧客を生成する方法を説明します。

3. プロがデザインした計算機テンプレートを選択する

新しいフォームを構築します。 WordPress ダッシュボードからWPFormsを選択し、 [新規追加]ボタンをクリックします。

Add new form

次の画面に進みます。 まず、フォームに名前を付けてください。 たとえば、これを「住宅ローン計算機」と呼ぶことにします。

Name your form

次に、下にスクロールして[電卓]カテゴリを選択し、ビジネスの要件に基づいて適切なフォームを見つけます。

Calculator template category

適切なテンプレートが見つかったら、 「テンプレートを使用」ボタンをクリックします。 このチュートリアルでは、住宅ローン計算フォームを選択します。

Click Use Template

「フィールド」画面が表示されます。 この画面では、左側のパネルに使用可能なフィールドがリストされます。

WPForms fields menu

右側のパネルにフォームの編集可能なプレビューが表示されます。 電卓テンプレートを選択したため、フィールドは自動的に追加されます。

Calculator form preview

WPForms の直感的なドラッグ アンド ドロップ ビルダーを使用して、フィールドを簡単に変更、配置、追加してフォームを好みに合わせて調整できるようになりました。

4. 電卓フォームのテンプレートをカスタマイズする

電卓フォームを使用してリードを生成している場合は、リード フォームのように機能するようにフォーム フィールドをカスタマイズできます。 フォームビルダーから、設定 » リードフォームに移動します。

「Lead Forms アドオンがインストールされていません。」というポップアップが表示されます。 インストールしてアクティベートしますか?」 「はい、インストールしてアクティブ化します」ボタンをクリックします。

Install Lead Forms

次に、 [はい、保存して更新]ボタンをクリックしてインストールを完了し、 [リード フォーム モードを有効にする]をオンに切り替えます。

Enable Lead Form Mode

これにより、Lead Forms アドオンがフォームを再構築することを通知する別のポップアップが表示されます。 「リードフォームを有効にする」ボタンをクリックします。

Enable Lead Forms

フォーム プラグインは、計算フィールドをリード フォームに自動的に変換します。 多くのフィールドがある場合を除き、これには通常数秒かかります。

Converting to Lead Form

これで、好みに合わせてフィールドを追加、変更、配置することができます。 たとえば、フォームの上部に名前電子メールのフィールドを追加しました。

Add Name and Email Fields

フィールド オプション[全般]タブで、[名前] フィールドと [電子メール] フィールドを必須としてマークすることもできます。

Mark field as required

ユーザーにフォームの送信を促すために、送信ボタンのテキストを変更して潜在顧客獲得プロセスを強化することもできます。

これを行うには、フォームの右側のプレビューから一番下に到達するまで下にスクロールします。 そこから、 「送信」ボタンをクリックします。

Click Submit button

これにより、 [設定] » [一般]タブにリダイレクトされます。 ここから、送信ボタンのテキストを「結果を送信」などに変更します。

Change Submit Button Text

必要な機能をすべて含めるように計算機と問い合わせフォームをカスタマイズしたら、忘れずに[保存]ボタンを押してください。

Save the form

そして、それができました! 電卓フォームを WordPress で公開して、見込み顧客の発掘を促進し、電子メールのコンバージョンを増やすことができるようになりました。

5. 計算フォームを公開する

テンプレートを使用して計算フォームを作成したら、それを WordPress Web サイトに追加し、ブロック エディターを使用してさらにスタイルを設定できます。

新しいページや投稿を作成するか、既存のページや投稿を更新します。 次に、 [ブロックの追加]ボタンをクリックして、 WPFormsアイコンを選択する必要があります。

Add form widget WPForms

次に、WPForms ウィジェットのドロップダウン メニューからカスタム オンライン電卓フォームを選択し、ページ/投稿に添付します。

Select Calculator Form

フォームの外観に満足したら、 [更新]または[公開]ボタンをクリックするだけでフォームが有効になります。

Publish Calculator Form

問題がないことを確認するには、公開後に埋め込みフォームをテストし、フロントエンドで意図したとおりに機能することを確認することが重要です。

Testing Calculator Form

電卓の作り方に関するその他の質問

WordPress で電卓を作成する方法を学ぶことは、読者の間で人気の高いトピックです。 ここでは、それに関するよくある質問に対する回答を示します。

電卓を自作するのはどれくらい難しいですか?

WordPress サイト用の計算ツールの作成は簡単です。 WPForms などのツールを使用すると、コーディングの専門知識がなくてもカスタム電卓を簡単に作成できます。 インターフェースはユーザーフレンドリーで直感的です。

Web サイトに電卓を追加するにはどうすればよいですか?

サイトに電卓を追加するには、WPForms の使用を検討してください。 これは、電卓をシームレスに統合できる信頼できる WordPress 電卓プラグインです。 計算アドオンを使用すると、ニーズに合わせた計算機を設計できます。

WordPress で住宅ローン計算ツールを作成するにはどうすればよいですか?

WPForms を使用すると、住宅ローン計算ツールの作成が非常に簡単になります。 プラグインをインストールした後、計算アドオンを有効にします。 このアドオンを使用すると、フィールドと数式を設定できるようになり、訪問者が正確な住宅ローンの見積もりを取得できるようになります。

WordPress で無料の電卓を作成するにはどうすればよいですか?

無料の電卓ビルダーもありますが、WPForms などの有料ツールを使用することをお勧めします。 このようにして、計算アドオンを介して高度な機能を備えたさまざまな電卓を柔軟に作成できます。

次に、WPForms を使用して合計価格計算を変更する方法を学びます

WPForms 計算を使用して、ユーザーの製品選択に基づいて注文の合計金額を反映したいですか? WPForms を使用して製品の計算価格を変更する製品オプションを追加する方法を確認してください。

今すぐ電卓を作成しましょう

フォームを構築する準備はできましたか? 最も簡単な WordPress フォームビルダープラグインを今すぐ始めましょう。 WPForms Pro には多数の無料テンプレートが含まれており、14 日間の返金保証を提供しています。

この記事がお役に立った場合は、Facebook と Twitter でフォローして、さらに無料の WordPress チュートリアルとガイドをご覧ください。