WordPressで住宅ローン計算機を追加する方法（ステップバイステップ）

想像してみてください：潜在的な買い手があなたの不動産サイトを訪問します。彼らは興奮しているが、多分少し圧倒されています。彼らはどのようなプロパティを買う余裕ができますか？あなたのサイト上でその質問に答えることができたら、それは素晴らしいことではないでしょうか？

もしあなたが不動産業を営んでいるのであれば、サイトに住宅ローン計算機を追加することで、競合他社よりも大きなアドバンテージを得ることができます。それは潜在的な住宅購入者が彼らの毎月の支払いを推定することができ、知識豊富で有用なリソースとしてあなたを配置します。

この投稿では、WordPressで住宅ローン計算機を簡単に追加する方法を紹介します。

なぜWordPressに住宅ローン計算機を追加するのか？

住宅ローン計算機は、ユーザーが金利と償却期間を使用して、住宅ローンの支払いの見積もりを得ることができます。

訪問者は、単に自分の家の価値、頭金、金利などの情報を追加することができます。その後、電卓は、彼らが月に支払う必要があるどのくらいを把握します。

IDX物件リストで不動産サイトを作っているなら、住宅ローン計算機もリードジェネレータに役立つだろう。訪問者は電卓を使用することができますが、彼らは結果を保存するために自分のメールアドレスを入力する必要があります。

訪問者が住宅ローンの計算をするために別のサイトを訪れる必要がないため、直帰率を下げることもできます。

ファイナンシャル・アドバイザー、住宅ローン・ブローカーや銀行、個人金融教育者も、サイトに住宅ローン計算機を追加することで利益を得られるかもしれない。

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

これらのクイックリンクを使って、特定のプラグインに飛ぶことができます：

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

最初の方法はWPFormsを使うことです。1,800以上のフォームテンプレートがあり、ドラッグ＆ドロップでフォームを作成できるプラグインです。

この方法は、税金や保険の計算を追加することなく、シンプルでレスポンシブな住宅ローン計算機を作成したい人にお勧めです。

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

それが完了したら、WPForms ” 設定に 移動し、WPFormsのアカウントページからProプランのライセンスキーを挿入します。その後、単に’キーを検証’をクリックします。

住宅ローン計算フォームテンプレートの選択とカスタマイズ

ライセンスキーが有効化されたら、WPForms ” Add New に移動する必要があります。

次の画面では、新しいフォームに名前をつけることができます。住宅ローン計算フォーム」のようなシンプルなものでも構いません。

下にスクロールして、検索バーを使用して住宅ローン計算フォームのテンプレートを検索します。

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

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

一方、住宅ローン計算書テンプレートは、総支払利息、住宅ローン総支払額、年間支払額など、住宅ローンの詳細の包括的な内訳を提供します。このレベルの詳細は、金融債務を完全に理解したいカスタマイザーに役立ちます。

View Demo’をクリックすると、それぞれのフォームの動作を見ることができます。どちらのテンプレートも選択できますが、チュートリアルでは住宅ローン計算フォームテンプレートを使用します。

選択したら、『テンプレートを使用』をクリックするだけです。

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

はい、インストールして有効化」をクリックして続行します。

ドラッグアンドドロップでフォームビルダーに到着します。ご覧の通り、テンプレートには電卓フィールドがビルトインされています。

この特定のテンプレートには、ユーザーが住宅価格（住宅の総費用）と頭金額（物件購入時に買い手が前払いする金額）を入力する欄がある。

ユーザーはスライダーを使って、住宅ローンの金利やキーワードを入力することもできる。

この情報を入力すると、一番下のセクションでユーザーの住宅ローンの月々の支払額と年間の支払額、支払利息の合計、住宅ローンの支払総額が自動的に計算される。

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

自信がない限り、このセクションに変更を加えないことをお勧めします。とはいえ、WPFormsにはCalculations cheat sheet（計算チートシート）があります。

フォームをカスタマイズしてみましょう。新規フィールドを追加するには、左側のパネルにある「フィールドの追加」セクションに行きます。そして、任意のフィールドをフォームビルダーにドラッグ＆ドロップします。

