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&homevalue=300000&loanamount=285000&interestrate=4.5&loanterm=30&propertytax=2400&pmi=1&homeinsurance=1000&monthlyhoa=0"></iframe>
Here is what the mortgage calculator will look like…
Is this the full source code? It cuts off the image of the calculator almost immediately when adding it to a custom page.
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.
This is great! I was able to add this to my website easily. Thank you for the resource. I’ve adjusted the numbers the mortgage calculator starts with to better show the average price in my market and better align with the current mortgage rates but I cannot seem to get the loan amount to adjust when the page first loads.
I also see on your page, that the home price minus the down payment also doesn’t match the loan amount. (once you interact with it, it corrects the data, but I’m particular and do not like the discrepancy.)
Hey David!
Apologies, there was a typo in the code… loanammount should only have 1 m. The code has been updated accordingly. This will fix your issue.