WordPressにモゲッジ計算機を追加する方法（ステップバイステップ）

住宅ローン計算機は、ウェブサイトの効果を真に高めることができます。そして、あなたのサイトに住宅ローン計算機がない場合、あなたは他のウェブサイトに潜在的な顧客を失っている可能性が高いです。

何度も見てきたことです。訪問者はあなたのサイトに来て、興味を持ち、支払いを計算するために他の場所へ行ってしまいます。そして、二度と戻ってこないこともよくあります。

だからこそ、独自の計算機を持つことが非常に重要です。訪問者を引きつけ、リードに変えるのに役立ちます。🙌

このステップバイステップガイドでは、WordPress サイトに住宅ローン計算機を追加する方法を正確に説明します。技術的な経験に関係なく、誰にでも機能する、最も信頼性が高くユーザーフレンドリーな方法を見つけました。

WordPressに住宅ローン計算機を追加する理由

モーゲージ計算機を使用すると、ユーザーは金利と返済期間に基づいて住宅ローンの支払い額の見積もりを取得できます。

訪問者は、住宅価格、頭金、金利などの情報を簡単に追加できます。その後、計算機が毎月の支払い額を計算します。

IDX物件リストで不動産ウェブサイトを作成している場合、住宅ローン計算機はリード獲得にも役立ちます。訪問者は計算機を使用できますが、結果を保存するにはメールアドレスを入力する必要があります。

訪問者は住宅ローンの計算を取得するために別のサイトにアクセスする必要がないため、これは直帰率を減らすこともできます。

ファイナンシャルアドバイザー、住宅ローンブローカー、銀行、個人金融教育者も、住宅ローン計算機をサイトに追加することで恩恵を受ける可能性があります。

それでは、WordPressで住宅ローン計算機を簡単に作成する方法を見ていきましょう。このチュートリアルでは、2つの住宅ローン計算機プラグイン、WPFormsとFormidable Formsを使用した、初心者向けの2つの方法を紹介します。

これらのクイックリンクを使用して、特定のプラグインにスキップできます。

• 方法1：WPFormsでシンプルなWordPress住宅ローン計算機を追加する
• 方法2：Formidable Formsで高度なWordPress住宅ローン計算機を追加する
• ボーナスリソース 🔗: 不動産 WordPress ウェブサイトを成長させる

さあ、始めましょう！

方法1：WPFormsでシンプルなWordPress住宅ローン計算機を追加する

最初の方法はWPFormsを使用することです。AIツールと2,000以上のフォームテンプレートを備えたこのドラッグ＆ドロップフォームプラグインを使用すると、住宅ローン計算機を含むさまざまなフォームを作成できます。

この方法は、税金や保険の追加計算なしで、シンプルでありながら応答性の高い住宅ローン計算ツールを作成したい人に推奨されます。

WPBeginnerでは、お問い合わせフォームから年次読者アンケートまで、あらゆる種類のフォームを作成するためにWPFormsを使用しています。これは私たちの定番ツールであり、強くお勧めします。詳細については、WPFormsのレビューをご覧ください。

まず、WordPressにプラグインをインストールしてください。

これで完了したら、WPForms » 設定 に移動し、WPForms アカウントページから Pro プランのライセンスキーを挿入します。次に、「キーを検証」をクリックするだけです。

住宅ローン計算フォームテンプレートを選択してカスタマイズする

ライセンスキーがアクティブになったら、WPForms » 新規追加に移動する必要があります。

次の画面で、新しいフォームに名前を付けることができます。たとえば、「住宅ローン計算フォーム」のような簡単なもので構いません。

その後、フォームの作成方法を選択します。WPFormsを使用すると、次のことが可能です。

• 白紙のキャンバスを使用して、ゼロからフォームを作成する
• AIフォームビルダーを活用して、簡単なプロンプトでフォームを瞬時に作成する
• 事前に作成されたテンプレートを選択します。

このチュートリアルでは、テンプレートを使用して、ドラッグアンドドロップエディターでニーズに合わせてカスタマイズする方法を説明します。