ここでは、ユーザーの名前を取得するために、フォームに「名前」フィールドを追加しています。

フィールドをカスタマイズするには、そのフィールドをクリックするだけで、左側のパネルに「フィールドオプション」タブが表示されます。ここには3つのタブがあります：General、Advanced、Smart Logicです。

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

次の画像では、「Home Value」フィールドのラベルを「Property Price」に変更し、いくつかの説明を追加しています。また、このフィールドを必須フィールドにし、ユーザーが住宅ローンの支払額を計算するためにこのセクションを完了する必要があるようにしました。

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

初期設定では、フォームに’$’記号が表示されるので、ユーザーはアメリカドルで値を入力する必要があります。

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

スマートロジック’タブを使用すると、フィールド内の条件付きロジックを有効化することができます。それはオプションですが、それはあなたの住宅ローンの計算フォームをより魅力的にするための良い機能です。

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

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

フォームのカスタマイザーが終わったら、右上の「保存」をクリックします。

フォームの設定を行う

では、左側の「設定」タブに切り替えてみましょう。

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

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

また、「スパム対策とセキュリティ」タブに切り替えてください。

WPFormsはすでに初期設定で有効化されたスパム対策が付属しています。しかし、あなたはさらなる保護対策のためにAkismetを有効化することができます。

さらに、ユーザーがフォームを送信するまでに待たなければならない最小秒数を自由に設定できます。これにより、本物のユーザーにはフォームを入力するのに十分な時間が与えられますが、スパムボットがフォームを素早く送信するのに十分な時間は与えられません。

下にスクロールすると、特定の国のユーザーにフォームを制限する国フィルターを有効化することもできます。あなたの不動産サイトが特定の国でしか販売していない場合、この設定をお勧めします。

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

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

ページを下に移動すれば、CAPTCHAを使ってスパム的なフォーム送信を防ぐこともできる。

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

通知」タブに移動しよう。

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

Pro Tip: 新しいフォーム送信にすぐに対応するためには、これらのメッセージがスパムフォルダーではなく、受信トレイに安全に届くようにしたいものです。とはいえ、メール到達率を向上させ、WordPressがメールを正しく送信できない問題を解決するには、SMTPサービスプロバイダーを利用することをお勧めします。

必要に応じてメールのコンテンツを編集することができます。また、WordPressフォーム送信後に確認メールを送信することもできます。

これらの設定に満足したら、「保存」をクリックして変更を保存することをお忘れなく。

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

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

既存のページにフォームを追加するか、まったく新しいページを作成します。

あるいは、ショートコードを使うこともできる。

既存のページや新規ページにフォームを追加する手順はほとんど同じです。

既存のページを選択』をクリックすると、使いたいページを選ぶことができます。その後、『Let’s Go!

新規ページを作成する場合は、ページのタイトルを入力する必要があります。

先ほどの方法と同様に、「Let’s Go！」をクリックして次に進む。

どちらの設定もWordPress標準のブロックエディターになります。

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

新規ブロックで、’Select a Form’ ドロップダウンメニューを開きます。

その後、先ほど作成したフォームを選択するだけです。

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

ブロック設定のサイドバーでは、フォームのデザインをさらにカスタマイズすることができます。例えば、背景色やフィールド枠線を変更することができます。また、’Edit Form’ を選択することでWPFormsビルダーに戻ることができます。

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

住宅ローン計算フォームはこんな感じです：

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

外観 ” ウィジェット にアクセスし、ウィジェット対応エリアの ‘+’ ブロック追加ボタンをクリックするだけです。WPFormsブロックを追加し、作成したフォームを選択します。

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

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

また、これらの方法がうまくいかない場合は、ショートコードを使用してページ、投稿、その他のテンプレートパーツにフォームを挿入することもできます。WPFormsエディターに戻り、埋め込みポップアップで’use a shortcode’をクリックするだけです。

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

詳しくは、WordPressでショートコードを追加する方法をご覧ください。

方法 2: Formidable Forms を使って WordPress の高度な住宅ローン計算機能を追加する

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

フォームにユーザーの住宅価格、ローン額、ローン期間、金利などのデータが入力されると、ユーザーの支払い内訳（償却スケジュールとも呼ばれる）を表示することができる。

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

