Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

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

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

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

How to Add a Mortgage Calculator in WordPress

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

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

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

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

An example of a mortgage calculator in the Zillow website

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

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

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

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

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

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

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

WPForms' mortgage calculator form template

注: WPFormsには無料版がありますが、このチュートリアルでは計算アドオンが含まれているProプランを使用します。WPFormsのディスカウントはこちらです!

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

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

Verifying a WPForms license key

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

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

Clicking Add New in WPForms inside the WordPress admin panel

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

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

Finding the Mortgage Calculator Form template in WPForms

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

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

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

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

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

Clicking the Use Template button in WPForms

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

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

Installing and activating the WPForms Calculations addon

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

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

Customizing the mortgage calculator form template in the WPForms builder

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

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

The mortgage calculation section in the WPForms mortgage calculator form template

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

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

The mortgage calculation formula in the WPForms mortgage calculator form template

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

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

Dragging and dropping the Name field to the form in WPForms

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

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

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

Configuring the WPForms' General field options

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

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

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

Customizing a field placeholder text in WPForms

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

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

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

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

フォームの設定を行う

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

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

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

Configuring the WPForms General settings in the Settings tab

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

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

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

Configuring the Spam Protection and Security Settings in WPForms

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

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

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

WPForms' Country Filter settings

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

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

WPForms' CAPTCHA options

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

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

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

Enabling email notifications in WPForms

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

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

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

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

Clicking the Embed button in WPForms

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

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

The embed options in WPForms

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

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

Choosing an existing page to embed WPForms in

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

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

Creating a new page to embed the WPForms form in

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

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

Adding the WPForms block in the Gutenberg editor

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

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

Selecting a WPForms form to add in the block editor

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

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

The WPForms block settings sidebar in the block editor

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

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

An example of what a mortgage calculator form created with WPForms looks like

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

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

Adding a WPForms widget in the WordPress widget editor

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

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

Updating a widget-ready area after adding the WPForms block as a widget

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

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

Copying the WPForms form's 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’をクリックします。

Activating the Formidable Forms premium license key

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

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

Connecting and installing Formidable Forms Pro on WordPress

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

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

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

Creating a new Formidable Forms form in WordPress

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

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

Finding the advance mortgage calculator template in Formidable Forms

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

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

Editing an existing field in WPForms

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

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

Editing the default value of a form field in Formidable Forms

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

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

The Financial Analysis section in a Formidable Forms mortgage calculator

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

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

Saving a form created with Formidable Forms

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

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

Editing the style of a Formidable Forms form

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

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

Creating a new Formidable Forms form style

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

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

Configuring a custom form style in Formidable Forms

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

Formidable Formsの設定を行う

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

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

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

Configuring the General settings in Formidable Forms

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

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

Enabling spam protection in Formidable Forms

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

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

Configuring the Actions and Notifications settings in Formidable Forms

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

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

Configuring the Buttons settings in Formidable Forms

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

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

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

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

Clicking the Embed button in Formidable Forms

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

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

Choosing a method to embed a Formidable Forms form

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

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

Selecting a page to insert the Formidable Forms form in

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

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

Creating a new page to insert a Formidable Forms form into

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

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

Adding and editing the Formidable Forms block in the block editor

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

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

Example of the mortgage calculator form made with Formidable Forms

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

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

The Embed form shortcode and PHP code options to display the Formidable Forms form

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

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

WPCode - Best WordPress Code Snippets Plugin

詳しくは、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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

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

Reader Interactions

12件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    It is possible to change dollars to another currency in the calculator. E.g. CZK (Czech crown)?

    • WPBeginner Support says

      WPForms does allow you to change currencies, you would need to check with WPForms’ support for the current currencies available :)

      管理者

  3. Mrteesurez says

    Nice article to add a mortgage calculator bin WordPress. Having a mortgage calculator is really beneficial to a financial blogs and others related websites as visitors don’t have to visit a different site to get a mortgage calculation, that’s all in one experience for users make them stay more.
    But I want to ask if custom CSS code can be applied to the calculator and make it more appealing ?

    • WPBeginner Support says

      It would depend on how you want it to look but you can apply CSS to these plugins.

      管理者

    • Jiří Vaněk says

      I use WP Forms and when I make forms it allows you to set your own CSS. There is a pretty good guide on how to do this directly on the WP Forms website, where I also drew advice. Be sure to check it out and you’ll learn a lot about how to personalize forms for yourself.

  4. Karina Le Roux says

    Hi there, I want to know if the currency in a different country will affect the mortgage calculator? I see in the screenshots only $, but I would like it to be South African Rand (R), will that be possible?

    • WPBeginner Support says

      Changing the currency should not cause an issue, if you reach out to Formidable Forms’ support they can assist you with any questions you may have about how to set it up.

      管理者

  5. Erick says

    Hi. Since we work with different banks and each of them have their own amount of interest rates, is it possible to have an option for the clients to select their preferred bank based on their interest rate or can I only use 1 specific predefined interest rate?

    • WPBeginner Support says

      You would want to reach out to the plugin’s support for the specifics and you could likely set that up how you are wanting.

      管理者

    • WPBeginner Support says

      Depending on the theme it could have some effect, but it shouldn’t be a large effect

      管理者

返信を残す

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