それでは、「セットアップ」ページを下にスクロールし、検索バーを使用して住宅ローン計算フォームのテンプレートを見つけましょう。

WPFormsには2つのテンプレートがあります：住宅ローン計算フォームとシンプルな住宅ローン計算フォームです。どちらのテンプレートも同様の機能を提供しますが、フィールドが若干異なります。

シンプルな住宅ローン計算機フォームテンプレートは、潜在的な購入者が月々の住宅ローン支払額を素早く見積もるのを支援したい不動産サイトに最適です。

一方、住宅ローン計算フォームテンプレートは、支払われる総利息、住宅ローンの総支払い額、年間支払い額を含む、住宅ローンの詳細を包括的に内訳表示します。

この詳細レベルは、財務上の義務を完全に理解したい顧客にとって役立ちます。

「デモを見る」をクリックすると、各フォームの動作を確認できます。どちらのテンプレートも選択できますが、このチュートリアルでは住宅ローン計算フォームテンプレートを使用します。

選択したら、ボックスにカーソルを合わせて「テンプレートを使用」をクリックするだけです。

この段階で、Calculations アドオンが必要であるというポップアップが表示されます。

続行するには、「はい、インストールして有効化する」をクリックするだけです。

ここでドラッグアンドドロップのフォームビルダーに到着します。ご覧のとおり、テンプレートには計算機フィールドが組み込まれています。

この特定のテンプレートには、ユーザーが住宅の価値（家の総費用）と頭金（物件購入時に購入者が前払いする金額）を入力できるフィールドがあります。

スライダーを使用して、住宅ローンの金利や返済期間に関する情報を入力することもできます。

この情報を入力すると、下部のセクションでユーザーの住宅ローンの月額および年額支払い額、支払われる総利息、および住宅ローンの総支払額が自動的に計算されます。

この計算式は、「フィールドオプション」に移動し、左側のパネルで「高度」タブに移動することで見つけることができます。一番下に「数式」ボックスがあります。

このセクションは、自信がない限り変更しないことをお勧めします。とはいえ、WPForms には、ヘルプが必要な場合に利用できる 計算チートシート があります。

数式に苦労している場合は、AI Calculations 機能を使用して簡単にすることができます。

数式ボックスの横にある「数式を生成」ボタンをクリックするだけです。

これによりチャットウィンドウが開き、どのような種類の計算が必要かを平易な英語で説明すると、AI が正しい数式を即座に生成します。

さて、次にフォームをカスタマイズしましょう。新しいフィールドを追加するには、左側のパネルにある「フィールドの追加」セクションに移動します。次に、フォームビルダーに任意のフィールドをドラッグアンドドロップするだけです。

ここでは、ユーザーの名前をキャプチャするために、フォームに「名前」フィールドを追加しました。

フィールドをカスタマイズするには、それをクリックするだけで、左側のパネルに「フィールドオプション」タブが表示されます。ここには、一般、詳細設定、スマートロジックの3つのタブがあります。

フィールドラベルを変更したり、説明的なテキストを挿入したり、フィールドを必須にする場合は、「一般」を選択する必要があります。

次の画像では、「住宅価値」フィールドのラベルを「物件価格」に変更し、追加の説明を加えています。また、このフィールドを必須にしたため、ユーザーは住宅ローンの支払い計算を取得するためにこのセクションを完了する必要があります。

「高度」タブでは、プレースホルダーテキストの追加、使用したいCSSクラスの指定、フィールドラベルの非表示、必要に応じた計算機能の有効化を行うことができます。

デフォルトでは、フォームに「$」記号が表示されるため、ユーザーは値をアメリカドルで入力する必要があることがわかります。

または、「例：500,000」のようにフィールドラベルに例を挿入して、ユーザーが価格を正しく挿入する方法を知るようにすることもできます。

「スマートロジック」タブでは、フィールドに条件付きロジックを有効にできます。これはオプションですが、住宅ローン計算フォームをより魅力的にするための優れた機能です。

使用するには、「条件付きロジックを有効にする」ボタンをオンにするだけです。

