Case Study
UFH Instant Quote Tool
A modern, high-converting Underfloor Heating (UFH) Instant Quote Tool built as a custom, real-time WordPress plugin.
Project Brief
The objective was to design and build a modern, high-converting Underfloor Heating (UFH) Instant Quote Tool as a custom WordPress plugin for a home improvement platform.
We wanted to give the client an adaptable, real-time quoting tool where preset values (floor area, system type, insulation options, room counts) and UI themes can be managed globally in the admin, and easily dropped onto any page via Gutenberg blocks or shortcodes.
The Challenge
Most heating calculators are dry, slow, and overly complex for homeowners to fill out. The technical challenge was building a lightning-fast, real-time calculation engine that updates costs instantly as users adjust property dimensions and system options.
At the same time, we needed to give non-technical site editors total admin control over default rates, cost-per-square-metre thresholds, equipment add-ons, and visual styling without touching code or slowing down page speed.
Functionality
Customizable Quote Presets
Full admin flexibility to set baseline rates (cost per m², manifold base prices, insulation costs) and default slider values inside the plugin settings panel.
Interactive Quote Controls
Dual-control synchronized sliders and numeric inputs for Floor Area (m²), Room Count, System Type (Hydronic vs. Electric), and Subfloor Construction.
System & Fuel Selection
Instant client-side switching between Hydronic and Electric UFH systems, with dynamic price adjustments for heat source pairings (Heat Pump vs. Boiler).
Real-time UFH Cost Metrics
Instant calculation updates showing estimated material costs, installation estimates, required manifold size, and total package price on every keypress or slider movement.
Dynamic Breakdown & Summary
A visual cost summary gauge rendering material vs. labor estimates in real time, complete with custom CTA lead capture forms to request formal quotes.
A closer look
Step 1: Property Details
The first step in the quote process. Users enter property dimensions, room counts, and subfloor construction type to generate a real-time cost estimate for the selected UFH system.
Step 2: System Details
The second step in the quote process. Users select the UFH system type (Hydronic vs. Electric) and heat source (Heat Pump vs. Boiler) to dynamically update the total cost estimate.
Step 3: Controls & Options
The third step in the quote process. Users can add optional components such as thermostats, insulation boards, and manifold upgrades to see how these affect the total price.
Step 4: Your Details
The final step in the quote process. Users enter their contact information to receive a detailed quote via email, along with a summary of their selected options and estimated costs.
Step 5: Bill of Materials
A detailed breakdown of all materials and components included in the quote, including quantities, unit prices, and total costs for each item.
Admin Panel Tab 1: Rates & Thresholds Configuration
The core pricing engine tab. Sets base material costs per m², labor rates, default slider values, and volume bulk discounts alongside subfloor screed preparation fees.
Admin Panel Tab 2: System & Equipment Multipliers
System mechanics configuration panel. Manages relative cost multipliers for Hydronic vs. Electric systems, heat pump manifold surcharges, base hardware fees, and thermostat unit costs.
Admin Panel Tab 3: Product Library & Inventory Items
The catalog management interface. Allows site admins to add, edit, or toggle UFH component products (pipes, manifolds, thermostats, insulation boards) mapped to quote output estimates.
Admin Panel Tab 4: Design & Theme Customizer
Visual customization panel. Controls real-time CSS design tokens including primary accent colors, panel background shades, corner radiuses, font pairings, and measurement units (m² vs sq ft).
Admin Panel Tab 5: CMS & Gutenberg Integration
Shortcode and block deployment control. Displays usage guides for shortcode overrides, configures lead notification routing emails, and sets custom legal quote disclaimers.
Architecture
We built the plugin as a lightweight, zero-dependency WordPress tool designed for maximum frontend speed. The calculation logic runs in an isolated Vanilla JS IIFE, guaranteeing real-time DOM updates without page reloads or AJAX latency.
The PHP backend manages plugin settings and Gutenberg block registration, injecting localized configuration objects directly into the page. We used native CSS custom properties for styling, making theme customization and live previewing inside the WordPress admin completely effortless.
Skills Used
Conobe delivered an amazing quote tool in just one week. The instant cost breakdown and clean UI completely transformed our user engagement. Having total control over the pricing rates and styles inside the WordPress admin means our team can easily test new landing pages using Gutenberg blocks or shortcodes without any dev help.
Have a similar project in mind?
Get in touch for a free, no-obligation quote.
Start a Project