{"id":27,"date":"2018-02-12T20:02:27","date_gmt":"2018-02-12T20:02:27","guid":{"rendered":"http:\/\/bossakov.eu\/wpdemo\/?page_id=27"},"modified":"2023-03-30T09:06:20","modified_gmt":"2023-03-30T09:06:20","slug":"loan-calculator","status":"publish","type":"page","link":"https:\/\/bossakov.eu\/wpdemo\/pvb-cf7-calculator-pro\/loan-calculator\/","title":{"rendered":"Loan calculator"},"content":{"rendered":"<p>This is a simple example with three input parameters and one calculated output.<\/p>\n<p>It uses a third-party plugin for the slider interface: <a href=\"https:\/\/wordpress.org\/plugins\/cf7-ui-slider\/\">Cf7 UI slider<\/a>. The same result can be achieved with standard number fields.<\/p>\n\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f30-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"30\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/wpdemo\/wp-json\/wp\/v2\/pages\/27#wpcf7-f30-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"30\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.7\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f30-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_group_fields\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_visible_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_repeaters\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_steps\" value=\"{}\" \/><input type=\"hidden\" name=\"_wpcf7cf_options\" value=\"{&quot;form_id&quot;:30,&quot;conditions&quot;:[],&quot;settings&quot;:{&quot;animation&quot;:&quot;yes&quot;,&quot;animation_intime&quot;:200,&quot;animation_outtime&quot;:200,&quot;conditions_ui&quot;:&quot;normal&quot;,&quot;notice_dismissed&quot;:true,&quot;repeater_remove_button&quot;:&quot;bottom&quot;,&quot;wpcf7cf_settings_saved&quot;:1}}\" \/>\n<\/fieldset>\n<p><label> Loan amount ($)<br \/>\n\r\n\r\n            <div id=\"loan_amount\"><\/div>\r\n            <script>\r\n                jQuery(function ($) {\r\n                    $(window).ready(function () {\r\n\t\t\t\t\t\t                        var tooltip = $('<div class=\"slider-tooltip\" \/>').css({\r\n                            position: 'absolute'\r\n                        });\r\n\r\n                        tooltip.text('5000');\r\n\r\n                        $(\"#loan_amount\").slider({\r\n                            range: \"min\",\r\n                            min: 0,\r\n                            max: 10000,\r\n\t\t\t\t\t\t\tstep:100,                            value: 5000,\r\n                            slide: function (event, ui) {\r\n                                $(\"#loan_amount-single-slider\").val('' + ui.value);\r\n                                tooltip.text('' + ui.value);\r\n                            },\r\n                            change: function (event, ui) {\r\n                            }\r\n                        }).find(\".ui-slider-handle\").append(tooltip);\r\n\/\/                        $(\"#\/\/\").val(\/\/);\r\n                    });\r\n                });\r\n            <\/script>\r\n\r\n\t\t\t<input type=\"hidden\" value=\"5000\" name=\"loan_amount\" id=\"loan_amount-single-slider\" \/> <\/label>\n<\/p>\n<p><label> Yearly interest rate (%)<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"rate\"><input class=\"wpcf7-form-control wpcf7-number wpcf7-validates-as-number\" min=\"0\" max=\"100\" aria-invalid=\"false\" value=\"\" type=\"number\" name=\"rate\" \/><\/span> <\/label>\n<\/p>\n<p><label> Months to pay<br \/>\n\r\n\r\n            <div id=\"months\"><\/div>\r\n            <script>\r\n                jQuery(function ($) {\r\n                    $(window).ready(function () {\r\n\t\t\t\t\t\t                        var tooltip = $('<div class=\"slider-tooltip\" \/>').css({\r\n                            position: 'absolute'\r\n                        });\r\n\r\n                        tooltip.text('6');\r\n\r\n                        $(\"#months\").slider({\r\n                            range: \"min\",\r\n                            min: 1,\r\n                            max: 24,\r\n\t\t\t\t\t\t\t                            value: 6,\r\n                            slide: function (event, ui) {\r\n                                $(\"#months-single-slider\").val('' + ui.value);\r\n                                tooltip.text('' + ui.value);\r\n                            },\r\n                            change: function (event, ui) {\r\n                            }\r\n                        }).find(\".ui-slider-handle\").append(tooltip);\r\n\/\/                        $(\"#\/\/\").val(\/\/);\r\n                    });\r\n                });\r\n            <\/script>\r\n\r\n\t\t\t<input type=\"hidden\" value=\"6\" name=\"months\" id=\"months-single-slider\" \/> <\/label>\n<\/p>\n<p><input class=\"wpcf7-form-control wpcf7-calculate_button cf7-calculate_button\" type=\"button\" value=\"Calculate\" \/>\n<\/p>\n<p><label> Monthly payment:<br \/>\n<span class=\"wpcf7-form-control-wrap payment\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-calculation cf7-calculation\" readonly=\"readonly\" aria-invalid=\"false\" value=\"0\" type=\"text\" name=\"payment\" \/><\/span> <\/label>\n<\/p><input type=\"hidden\" name=\"_pvb_ajax_calc_nonce\" value=\"5a80c6b9a0\"><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n<h2>Source code for this form:<\/h2>\n<pre>&lt;label&gt; Loan amount ($)\n&lt;br&gt;\n    [cf7_ui_slider loan_amount id:loan_amount min:0 ui_default:5000 max:10000 step:100] &lt;\/label&gt;\n\n&lt;label&gt; Yearly interest rate (%)\n    [number rate min:0 max:100] &lt;\/label&gt;\n\n&lt;label&gt; Months to pay\n&lt;br&gt;\n    [cf7_ui_slider months id:months min:1 ui_default:6 max:24] &lt;\/label&gt;\n\n[calculate_button calculate_button-1 \"Calculate\"]\n\n&lt;label&gt; Monthly payment:\n    [calculation payment min:0 precision:2 \"loan_amount * (1+rate\/12*0.01)^months*rate\/12*0.01 \/ ((1+rate\/12*0.01)^months - 1)\"] &lt;\/label&gt;\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>This is a simple example with three input parameters and one calculated output. It uses a third-party plugin for the slider interface: Cf7 UI slider. The same result can be achieved with standard number fields. Source code for this form: &lt;label&gt; Loan amount ($) &lt;br&gt; [cf7_ui_slider loan_amount id:loan_amount min:0 ui_default:5000 max:10000 step:100] &lt;\/label&gt; &lt;label&gt; Yearly [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-27","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bossakov.eu\/wpdemo\/wp-json\/wp\/v2\/pages\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bossakov.eu\/wpdemo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bossakov.eu\/wpdemo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bossakov.eu\/wpdemo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bossakov.eu\/wpdemo\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":11,"href":"https:\/\/bossakov.eu\/wpdemo\/wp-json\/wp\/v2\/pages\/27\/revisions"}],"predecessor-version":[{"id":525,"href":"https:\/\/bossakov.eu\/wpdemo\/wp-json\/wp\/v2\/pages\/27\/revisions\/525"}],"up":[{"embeddable":true,"href":"https:\/\/bossakov.eu\/wpdemo\/wp-json\/wp\/v2\/pages\/2"}],"wp:attachment":[{"href":"https:\/\/bossakov.eu\/wpdemo\/wp-json\/wp\/v2\/media?parent=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}