Webflow sync, pageviews & more.
NEW

What is the simplest method to store user inputs, perform calculations, and generate a personalized quote for a residential solar company on a Webflow site? I've heard about using custom JS, but I'm not sure where to host such functions and data. I've also read about using Google Sheets and Zapier. Any suggestions?

TL;DR

To collect user inputs, calculate a quote, and display results on a Webflow site, you can use Webflow Forms, JavaScript, and Google Sheets with Zapier. Below is a simple, non-database approach to achieving this.

1. Collect User Inputs with a Webflow Form

  • Create a Webflow form with relevant fields (e.g., home size, sunlight exposure, energy usage).
  • Ensure each input field has a unique ID or Name for easy access in JavaScript.

2. Use JavaScript for Immediate On-Page Calculations (Optional)

  • If your calculation is straightforward, add JavaScript to Webflow’s Custom Code section (inside <script> tags in the page before </body>).
  • Use document.getElementById("fieldID").value to retrieve data and run basic calculations.
  • Display results dynamically in a hidden Webflow div that becomes visible after submission.

3. Store and Process Data via Google Sheets + Zapier (For Advanced Automation)

  • Google Sheets can store submission data without needing a database.
  • Use Zapier to connect Webflow’s form submission to a Google Sheet.
  • Set up calculations in Google Sheets to generate a quote.
  • Use Zapier’s Email Action or Webflow CMS updates to send/store the final quote.

4. Display Personalized Quote

  • Option 1: Instant On-Page Display
  • Use JavaScript calculations directly and update a result <div> inside Webflow.
  • Option 2: Email or CMS Entry
  • Let Zapier send an email with a calculated quote.
  • Use Webflow CMS via Zapier to store results and display them dynamically.

Summary

For a quick solution, use JavaScript on the Webflow site to collect inputs and display an instant result. If you need to store data and automate the process, use Webflow Forms + Zapier to Google Sheets. This method avoids external server hosting while keeping calculations manageable.

Rate this answer

Other Webflow Questions