サイトでより多くのリードを生み出すことは難しいことです。訪問者の情報を取得する効果的な方法の1つは、オンライン計算機です。これらのツールは、パーソナライズされた結果と引き換えにユーザーの連絡先情報を共有するよう促すことができ、強力なリード生成戦略となります。
しかし、単に電卓を追加するだけでは十分ではありません。訪問者を惹きつけるだけでなく、訪問者が情報を提供するよう促す電卓をデザインする必要があります。
私たちの経験では、WPFormsやFormidable Formsのようなトップフォームビルダーを使えば、ニーズに合ったカスタマイズ可能な電卓を簡単に作ることができます。これらのソリューションはユーザーフレンドリーなインターフェースと様々な機能を提供し、エンゲージメントとデータ収集を促進します。
この投稿では、WordPressサイトでより多くのリードを生成するのに役立つオンライン計算機を作成する手順をご案内します。

オンライン計算機は、なぜこのように優れたリード・ジェネレータ・ツールなのか?
オンライン電卓は、訪問者が問題を解決したり、質問に答えたりするのに役立つツールです。さらに良いことに、結果を表示する前に訪問者のメールアドレスを尋ねることができるので、リードを生成するのに最適な方法です。
オンライン電卓は、さまざまな業界やニッチな分野で利用できる。例えば、健康とウェルネスの分野では、BMI計算機を追加し、訪問者に食事プランの買い物を勧めるかもしれません。

グローバルな顧客に向けて販売するのであれば、メートル単位をインペリアル単位に変換するカスタマイザーがあれば、顧客が商品のサイズや重量が適切かどうかをチェックするのに役立ち、売上を伸ばすことができます。
また、不動産サイトに住宅ローン計算機を追加したり、自動車ディーラーのサイトに車の支払い計算機を追加することもできる。

可能性は無限ですから、オンライン計算機がメールリストを増やす最も人気のある方法のひとつに急速になりつつある理由は簡単です。
それを念頭に置いて、オンライン電卓を作成し、リードを生成する方法を紹介します。ここでは2つの方法を取り上げますが、リンクからお好きな方法にジャンプしてください:
準備はいいかい?さっそく始めよう!
方法1:WPFormsを使ってオンライン計算機を作成する(推奨)
コードを一行も書かずにWordPressサイトにオンライン電卓を作成する最も簡単な方法は、WPFormsプラグインを使用することです。

WPFormsは600万以上のインストールを誇る、最高のお問い合わせフォーム作成・計算プラグインです。会話フォーム、ユーザー登録フォームなど、すべてのタイプのフォームを作成することができます。
その上、すぐに使用できる電卓フォームのテンプレートが豊富に用意されているので、信頼構築とビジネスのためのリード生成を始めることができます。
注: このチュートリアルでは Calculations Addon と Lead Forms Addon を使うので、WPForms Proバージョンが必要です。このプレミアムプラグインではフォームレポートや条件ロジックのような高度な機能を利用することができます。とはいえ、基本的なフォームを作成したいのであれば、無料版もあるので試してみてください。
ステップ1:WPFormsプラグインのインストールと有効化
WPForms Proを購入したら、WordPressダッシュボードにプラグインをインストールして有効化してください。詳細については、WordPressプラグインのインストール方法に関するステップバイステップのチュートリアルをご覧ください。
有効化した後、WPForms ” Addonsにアクセスしてください。そして’アドオンのインストール’ボタンをクリックしてください。

リードを集めるので、Lead Forms Addonも必要です。
それでは、Lead Forms Addon ボックスで「アドオンをインストール」をクリックしましょう。

次に、ユーザーが計算を実行し、正確な見積もりを得るために使用できるオンライン電卓を作成する方法を説明します。
ステップ2:オンライン電卓フォームの作成
WPForms“ 新規: にナビゲーションすることから始めましょう。ドラッグ&ドロップでオンラインフォームビルダーが開き、電卓フォームを作成・カスタマイズすることができます。

