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
  • Use Webflow forms to collect input, then send data to Google Sheets via Zapier or Make for backend calculations and email results.
  • For real-time quotes, embed custom JavaScript on Webflow to process inputs instantly and optionally store data using Airtable or Firebase.

To store user inputs, perform calculations, and generate a personalized quote on a Webflow site, you need a lightweight backend or automation workflow — Webflow alone doesn’t support backend processing. The simplest no-code or low-code options are either Google Sheets with Zapier/Integromat (Make) or a JavaScript-based solution using Webflow + hosted JS + Airtable.

Here’s a breakdown of the best method based on simplicity and functionality.


1. Use Google Sheets + Zapier (or Make)

  • Google Sheets acts as your backend to store input and perform calculations.
  • Webflow Forms capture user inputs (e.g., roof size, location, average bill).
  • Zapier or Make connects Webflow to Google Sheets:
  • On form submission, send data to a specific Google Sheet.
  • Set up formulas in the sheet to calculate system size, estimated savings, quote price, etc.
  • Use another Zap/Scenario to email the result or show a result dynamically.

Pros:

  • No code required.
  • Easy to set up basic math and logic in Google Sheets.
  • Integrates cleanly with email responders.

Cons:

  • Data is not instantly shown on the page without additional setup (e.g., webhook + JS).
  • Limited to the simplicity and delay of Zapier platform.

2. Use Webflow + Custom JavaScript + Hosting on GitHub or Firebase

If you want quotes shown instantly on the Webflow page, embed a JavaScript calculator.

  • Webflow captures user inputs via a form (don’t use native form submission).
  • Custom JavaScript listens to input changes and calculates the quote on the fly.
  • Host your JavaScript on:
  • GitHub Pages for free static file hosting, or
  • Firebase Hosting for more control over functions, if needed.
  • Optionally, use Airtable or Google Sheets API to store submission data.

Pros:

  • Instant feedback for users (interactive quote).
  • Complete control over logic and styling.
  • Can still store data externally if needed.

Cons:

  • Requires JavaScript knowledge.
  • Possible CORS issues if connecting directly to external APIs like Google Sheets.

3. Hybrid: Webflow + Tally or Typeform + Google Sheets

  • Build a branded form/quiz in Tally or Typeform.
  • Embed the form on your Webflow site.
  • Set up automatic calculation and data storage using Google Sheets and Zapier.
  • Deliver result via on-screen message or email.

Pros:

  • Fast to build with logic rules.
  • Automatic integrations with Google Sheets, Notion, Mailchimp, etc.

Cons:

  • Form styling flexibility is limited.
  • Branding may be slightly off unless embedded well.

Summary

For the simplest all-around method without code:
Use Webflow forms + Google Sheets + Zapier (or Make) for data storage and backend calculations. If you prefer real-time quotes, embed custom JavaScript calculations directly on your Webflow page and optionally store inputs using Airtable or Firebase. This approach offers a balance between simplicity, flexibility, and scalability.

Rate this answer

Other Webflow Questions