How do I add a loan calculator to my site?

Hi, please take a look at this page: http://www.telefinans.no

How would you solve the "dynamic form"? Its a loan calculator, and its the only thing that keeps the client away from using Squarespace.

Any tips on good "form-builder tools"?

Regards, Tor Martin

It's technically possible, but the "+ Legg til fler/+Add More/" part of the dynamic form you linked isn't very easy to replicate.

First the good news: dynamically changing input or hidden field values based on sliders, radio buttons, and so on is relatively easy with some JavaScript injection code to manipulate the DOM, the tricky part is dynamically adding new fields.

When you create a form block, Squarespace registers its parameters with the backend, and will only recognize the set amount of input fields you used to build it on submit. You can use JavaScript to dynamically add fields to the form in the DOM, but Squarespace won't recognize them, and will submit the form without passing their values.

HOWEVER, you should be able to create a hidden form field in the Squarespace form builder, use JavaScript to dynamically add/remove input fields, then set the newly created fields to concat their values and dynamically change the hidden field. It's not super elegant, and requires a good amount of custom JavaScript code, but it should be technically possible. Unfortunately, there is no out-of-the-box form builder solution that will work with Squarespace forms, so making this work will require you getting your hands dirty with JavaScript.

Hope that helps.

Thanks for your answer Ghostcat, I appreciate you taking time to shed some light on this issue.

Thanks!

A little late to the party but such a loan calculator can be easily implemented with http://www.convertcalculator.co. It's an embeddable marketing calculator tool that can be inserted on your own website. No coding skills required. I have set it up in 5 minutes on my own website.

I recently collected a calculator for this service https://ucalc.pro/en Also a loan calculator for the site.

Using Calconic (https://www.calconic.com) you can easily add a loan calculator to your website. It is super easy to use and requires absolutely no prior programming experience. As well, it has a bunch of ready-to-use templates for mortgage and loan calculators.

Not to mention that the calculator can be easily embedded to your Squarespace website. By following the link you can find more information about it - https://www.calconic.com/knowledge/adding-custom-calculator-widget-to-squarespace-website.

There are a lot of good form builder tools across internet. However, for loan calculator I would recommend Calconic. It has a bunch of pre-made templates for mortgage and loan calculators.

Calconic does NOT integrate with Squarespace. You can embed the calculator you spent time building but it cannot work with your payment system. They will mislead you as they did to me. Waste of time unless you use Shopify only. 

(They have claimed in a direct response to me that it would work with squarespace...it does not work with squarespace.)

Well I do not know. I recommend https://stepform.io/ - easy to use, you can easily build a credit calculator.

Here by the way is a ready made instruction on how to integrate https://stepform.io/docs/squarespace

To create calculators or form calculators on various topics, you will need widgets "Form," "Fields," and others to customize the appearance of the form, as well as basic knowledge about variables in JavaScript. The basis for any calculator is the widget "Form" and "Fields" in this form. In the settings of each field, you can specify a variable, the value of the variable, and in the special "Calculator" field, the calculation formula. They set up a calculator for me on the website in the office of Mortgage Advisor Lincoln. Because I always calculated all my transactions with a specialist in the office. And so that I could do it myself, I installed the same calculator.

On 4/9/2015 at 12:26 PM, clayyount said:

It's technically possible, but the "+ Legg til fler/+Add More/" part of the dynamic form you linked isn't very easy to replicate.

First the good news: dynamically changing input or hidden field values based on sliders, radio buttons, and so on is relatively easy with some JavaScript injection code to manipulate the DOM, the tricky part is dynamically adding new fields.

When you create a form block, Squarespace registers its parameters with the backend, and will only recognize the set amount of input fields you used to build it on submit. You can use JavaScript to dynamically add fields to the form in the DOM, but Squarespace won't recognize them, and will submit the form without passing their values.

HOWEVER, you should be able to create a hidden form field in the Squarespace form builder, use JavaScript to dynamically add/remove input fields, then set the newly created fields to concat their values and dynamically change the hidden field. It's not super elegant, and requires a good amount of custom JavaScript code, but it should be technically possible. Unfortunately, there is no out-of-the-box form builder solution that will work with Squarespace forms, so making this work will require you getting your hands dirty with JavaScript.

Hope that helps.

Hi, you say here that 'dynamically changing input or hidden field values ... is relatively easy with some JavaScript injection code to manipulate the DOM'. 

I have a form that when filled out by the user is submitted and an email is sent to me. I have added in the same page some code to add other fields and make some calculations, but these fields are not included in the email when the form is submitted. I created hidden fields in the Squarespace form to set there with the values of the fields I added with my code, but I do not know how to set the values in the hidden fields. I found out that those fields are associated with variables like SQF_FIELD_NAME, I tried to set these variables in my javascript, but it did not work.