次に、新しいフォームの名前をボックスに入力します。
これは、電卓フォームを後で変更したり、ページや投稿日に埋め込んだりするときに参照できるようにするためです。

その下に、あなたにとって意味のあるテンプレートを選択することができます。左のパネルでは、’電卓’オプションの下にある様々なカテゴリーをナビゲーションすることができます。
例えば、ジムのサイトを運営しているのであれば、「フィットネス」カテゴリーから選ぶかもしれません。
一方、ディーラーや不動産業者の場合は、「ファイナンス」カテゴリーを選択することで、潜在的な顧客が商品やサービスを購入する資格があることを確認することができる。
テンプレートの膨大なリストで、あなたが探しているオンライン電卓のちょうど約あらゆるタイプが見つかります。
しかし、このチュートリアルでは、’Mortgage Lead Generator Form’を使います。使いたいテンプレートにマウスオーバーして、’Use Template’を選択するだけです。

ここから’Fields’タブに移動し、ドラッグアンドドロップフォームビルダーを見ることができます。利用可能なフィールドはすべて左のパネルにあります。
フィールドを追加したい場合は、左側から右側にドラッグします。右側にはエディターがあり、フォームの形を視覚的に確認することができます。
Lead Forms アドオンでは自動的にページ区切りが表示されます。各ページの区切りの前には「次へ」ボタンがあるので、ユーザーは必要な項目を入力したら次のページに移動することができます。
また、フォームを消化しやすいセクションに分割し、ユーザーエクスペリエンスを向上させるプログレスバーが下に表示されます。
プロからのアドバイス: 各ページに関連する分野をグループ化し、各ページが何についてのページかを示す見出しを大きく太字にするのもよい。

住宅ローン計算フォームには以下の項目があります:
- ホーム・バリュー
- 頭金
- 金利
- 住宅ローン期間
- 毎月の住宅ローン支払額
- 年間支払額
- 支払利息合計
- 住宅ローン支払い総額
もしあなたが住宅ローンの貸し手であれば、このテンプレートにはあなたが探しているほとんどのフィールドが含まれているでしょう。とはいえ、必要に応じてフィールドを追加したり削除したりすることはいつでも可能です。
例えば、ユーザーが探している「住宅ローンやローンの目的」や「物件のタイプ」を尋ねる複数選択式のフィールドを追加するのが適切かもしれません。そうすることで、よりユーザーのニーズに応えることができます。
フィールドを追加したら、「フィールドオプション」の「全般」タブにナビゲーションし、必要に応じて詳細を編集することができます。

ステップ3:計算の変更(オプション)
すべてのフィールドを設定したら、このテンプレートから計算を追加または編集したくなるかもしれません。このフォームでは、計算は「住宅ローン支払総額」フィールドによってコントロールされます。
フィールドをクリックして「詳細設定」タブに行くと、「有効化計算」オプションがすでにオンになっているはずです。テンプレートに付属しているオリジナルの計算式を維持したい場合は、この設定をそのままにしておくことができます。

ただし、数式を編集したい場合は、「数式」テキストボックスの値を変更することができる。
ユーザーが詳細を入力すると、フォームが提供された情報に基づいて結果を自動的に計算します。
数式」ボックスの上部には、次のような算術関数を追加できる:
- 加算 (+)
- 引き算 (-)
- 乗算 (*)
- 部門 (/)
数式を挿入するたびに、数式ボックスの上部に追加できる括弧内に収まらなければならない。
フィールドの挿入」をクリックするだけで、各フィールドに関連するコードのリストが表示されます。

他にも、and if, elseのようなルールを設けることができる。
例えば、『住宅費/総月収』のような計算式を使えば、申込者のリスクを過大評価することができます。if/else」ルールを使えば、リスクに基づいて自動的に申込者を拒否したり受け入れたりすることができます。
エキスパートヒントあなたの特定のユースケースのために計算機能を使用するための詳細については、WPFormsから計算アドオンのドキュメントをチェックアウトしたい場合があります。
また、”Formula “ボックスの隣にある “Cheatsheet “をクリックすると、追加可能なルールや関数をすべて見ることができる。
数式を追加し終わったら、「Validate Formula(数式の検証)」をクリックして、計算と構文が正しいことを確認するのを忘れないでください。

