How To: Add A Mortgage Calculator Custom Page To Your kvCORE Website

Copy and paste the entire code below into a new kvCORE Custom Page and you’ll get a mortgage calculator that is mobile responsive. For our Canadian friends, click here…

Note: if you’re installing this on Kunverion/k+, you must be on the broker/admin login, and you’ll want to run the below code through an HTML minifier before pasting into your custom page. This is due to the way the Kunversion text editor adds paragraph tags after line breaks in custom HTML markup. kvCORE users can simply copy and paste the code below.

Too busy or too geeky for you to do? Hire us to install and customize the values for you, remove the kvCORE sidebar widgets to make for a full width calculator, and we can even remove the scroll bar on the calculator! Click here for more info.

Insert the following code into your kvCORE custom page. The code must be entered as HTML.

<h2 class="m-b-2 text-center">Estimate Your Monthly Payment</h2>
<style>iframe{height:2400px;width:100%;border:0}@media (min-width:768px){iframe{height:2260px}}@media (min-width:992px){ iframe{height:2280px}} @media (min-width:1200px){ iframe{height:1280px}}</style>
<iframe src="https://www.mortgagecalculator.org/webmasters/?downpayment=15000&amp;homevalue=300000&amp;loanammount=285000&amp;interestrate=4.5&amp;loanterm=30&amp;propertytax=2400&amp;pmi=1&amp;homeinsurance=1000&amp;monthlyhoa=0"></iframe>

Here is what the mortgage calculator will look like…

Related posts:

How To: Make Your kvCORE Testimonial Slider Automatically Slide
How To: Test Your Kvcore/K+ Customizations On Mobile
AUTOMATIC Mobile Responsive Embedded Youtube Videos For Your kvCORE Site
How To: Embed YouTube Videos In Kvcore Custom Pages The Right Way
Posted in How To

2 Comments

  1. Dana Biggs on September 16, 2022 at 4:02 pm

    Is this the full source code? It cuts off the image of the calculator almost immediately when adding it to a custom page.

    Reply
    • Justin Hemker on September 16, 2022 at 7:24 pm

      That is the full source code for the calculator. Depending on your page layout you may have to add some custom styling to size the iframe to fit the page and show the entire content of the calculator without scrollbars. I’ve updated the code above with a bit of styling that should get you pretty close to what you’re looking for.

      Reply

Leave a Comment