次に、特定の基準に基づいてフィールドを表示または非表示にすることを選択できます。以下の例では、ユーザーがメールアドレスを入力した場合に「物件価格」フィールドを表示することを選択しました。

フォームのカスタマイズが完了したら、右上にある「保存」をクリックしてください。

フォームの設定を構成する

さて、左側にある「設定」タブに切り替えましょう。

「一般」タブでは、フォームの名前を変更したり、フォームの上部に説明を追加したりできます。指示を入力したり、ユーザーにフォームへの入力を促すためのコールトゥアクションを追加したりすることもできます。

さらに、送信ボタンのラベルと処理テキストをカスタマイズできます。

「スパム保護とセキュリティ」タブにも切り替える必要があります。

WPForms には、デフォルトで有効になっているスパム防止機能が既に搭載されています。ただし、さらなる保護対策としてAkismetを有効にすることもできます。

さらに、ユーザーがフォームを送信する前に待機する必要がある最小秒数を設定することもできます。これにより、正規のユーザーはフォームに入力するのに十分な時間が得られますが、スパムボットが急速にフォームを送信するには十分な時間はありません。

下にスクロールすると、国フィルターを有効にすることもできます。これにより、フォームが特定の国のユーザーに限定されます。不動産ウェブサイトが特定の国でのみ販売している場合は、この設定をお勧めします。

「国フィルターを有効にする」ボタンをオンにしたら、「国フィルター」の下にある「許可」をクリックして、販売先の国を選択してください。

必要に応じて、国フィルターメッセージをカスタマイズすることもできます。

ページを下にスクロールすると、CAPTCHAを使用してスパムのようなフォーム送信を防ぐこともできます。

WPForms は、カスタムの CAPTCHA、reCAPTCHA、および hCAPTCHA をサポートしています。

「通知」タブに移動しましょう。

WPForms は、誰かがフォームを完了するたびにメールを送信できます。この機能を使用するには、「通知を有効にする」をクリックするだけです。

必要に応じてメールの内容を編集できます。さらに、WordPressフォーム送信後に確認メールを送信することもできます。

これらの設定で問題がなければ、「保存」をクリックして変更を保存してください。

住宅ローンコスト計算機を WordPress サイトに埋め込む

これで、住宅ローン計算機をWordPressブログまたはウェブサイトに表示する準備ができました。これを行うには、上部メニューの「埋め込み」ボタンをクリックします。

現在、既存のページにフォームを追加するか、完全に新しいページを作成するかを選択できます。

または、ショートコードを使用することもできます。

既存のページまたは新しいページにフォームを追加するプロセスはほぼ同じです。

「既存のページを選択」をクリックすると、使用したいページを選択できます。その後、「開始！」をクリックします。

新しいページを作成することを選択した場合、ページタイトルを入力する必要があります。

前の方法と同様に、「開始」をクリックして続行します。

どちらのオプションを選択しても、標準のWordPressブロックエディターが表示されます。

ここで、「+」ブロックボタンをクリックし、WPFormsブロックを選択します。

新しいブロックで、「フォームを選択」ドロップダウンメニューを開きます。

その後、作成したフォームを単純に選択します。

これで、新しく作成されたフォームが表示されます。

ブロック設定のサイドバーで、フォームのデザインをさらにカスタマイズできます。

例えば、背景色やフィールドの境界線を変更できます。「フォームを編集」を選択すると、WPFormsビルダーに戻ることができます。

フォームの外観に満足したら、「更新」または「公開」をクリックして変更を反映させます。

当社の住宅ローン計算フォームは以下のようになります。

クラシックなブロックではないWordPressテーマを使用している場合は、ウィジェット対応エリアにフォームを表示することもできます。

外観 » ウィジェット に移動し、ウィジェット対応エリアの「+」追加ブロックボタンをクリックするだけです。これで WPForms ブロックを追加し、作成したフォームを選択できます。

ウィジェットエディターでは、住宅ローン計算ウィジェットのブロック設定を編集することもできます。

フォームの外観に満足したら、「更新」をクリックするだけです。

または、これらの方法がうまくいかない場合は、ショートコードを使用して、フォームをページ、投稿、その他のテンプレートパーツに挿入できます。