ステップ4:コンタクトオプションの設定
オンライン電卓のリードフォームでは、どのように連絡を取りたいかをカスタマイザーに尋ねるのも良いアイデアです。そうすれば、あなたが提供するものに興味を示したリードをフォローアップすることができます。
ここは、アイコンを追加するのにも最適な場所です。複数選択フィールドをクリックすると、複数選択オプションを設定するオプションが表示されます。アイコンの選択肢を使用する」ボタンをトグルすると、フォームにアイコンが追加されます。

笑顔のボックスが外観に表示されます。
左のパネルにあるスマイルボックスをクリックするだけで、フォームにスマイルが追加されます。

アイコン・ピッカー」ポップアップ画面が表示されます。ここでは、2,000以上のアイコンの中から選ぶことができます。
検索バーを使って、お探しのアイコンを入力してください。

左のパネルで「アイコンの色」の設定を変更することもできます。
これが完了し、選択欄ですべてのアイコンを選んだら、以下のようになります:

あなたのフォームに追加することができます別の個人的なタッチは、あなたの計算機フォームの上部にロゴやヘッダー画像です。
コンテンツ」フィールドをクリックし、フォームエディターの右側にドラッグするだけです。

次に、「コンテンツ」フィールドを選択して、カスタマイザー設定を開きます。
一般」タブで「メディアを追加」ボタンをクリックし、会社ロゴをアップロードすることができます。

ステップ 5: 電卓フォームをスタイリングする
さて、次はリードフォームのスタイルをカスタマイズして、あなたのブランドにより適した、より魅力的なものにしましょう。
そのためには、設定 ” リードフォームにアクセスしてください。

高度なスタイル設定」をオンにすると、フィールドとフォームの周囲にコンテナを追加し、スタイリッシュな効果を与えて、よりポップにすることができます。
フィールドの枠線、コンテナの背景、テキストの色もカスタマイズできる。

アイコンを追加してフォームの外観をカスタマイズすれば、シャープでプロフェッショナルなフォームを維持できます。
ステップ6:確認メッセージの編集
最後に確認メッセージを編集します。WPFormsはユーザーが入力したフィールドと計算結果をまとめた確認メッセージを自動的に送信します。
そのためには、設定 ” 確認に向かいましょう。
ここから、ページ上で直接メッセージを送信するか、ユーザーを別のページにリダイレクトするかを選択できます。次に、テキストボックスでメッセージを編集します。
スマートタグを使えば、ユーザーが提供した情報に基づいてメッセージをパーソナライズすることができます。

フォームの見た目に満足したら、「保存」ボタンを押してください。
こうすれば、せっかく加えた変更を失うことはない。

ステップ 7: 新規オンライン電卓フォームを WordPress のページや投稿に埋め込む
次のステップでは、WordPressのページや投稿にオンライン電卓を埋め込みます。
これを行うには、WordPressのページまたは投稿を開き、「+」ボタンをクリックして新しいブロックを追加し、WPFormsブロックを選択します。

ドロップダウンメニューで、今作成したオンライン電卓フォームを選択することができます。
フォームは自動的にページに外観されるはずです。

すでにすべてがうまくいっているようなら、先に進み、一番上の『公開する』をクリックする。
これで、WordPressサイトにオンライン電卓を追加することができました。

本当に〜してもよいですか?
こんな感じだ:

それが終わったら、フォームを見直し、すべてのフォームフィールドと計算が正しく動作していることを確認します。
例えば、このフォームを完了したときの確認メッセージはこんな感じだ:

ステップ 8: フォームエントリーの表示
WPForms ” Entriesにアクセスしてフォーム名を選択すると、オンライン電卓フォームからのすべてのエントリが表示されます。
各エントリーの表示、編集、ゴミ箱内の移動は簡単です。エントリーを表示すれば、あなたや営業チームは探しているリード情報をすべて見つけることができます。

