Mortgage Calculator

This widget displays a powerful mortgage payment calculator that's perfect for a real estate site or brochure-style site designed to attract home buyers. This turnkey solution is highly responsive, with calculations done in realtime, and offers intuitive controls like sliders and clickable percentage selectors.


Designed for versatility, every element of the calculator is customizable, from labels to currency symbols. This means that you're free to use it in any market in the world. And with the ability to easily enable and disable fields in the calculator, this tool can be as deep or simple as you like.


Preview: https://demo.wocode.com/mortgage-calculator

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it into a row or column where you would like the mortgage calculator to be on the site.

WIDGET OPTIONS

  • Open the widget option panel.
  • Unique ID: This field should be updated when multiple mortgage calculator widgets are used on the same page. One trick we like to use is to enter a new, non-default Unique ID in the first widget, before adding the 2nd widget. This way, neither widget is ever sharing the same Unique ID.
  • Default Loan Amount: Sets the amount that will be entered into the Loan Amount field by default.
  • Default Loan Term (years): Sets the loan term that will be selected by default on the Loan Term slider.
  • Default Interest Rate (%): Sets the rate that will be used by default in the Interest Rate field.
  • Display Total Interest Paid: Enables/disables whether the Total Interest Paid field is visible in the calculator.

  • Display Total Amount Paid: Enables/disables whether the Total Paid field is visible in the calculator.


  • Enable Down Payment: Enables/disables whether the down payment field is visible in the calculator.

Default Down Payment Amount: Sets the default amount that is used in the Down Payment field.


  • Enable Property Tax: Enables/disables whether the Property Tax field is visible in the calculator.

Default Property Tax: Sets the default value that is used in the Property Tax field.


  • Home Insurance: Enables/disables whether the Home Insurance field is visible in the widget.

Default Home Insurance Amount: Sets the default insurance amount that is used in the widget.


  • Currency Symbol: Sets the currency symbol that is used in the calculator, by default it will be the dollar symbol ($) but can be changed to any currency.


  • Title, Header & Footer Labels: Contains the input fields for the calculator's content.

    Title Content: Set the displayed calculator title.

    Header Content: Set the header text that is displayed just below the calculator title.

    Footer Content: Set the footer text that is displayed at the bottom of the calculator.


  • Parameter Labels: This tab has text fields that allow you to change the labels that will be displayed for the following parameter fields:

    Loan Amount

    Down Payment

    Property Tax

    Home Insurance

    Loan Term

    Interest Rate

    Monthly Payment

    Total Paid Amount

    Total Interest Paid

DESIGN SETTINGS

The Design section allows extensive options to customize the look and feel of the calculator. The design settings in the design panel are all pretty self-explanatory and are mostly related to padding and text styling within the widget. With the exception of a few specific settings that we wanted to highlight specifically.


  • Widget Title Styling > Background Color: This will set the background color for the header at the top of the calculator.


  • Monthly Payment Styling > Background Color: This will set the background color for the monthly payment field in the calculator.


  • Parameter Styling: This tab contains the styling options for the various parameter labels and input fields.


  • Slider Styling: There are two settings that control the styling for the "Loan Term" slider, these are located within the Parameter Styling sections of the design tab.

Parameter Styling > Slider Accent Color: Sets the color of the slider line as well as circle that visually displays how far the slider has been

Parameter Styling > Slider Line Color: Sets the default color of the slider.