WPFormsエディタに戻り、埋め込みポップアップで「ショートコードを使用」をクリックするだけです。

その後、ショートコードをコピーして、任意のページ、投稿、またはウィジェット対応エリアに追加できます。

詳細については、WordPress でショートコードを追加する方法に関するガイドをご覧ください。

方法2：Formidable Formsで高度なWordPress住宅ローン計算機を追加する

この次の方法は、年間の固定資産税、保険、および PMI（個人住宅ローン保険）を考慮した高度な WordPress 住宅ローン計算機を作成したい場合に最適です。

フォームがそのデータと、ユーザーの住宅価格、ローン金額、ローン期間、金利を取得すると、ユーザーの支払い内訳（アモチゼーションスケジュールとも呼ばれます）を表示できます。

この方法では、Formidable Formsプラグインを使用します。このユーザーフレンドリーなWordPressお問い合わせフォームプラグインには、サイトに追加できる高度な住宅ローン計算機テンプレートが付属しています。

このプラグインを徹底的に調査し、テストしました。詳細は詳細なFormidable Formsレビューで確認できます！

まず最初に行う必要があるのは、Formidable Forms LiteとFormidable Forms Premium（ビジネスプラン）の両方のプラグインをインストールして有効化することです。

無料プラグインは機能が限定されていますが、Formidable Forms Pro はこれをベースにより高度な機能を提供しています。

詳細な手順については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、WordPressダッシュボードのFormidable » グローバル設定に移動します。ここで、「アカウントを接続」をクリックできます。

次の画面で、Formidable Forms アカウントにログインするだけです。

Formidable Forms は、Pro プラグインのインストール許可を求めてきます。「Connect and Install Formidable Forms Pro」をクリックするだけで、ライセンスキーが有効になります。

Formidable Forms の設定が完了したので、WordPress に住宅ローン計算フォームを追加する準備ができました。

高度な住宅ローン計算フォームテンプレートを使用する

まず、Formidable » Formsに移動し、「新規追加」をクリックします。

ポップアップが表示され、WordPress ウェブサイトで使用できる既製のテンプレートがすべて表示されます。

住宅ローン計算フォームテンプレートを見つけるには、検索バーに「Advanced Mortgage Calculator」と入力するだけです。次に、テンプレートの上にカーソルを合わせ、「テンプレートを使用」をクリックします。

これで、Formidable Forms ビルダーに移動します。

この時点で、ニーズに合わせてフォームをカスタマイズできます。

開始するには、カスタマイズしたいフィールドをクリックし、「フィールドオプション」タブを選択します。

そこから、フィールドラベルを変更したり、フィールドを必須にするかオプションにするかを選択したり、プレースホルダーテキストを追加したり、その他多くのことができます。

Formidable Forms を使用すると、計算機にデフォルト値を挿入することもできます。これにより、ユーザーは計算結果がどのようになるかを確認できます。

「財務分析」セクションのフィールドのいずれかをクリックした場合、「高度なオプション」を変更しないようにしてください。

この領域には計算式が含まれているため、変更すると住宅ローン計算機が完全に壊れる可能性があります。

フォームの外観に満足したら、右上隅にある「保存」をクリックして変更を保存してください。

その後、フォームに名前を入力して、後で簡単に見つけられるようにします。次に、「保存」をクリックします。

住宅ローン計算フォームのスタイルをカスタマイズする

上部メニューの「スタイル」タブに切り替えましょう。ここでフォームのデザインを選択できます。

スタイルが気に入らない場合は、「+新しいスタイル」ボタンをクリックしてください。

その後、ポップアップが表示されます。この新しいスタイルの名前を入力して「新しいスタイルを作成」をクリックするだけです。

これで、フォームのスタイルをカスタマイズできるページにリダイレクトされます。

タイポグラフィ、配色、ボタンのスタイル、チェックボックスなどを自由に編集してください。

デザインに満足したら、右上にある「更新」ボタンをクリックするだけです。

Formidable Formsの設定を構成する

この段階で、上部にある「設定」メニューに移動できます。