このリストをエクスポートしてマーケティングオートメーションプラットフォームにアップロードしたり、Uncanny AutomatorのようなWordPress自動化プラグインに接続することもできる。
これは、彼らがオンライン電卓フォームを送信した後、リードに連絡することができます。
さらに詳しく知りたい方は、WordPressでリードジェネレータをプロ並みに行う方法をご覧ください。
方法 2: Formidable Forms で電卓を追加する (上級者向け)
WordPressにオンライン電卓を追加するもう一つの方法はFormidable Formsプラグインを使うことです。このプラグインは高度なドラッグアンドドロップフォームビルダーを備えており、市場で最高のWordPress電卓プラグインの一つです。
このプラグインは、高度な計算を伴う複雑なフォームの作成を支援することに特化しています。
例えば、Formidable Formsには、IDX不動産サイトに追加できる住宅ローン計算機や、健康ブログやスポーツジムのサイトに最適なBMI計算機など、たくさんの計算機テンプレートが用意されています。

Formidable Forms では条件付き計算を追加することもできます。例えば、フォーム上でのユーザーのレスポンシブに基づいて、どの計算式を自動的に使用するかをプラグインに指示することができます。
まず最初に、無料のFormidable Forms Liteとプレミアム Formidable Forms の両方のプラグインをインストールして有効化します。詳しくはWordPress プラグインのインストール方法をご覧ください。
それが完了したら、Formidable ” Global Settingsに移動し、’Add a license manually’を選択します。

ライセンスキーを確認するには、Formidable Formsのサイトにアクセスしてください。
その後、アカウントにログインし、「ダウンロード」ページにアクセスしてください。

ここから、ライセンスキーをWordPressサイトのフィールドに貼り付けるだけです。
必ず「ライセンスを保存」ボタンをクリックし、上部にある「更新」ボタンをクリックしてください。

その後、「ライセンス有効化に成功しました」というメッセージが表示されます。
ステップ1:電卓フォームのテンプレートを選ぶ
これで最初の電卓を作成する準備ができました。最初のステップはFormidable ” Formsにナビゲーションして ‘+ Add New’ をクリックすることです。

次の画面では、選択できるすべてのフォームテンプレートが表示されます。
ここから下にスクロールして「電卓」カテゴリーを選択しましょう。Formidable Formsが提供する電卓テンプレートがすべて表示されます。
テンプレートをプレビューするには、マウスオーバーして「デモを表示」をクリックしてください。準備ができたら、マウスオーバーして「Use Template」をクリックしてください。
このガイドでは、「複利計算機」テンプレートを使いますが、どの計算機テンプレートを使ってもかまいません。

これで Formidable Forms エディターに選択したテンプレートが表示されます。
ステップ 2: 無料のオンライン電卓をデザインする
ここから、フォームの任意のフィールドをポイント&クリックでカスタマイズできます。例えば、「初期金額」のフィールドラベルや数値範囲を変更したい場合は、クリックしてそのフィールドを選択します。
その後、左側のメニューにある設定を使って変更を加えることができます。

電卓にさらにフィールドを追加するには、左側のメニューから「フィールドの追加」タブを選択するだけです。次に、電卓テンプレートにフィールドをドラッグします。
たとえば、訪問者のメールアドレスを収集したい場合は、人々がこの情報を入力できるフィールドを追加する必要があります。これを行うには、電卓テンプレートに’メール’フィールドをドラッグ&ドロップします。

その後、「メール」フィールドをクリックし、「フィールドオプション」の設定を調整します。
通常は初期設定のままでかまいませんが、できるだけ多くのジェネレータを生成するには、「必須」ボックスをチェックすることをお勧めします。これは、訪問者が結果を見るためにメールアドレスを入力する必要があることを意味します。

