Smith Roofing LLC
3402 Industrial Way, Colorado Springs, CO 80906
jane@smithroofing.example
Pikes Peak Web Designs
Colorado Springs, Colorado
hello@pikespeakwebdesigns.com
1. Project
Custom roof-replacement-cost calculator, embedded on the existing site. An interactive widget that takes square footage, pitch, material selection, and a flat-versus-low-slope qualifier, returns a live price range with a clear “ballpark only” disclaimer, and routes a structured lead to the existing contact form when the visitor requests a real quote.
2. Scope of work
- Calculator logic. Pricing tiers for asphalt three-tab, architectural, metal, and TPO. Pitch multiplier, tear-off versus overlay handling, and a regional cost-floor variable maintained by you.
- Front-end UI. Custom-coded vanilla JavaScript and CSS, no third-party libraries. Mobile-first layout, accessible to WCAG 2.2 AA, keyboard navigable. Brand-matched typography and color palette pulled from the existing site.
- Lead capture. When the visitor clicks “Get a real quote,” the entered values pass through to the existing Web3Forms-backed contact form as hidden fields, so the inbound email contains the calculator inputs alongside the contact details.
- Embed and integration. Embedded on a new
/estimate-tool/page, with a homepage hero CTA and an “Estimate your roof” entry point in the primary nav. - Quality assurance. Cross-browser tested on Chrome, Safari, Firefox, and Edge. Mobile tested at 360, 414, 768, and 1024 px. Lighthouse run before handoff with Performance, Accessibility, Best Practices, and SEO scores documented.
- Documentation. A short owner’s note delivered with the work, covering how to update the pricing tiers and the regional cost floor without touching code.
3. Out of scope
- Third-party CRM integration (HubSpot, Salesforce, JobNimbus, etc.). Quoted separately if needed.
- Live shingle imagery or product picker beyond a text-and-color selector.
- Connection to a real-time materials-pricing API. Pricing tiers are owner-maintained.
- A/B testing infrastructure or analytics dashboards beyond the existing Umami setup.
4. Hours and total
| Line item | Hours | Rate | Subtotal |
|---|---|---|---|
| Calculator logic and pricing model | 3.0 | $100 | $300 |
| Front-end UI build (custom code, accessible) | 4.5 | $100 | $450 |
| Lead-capture wiring into existing contact form | 1.5 | $100 | $150 |
| Embed page, nav entry, homepage CTA | 1.5 | $100 | $150 |
| Cross-browser and mobile QA, Lighthouse pass | 1.0 | $100 | $100 |
| Owner documentation, handoff | 0.5 | $100 | $50 |
| Total estimated hours | 12.0 | ||
| Total | $1,200 USD | ||
5. Timeline
- Day 1 · Kickoff. Pricing tiers and regional cost floor confirmed by email. No call required.
- Days 2–5 · Build. Calculator logic and UI built, embedded on a private preview URL.
- Days 6–7 · Review. One round of revisions, structured against the preview URL.
- Day 8 · Launch. Embed pushed live, owner documentation delivered, final invoice reconciled.
6. Payment terms
- Total payable on approval of this estimate, in advance, via Stripe checkout (card or ACH).
- If the work comes in under the estimate, the unused balance is refunded against the original payment.
- If the work would exceed the estimate, you receive a written notice with a revised number before any overage hours are run. You can approve the revision, reduce scope to fit the original, or stop the work entirely.
- Hourly rate is locked at $100 USD per hour for the duration of this engagement.
7. Approval
Reply to this email with “Approved” and the Stripe checkout link will follow. The build kicks off the first business day after payment clears.
— Jon Ajinga, Pikes Peak Web Designs
hello@pikespeakwebdesigns.com · (928) 315-9094