まず、「一般」タブでフォームのタイトルと説明をカスタマイズできます。ここに、フォームの使用方法に関する指示を挿入すると良いでしょう。

HTML を使用してテキストをスタイル設定することもできます。

下にスクロールすると、ハニーポットとJavaScriptを有効にする設定が見つかります。

スパムのエントリーを偽造および悪意のあるものから防ぐことができるため、両方の設定を有効にすることをお勧めします。 スパムエントリー。

「アクションと通知」タブでは、Formidable Forms がユーザーに送信する確認メールをカスタマイズできます。

カスタムのお礼メッセージを表示するか、特定のURLにユーザーをリダイレクトするか、別のページに送信することができます。

確認をお勧めするもう1つのタブは「ボタン」です。

ここで送信ボタンのラベルと位置をカスタマイズできます。ユーザーがフォーム送信を再開したい場合に備えて、「最初からやり直す」ボタンを追加することもできます。

フォームの設定を構成したら、「更新」ボタンをクリックして変更を保存してください。

住宅ローン計算フォームをウェブサイトに埋め込む

高度な住宅ローン計算フォームの準備ができたので、任意の投稿、ページ、またはウィジェット対応エリアに追加できます。

開始するには、右上隅にある「埋め込み」ボタンをクリックしてください。

フォームを 3 つの方法で追加できるというポップアップが表示されます。

既存のページにフォームを追加したり、新しいページを作成したり、ショートコードを使用したりできます。

既存のページオプションを選択した場合、次の画面でページを選択します。

次に、「フォームの挿入」をクリックします。

一方、新しいページオプションを選択した場合は、新しいページの名前を入力できます。

それが終わったら、「ページの作成」をクリックしてください。

どちらのオプションでも、Formidable Formsは自動的にフォームブロックをページのブロックエディターに挿入します。

コンテンツエディターから直接フォームを編集する必要がある場合は、ブロックの設定サイドバーを開いて「フォームに移動」をクリックしてください。

準備ができたら、「公開」または「更新」をクリックします。

こちらが、Formidable Forms の住宅ローン計算フォームの外観です。

または、ショートコードや PHP コードを使用して住宅ローン計算機を追加することもできます。

前述の埋め込みポップアップで、「手動で挿入」をクリックします。

次に、ショートコードまたはPHPコードのいずれかをコピーできます。繰り返しになりますが、最初のオプションについては、WordPressでショートコードを追加する方法に関する記事をお読みください。

PHPコードについては、コードスニペットの操作に慣れている場合にのみ、この方法をお勧めします。WordPressにコードを安全かつ簡単に挿入できるため、これにはWPCodeの使用をお勧めします。

WordPressにコードスニペットを挿入する方法については、WordPressにコードスニペットを挿入する方法に関するガイドをお読みください。

プラグインの詳細については、WPCode の完全なレビューをご覧ください。当社のビジネスパートナーの中には、カスタムコードスニペットを挿入および管理するためにこれを使用しており、非常にうまく機能しています！

ボーナスリソース 🔗: 不動産 WordPress ウェブサイトを成長させる

不動産サイトをさらに良くしたいとお考えですか？ より多くのリードを獲得することから、ページの表示速度を向上させることまで、これらの厳選されたリソースは、WordPressサイトの成長と最適化に役立ちます。

• おすすめのWordPress不動産プラグイン
• 不動産業者向けのおすすめ不動産WordPressテーマ
• WordPressフォームにピン付きのGoogleマップを埋め込む方法
• WordPressで注目のコンテンツスライダーを適切に追加する方法
• WordPress で Web ディレクトリを作成する方法
• オンラインでビジネスを成長させるためのヒント
• ランキングを向上させる究極のWordPressローカルSEO
• WordPressの速度とパフォーマンスを向上させるための究極のガイド

この記事が WordPress に住宅ローン計算機を追加する方法を学ぶのに役立ったことを願っています。また、WordPress で自動車ローンまたは車の支払い計算機を作成する方法に関する記事や、よりインタラクティブなフォームを作成するための最良の方法に関する専門家のアドバイスも参照してください。

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