まず最初に、Formidable Forms Liteと Formidable Forms premium (Business plan) の両方のプラグインをインストールして有効化します。

無料のプラグインは機能が限られていますが、Formidable Forms Pro はより高度な機能のベースとしてこのプラグインを使っています。

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

有効化したら、WordPressダッシュボードのFormidable ” Global Settingsにアクセスしてください。ここで、’Connect an Account’をクリックします。

次の画面で、Formidable Formsアカウントにログインします。

Formidable Forms が Pro プラグインのインストール許可を求めてきます。Formidable Forms Pro に接続しインストールする」をクリックしてライセンスキーを有効化してください。

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

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

まずはFormidable ” Formsにアクセスし、「新規追加」をクリックします。

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

住宅ローン計算フォームのテンプレートを見つけるには、検索バーに「Advanced Mortgage Calculator」と入力してください。そして、テンプレートにマウスオーバーし、「テンプレートを使用」をクリックします。

Formidable Formsビルダーに到着します。この時点で、あなたのニーズに一致するようにフォームをカスタマイズすることができます。

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

そこから、フィールドラベルの変更、フィールドが必須かオプションかの設定、プレースホルダーテキストの追加、その他いろいろなことができます。

Formidable Formsでは、電卓に初期値を設定することもできます。これにより、ユーザーは自分の計算がどのように見えるかを確認することができます。

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

このエリアには計算式がコンテナで格納されているため、これを変更すると住宅ローン計算機が完全に壊れてしまう可能性があります。

フォームの見た目に満足したら、右上の「保存」をクリックして変更を保存します。

その後、後でフォームを簡単に識別できるように、フォームの名前を入力します。そして、「保存」をクリックする。

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

トップメニューの「スタイル」タブに移りましょう。ここでフォームのデザインを選ぶことができます。

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

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

フォームスタイルをカスタマイズできるページが表示されます。

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

デザインに満足したら、右上の「更新」ボタンをクリックします。

Formidable Formsの設定を行う

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

まず、「全般」タブでフォームのタイトルと説明をカスタマイズすることができます。これはフォームの使用方法に関する説明を挿入するのに良い場所かもしれません。

また、HTMLを使ってテキストをスタイルすることもできる。

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

両方の設定を有効化することで、偽や悪意のあるスパムエントリーを防ぐことができるので、有効化することをお勧めします。

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

カスタマイザーでサンキューメッセージを表示したり、ユーザーを特定のURLにリダイレクトしたり、別のページに送ったりすることができます。

もうひとつのタブは「ボタン」だ。

ここでは送信ボタンのラベルや位置をカスタマイズしたり、ユーザーがフォーム送信を再開したい場合のために’やり直し’ボタンを追加することができます。

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

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

さて、あなたの高度な住宅ローン計算フォームの準備が整いましたので、あなたはそれを任意の投稿、ページ、またはウィジェット対応のエリアに追加することができます。

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

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

既存のページにフォームを追加することも、新規ページを作成することも、ショートコードを使用することもできます。

既存ページ設定を選択した場合は、次の画面でページを選択します。

そして、「フォームを挿入」をクリックする。

一方、新規ページ設定を選択した場合は、新規ページの名前を入力することができる。

それが終わったら、先に進んで『ページを作成』をクリックする。

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

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

準備ができたら、「公開する」か「更新する」のどちらかをクリックしてください。

Formidable Formsの住宅ローン計算フォームはこんな感じです：

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

先ほどの埋め込みポップアップで、『手動で挿入』をクリックする。

次に、ショートコードかPHPコードのどちらかをコピーする。最初の設定については、WordPressでショートコードを追加する方法の投稿をお読みください。

PHPコードについては、コード・スニペットの扱いに慣れている場合にのみ、この方法をお勧めします。WPCodeを使用することをお勧めします。このプラグインを使用すると、WordPressに安全かつ簡単にコードを挿入することができます。

詳しくは、WordPressにコードスニペットを挿入する方法をご覧ください。

この投稿がWordPressで住宅ローン計算機を追加する方法を学ぶのにお役に立てば幸いです。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.