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