必要に応じて、フィールドの値を変更したり、新しいフィールドを追加することによって、あなたのカスタマイザーを継続することができます。
ステップ3:計算の調整
Formidable Formsにはすでにビルトインされたテンプレートが用意されています。とはいえ、計算式や値を調整したい場合は可能です。
注:テンプレートの初期設定を維持したい場合は、詳細フィールドはそのままにしておきます。
計算結果を確認するには、計算式の影響を受けるフィールド要素をクリックしてください。フィールド要素をクリックすると、ID番号も表示されるはずです。
左側のパネルで、フィールドオプション ” 詳細 タブに行く必要があります。初期設定」の下に、使用されている数式が表示されます。
この場合、「複利合計」のIDは20であることがわかる。
18]+[19]」という式は、「元本に対する複利」+「預金に対する複利」が「複利合計」に等しいというものである。

特定のフィールドのID番号がわからない場合、またはどのフィールドを数式に追加できるかを確認したい場合は、「初期設定値」の隣にある3つの点のアイコンをクリックしてください。
次に、フィールド・リストのドロップダウンメニューから、お探しのフィールドを選択します。好きなフィールドを選べば、数式で使用する「初期設定値」に追加されます。

覚えておくべきことは、次のような標準的な数学記号をすべて使うということだ:
- + 足し算
- – 減算の場合
- * 乗算の場合
- / 分割の場合
- () で特定の計算をまとめる
- Math.pow():方程式に指数を加える
これがその例だ。

先に示したように、[]はID番号の表記である。
完了したら、フォームをプレビューして、計算が正しく機能することを確認します。
電卓の形に満足したら、「保存」ボタンをクリックします。

フォームの名前を尋ねるメッセージが表示されるはずです。
後で簡単に参照できるように、名前を付けてください。そして、「保存」ボタンを押すだけです。

しばらくすると、「更新に成功しました」というメッセージが表示されます。
ステップ4:WordPressに無料のオンライン電卓を追加する
これで、WordPressサイトの任意のページや投稿に電卓を追加する準備が整いました。電卓フォームを追加したいページや投稿に向かう必要があります。
手始めに、電卓ページのタイトルを入力してみましょう。
そうしたら、「+」アイコンをクリックする。Formidable Forms」ブロックを選択します。 適切なブロックが表示されたら、それをクリックしてページに追加します。

その後、’Select a form’ ドロップダウンを開き、先ほど作成した電卓を選択する必要があります。
WordPressはカスタマイザーを自動的に読み込むようになります。

この時点で、テキスト、画像、電卓の説明、カテゴリーやタグなどを追加して、ページの編集を続けることができます。
電卓を公開する準備ができたら、右側にある「公開する」または「更新する」ボタンをクリックしてください。

あなたのサイトに新しい電卓ページができました。
デモサイトではこんな感じ:

ボーナスのヒントOptinMonsterでより多くのリードを獲得する
あなたの次の仕事は、無料のオンライン電卓に人々を誘導することです。そうすれば、あなたの中小企業サイトの購読者やリードの数を増やすことができます。
そこでOptinMonsterの出番です。
OptinMonsterは最高のWordPressリードジェネレータプラグインです。プロがデザインしたテンプレートと、キャンペーンで使用できるドラッグ&ドロップエディターが付属しています。

また、ライトボックスポップアップ、スライドインポップアップ、ヘッダーとフッターのバナー、カウントダウンタイマーなどのツールもあります。
これらのツールはすべて、あなたの無料オンライン電卓を宣伝するのに最適なので、より多くのユーザーとコンバージョンを得ることができます。

もしあなたがオンラインストアを運営しているのであれば、OptinMonsterには高度な’Exit-Intent’機能があり、放棄した訪問者をカスタマイザーや購読者に変換することができます。
さらに詳しく知りたい方は、OptinMonsterを使ってメール購読者を600%増加させた方法の投稿をご覧ください。
この投稿が、オンライン電卓でさらにリードを生成する方法を学ぶのにお役に立てば幸いです。オンラインフォームビルダーのエキスパートが選ぶベストや WordPressフォームに保存&継続機能を追加する方法のガイドもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Have a question or suggestion? Please leave a comment to start the discussion.