A simple responsive mortgage calculator widget and shortcode.
The Responsive Mortgage Calculator is a jQuery widget and shortcode that's designed to fit easily into any theme, on any device, at any size. Just what every "Real Estate Agent on the go" needs.
The calculator allows your website visitors to estimate their mortgage payments by entering:
- the total cost of the home,
- a down payment amount,
- an interest rate (fixed rate),
- the amortization period,
- and they can select a payment period, either monthly, bi-weekly, or weekly,
- NEW * beautiful popup summary with chart and amortization schedule, powered by Mortgage Payment Calculator.
The mortgage payment result is displayed below the form - very simply and very easy to follow. For the savvy user, a click on the information icon reveals more details…
There are settings to adjust the styling, a light and a dark theme, or you can remove the styling entirely and use your theme’s styling. The HTML is built with plenty of classes, so it’s easy to override the included stylesheet with your own CSS.
Plenty of Options
- Set the interest rate compounding period for your region.
- Format currencies how you want with your own symbol, ISO code and number format.
- Hide the down payment field.
- Set a default interest rate.
- Accept amortization period in months or years.
- Set a fixed payment period.
- Set available payment period options.
- Rename the input labels.
- Add your own CSS classes.
Use the shortcode on different pages with different field names by using shortcode attributes. They’re pretty obvious, but here’s an example:
[mortgagecalculator totalamount="Mortgage Amount"]
or use the first letter of the original labels:
[rmc ta="Mortgage Amount"]
Set input values using attributes for total amount, down payment, interest rate, and amortization period the long way:
[mortgagecalculator total_amount_value="$250,000" down_payment_value="$50,000" interest_rate_value="3.49%" amortization_period_value="15 years"]
or using the short versions:
[rmc tav="$250,000" dpv="$50,000" irv="3.49%" apv="15 years"]
The Responsive Mortgage Calculator is for demonstration purposes only and may not reflect actual numbers for your mortgage.
On submission, the page just reloads and the calculator shows no results
First, try editing the page with the shortcode. Switch from the visual editor to plain text editing, add the shortcode in plain text, and save it. Check the mortgage calculator to see if it working. If that didn’t work, you can…
Solve this problem by manually loading the scripts and styles. In the plugin folder, open the
Extras folder, then open the file called
manually_load_scripts.php. Copy the contents to your theme’s functions.php file. Even better, copy it to the functions.php file of a child theme. Change the page slug in the
if conditional from
your-page-slug-here to the actual page slug you’re using for the shortcode. Test it.
The calculated payment is off by a few dollars
The mortgage calculator calculates interest monthly by default, but you can change this on the settings page. Go to
Resp Mortgage Calculator and change the setting ‘Compounding Period’ to the correct period for your region.
When I put two calculators on the same page, it doesn't work
This is a known issue. In the current version of the calculator, there can only be one instance of Responsive Mortgage Calculator on a page. This may change at some point in the future.
- Small fixes
- Tested with the new version of WordPress
- Added default values for Total Amount, Down Payment, Interest Rate and Amortization Periods
- Added beautiful summary popup with chart and amortization schedule
- Changed summary display options: show popup immediately; show monthly payment along with popup toggle icon; show monthly payment, textual summary and popup toggle icon
- Fixed a bug that caused error messages to display if no post object was loaded
- Fixed a bug where localization file was not found if calculator data was submitted to the server
- Updated widget constructor call to parent constructor since call to WP_Widget constructor is deprecated
- Added shortcode attributes to set input values. Various permutations of the attributes are available, with some listed below
- Total amount value can now be set using the shortcode attribute total_amount_value or tav
- Down payment value can now be set using the shortcode attribute down_payment_value or dpv
- Interest rate value can now be set using the shortcode attribute interest_rate_value or irv
- Amortization period value can now be set using the shortcode attribute amortization_period_value or apv
- Added options to set which payment periods can be selected
- Added option for semi-annual payment period
- Fixed a bug where the native select box arrow was displaying in Firefox even when fancy select styling was enabled
- Modified the arrow on the fancy select box to be a little smaller with no background
- Added an option for a minimum total amount
- Added options for fixed yearly and quarterly payments
- Fixed a bug that was causing the payment period to always be monthly of the payment period is hidden
- Added fixed height to inputs and select fancy styling.
- Added a setting to allow for 0% interest
- Fixed an error on server side calculations that caused total with down payment and interest to be miscalculated
- Removed dependency on the jQuery.isNumeric method.
- Fixed bugs in the server side calculation processor.
- Merry Christmas! Responsive Mortgage Calculator Pro is now available! Use coupon code XMAS2015 for 20% off till New Years.
- Removed dead code
- Amortization period is now unlimited
- Detailed summary now has slide animation when toggle is clicked
- Works over SSL
- Changed default compounding period to monthly
- You can now set whether amortization period is in years or months
- Added a number formatting setting to the options page for international currency systems. You can now choose the thousands separator, the decimal delimiter, and the number of decimal places. Also includes the Indian System.
- Interest Rate field now corrects for poorly formatted input
- Options page descriptions are improved and labels are shorter
- Shortcode detection includes form id detection, in case the post content is preprocessed by Visual Composer or other visual editing tools
- This version marks completion of changes to currency formatting. If you skipped update 2.1.9/1, please read those updates.
- Completed changes to the .pot, and FR and ES .po and .mo files to include changes to the way that currencies are now formatted and displayed. These changes impact the summary section only
- Currency format has been removed from the translation files and placed into the database via the options page. (see 2.1.9 updates)
- This update requires resaving the options or reinstalling to initialize the new currency format and new result settings (see changes below)
- Currency is now entirely customizable (replaced the select box with a text input)
- You can now arrange your currency results using the currency symbol, amount and ISO code. See the options page to create your currency format
- You can now choose to hide the total with interest and downpayment in the results summary. See the options page
- Minor changes to localizations. New .pot, .po, .mo files pending. Please await changes to FR and ES language files if you are using them.
- Added Peso currency symbol
- Security update: added security check to all necessary PHP files to prevent unwanted access to support files
- Corrected a class that prevented the ‘i’ icon from being correctly positioned
- Total Amount and Down Payment fields now accept commas and correct for poorly formatted input
- Provided a helper php file to manually load scripts for people using visual editor plugins.
- Changed script loading so that JS and CSS are always registered. JS and CSS can now be enqueued from your own scripts by calling wp_enqueue_script(‘lidd_mc’) and wp_enqueue_style(‘lidd_mc’)… in case you need to manually load them.
- Added an option to set a default interest rate
- Accented characters can now be used for field labels
- Script/style loading moved to ‘wp’ action and combined
- Completed internationalization
- Added front end French and Spanish translations - thanks to designium
- Added missing files
- Added option for setting a fixed payment period
- Result now shows the payment period
- Added ability to set input and submit button labels using shortcode attributes
- Beginning internationalization - still needs PO and MO files
- Added generic currency symbol
- Added input for ISO currency code on the options page
- Fixed an error where the JS and CSS weren’t loading with the [rmc] shortcode
- Quick and dirty bug fixes.
- Massive code rewrite.
- Added options page.
- Widget users may need to reactivate the widget.
- Minor CSS to remove margins from the Payment Period select box and prevent the surrounding span from resizing.
- Fixed a bug that caused the form to display at the top of the page instead of where the shortcode was placed.
- Made sure that JS and CSS are being included when the shortcode is used…
- Fixed a minor UI bug where the arrow background on the select box was too short.
- Added shortcodes
Install this plugin just like any other…
- Upload the plugin folder
- Activate the plugin through the 'Plugins' menu in WordPress
- Access the
Widgetspage under the
- Drag the
Responsive Mortgage Calculatorinto the Widget display area of your choice.
- If you want, change the title and save it.
You can insert the mortgage calculator into a page or post using the short code [mortgagecalculator] or [rmc].
Set the Compounding Period
The mortgage calculator has a default compounding period that is semi-annual. Visit the settings page under
Resp Mortgage Calculator and change the setting ‘Compounding period for the mortgage interest’ to the correct period for your region.
The mortgage calculator fits in the widgets area of your theme or on any page and blends right in. The form inputs are styled simply and unobtrusively. The ‘Calculate’ button takes it’s styling from your theme.
The mortgage payment amount is displayed below the ‘Calculate’ button. The circled chart icon is clickable.
A longer summary of the mortgage details can be shown by changing appropriate setting.
A popup summary of the mortgage details is displayed when the chart icon is clicked.