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.
- 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.