Calculate and return values based on user input from Webflow form

Design help Custom code
1

So I’m building a Webflow site for a client. A residential Solar company.

They need the ability to give dynamic quotes based on user inputs.

First, the user enters their monthly electricity usage.

After that, the user goes through a short process of “Building Their System” where they select the components (Panel, Inverter, Battery).

I need a method for taking this information and reflect it in the quote.

Does anyone know what would be the simplest way to achieve this? Storing user inputs, performing a calculation, and returning a personalized quote, all in one session.

I honestly don’t know where to start and was wondering if someone could point me in the right direction.

I have read on the forum that you can use custom JS but I have no idea where you ‘host’ such functions and data.

I have also read of using Google Sheets and Zapier.

Any help is appreciated, and I have no problem compensating you for your time if it gets to be a lot.

Mitchell

2

https://solar-d5915e.webflow.io/build-your-system

Here is the site currently:

User is to begin on the landing page, enter usage, build their system, and receive quote.

3

Why not link to each select a price value and then with js or jquery sum those up and display the result ?

1 Like
4

If you can find a 3rd party system that you can integrate then that would be the easiest solution for sure. But failing that, you could make a regular Webflow form that captures the information you need. From here, you will need custom code to do the rest.

You will need to write a script that:

  1. Overrides the default Webflow form behavior
  2. On submit, calculates the quote based off the form inputs
  3. Displays the quote to the user

In this case you would probably put your script in the body code section of the page in question. If you are comfortable with JS / Jquery then this isn’t too hard to do with Webflow. If not, then you will need to find a developer who can help you.

1 Like
5

Would I be able to define functions and perform calculations all within the custom code? How can I save Webflow form input?

6

Sure, if you know how to write js / jquery you can write all sorts of functions with calculations inside.
And to “get” the value of a form input you could use .val() for instance and store it in a var or in a const (jQuery val() Method)

It all depends on the complexity of your calculation… if you need inspiration, here’s a simple example : jQuery calculate sum of values in all text fields - Stack Overflow

7

https://solar-d5915e.webflow.io/

Each input is a separate webflow form.

Would something like this work?

<script>
 function saveData() {
  document.cookie="panel="+document.getElementById('panel').value+"; expires=Thu, 18 Dec 2019 12:00:00 UTC";
  document.cookie="email="+document.getElementById('email').value+"; expires=Thu, 18 Dec 2019 12:00:00 UTC";

 alert('Data Saved');
}
 alert('SAVED DATA: '+document.cookie);
</script>

Would I simply set an element id for the form element and reference it in the saveData function like that?

8

use the element ID of the input field?

9

You don’t necessarily need to store the value in cookies since everything is happening on the same page (and the cookies are only available to the user’s browser — you don’t access it). Why not just store those values as variables. Like so :

var panelValue = $('#panel').val();
var inverterValue = $('#inverter').val();
var clientEmail = $('#email').val();

The function could handle the calculation rather than the storing of the data.
function myCalculus () would “return” the result of the calculus and you could trigger it when it seems apropriate (in your case this could be when the user clicks “finish quote”).

The important thing to keep in mind is just to declare the variables “at the right time and place”. Meaning when the user has finished changing his parameters and somewhere in the code that makes it available for use. (Variables declared in a function are available in this function, those outside of it are global).

I hope this helps

11

update:

<script>
// when the DOM is ready
$(document).ready(function() {


let usageInput;
let panelSelected;
let inverterSelected;
let batteryIncluded;
let upgradeSelected;
//


	$('#usageForm').submit(function(e){

		usageInput = $('#usage-input-field').val();
		console.log(usageInput);

	});  

	$('#panelForm').submit(function(e){

		panelSelected = $('#panel-select-field').val();
		console.log(panelSelected);

	});  

	$('#inverterForm').submit(function(e){

		inverterSelected = $('#inverter-select-field').val();
		console.log(inverterSelected);

	});  

	$('#batteryForm').submit(function(e){

		batteryIncluded = $('#battery-checkbox').val();
		console.log(batteryIncluded);

	});  

	$('#upgradeForm').submit(function(e){

		upgradeSelected = $('#upgrade-select-field').val();
		console.log(upgradeSelected);


	}); 

});
</script>
12

@pepperclip thanks so much for your help thus far.

I was able to store the values on submit using the above code! Working on the ‘finish quote’ function which will perform the calculation. My question is how can I send the final calculated value back to the site to be displayed to the user? Right now I am simply consoled logging the outputs.

13

You can write at the end of your function return calculusValue
and then just write it where you want using $('#ID-OF-DISPLAY-ELEMENT').text(calculusValue);
which will replace the content of the div you id with the result value.
(jQuery text() Method)

1 Like
14

Looks this this is in the same ‘area’ as my problem.
I like to show the sum of a specific variable of all my collection items.

(coindidentially) Also for a solar company - i’d like to add up all the generated power of all added projects - which all have xxx kWh added.

Extra problem, this is more than 100 (the max of items shown) so i probably also need to add 2 (or more) of these scripts and add-up all sums together, unless there’s a way to calc a sum of approx 400 CMS items at once.

Can someone help me, since i’m really the no-code-man and this JS and Jquery and what not is just too complicated for me.