import { Image } from ‘astro:assets’; import toolImg from ’../../assets/work/enelx/tool.png’; import debugImg from ’../../assets/work/enelx/results-debug.png’;
The Challenge
Enel X wanted to develop a savings calculator as a lead generation tool. The form needed to map postal codes to Demand Response programs available in those locations across the US and Canada, displaying the $/kW-year in potential earnings.
Users would select their industry to auto-populate average curtailable kW amounts, with the option to input custom values if they had their own estimates.
Building a Smarter Form
Good forms help users recognize, diagnose, and recover from errors. A significant amount of development time went into creating real-time validation for the postal code field and other inputs using a combination of HTML5 validation and custom JavaScript.
We wanted this form to be engaging, so considerable effort was spent on the look and feel of the slider inputs and overall interaction design.
Debugging at Scale
With over 400,000 postal code values to validate against, debugging was a critical consideration. I designed and built a debug mode that displays dynamic data in real-time, making quality assurance significantly more efficient.
Technical Implementation
The form is hosted on a separate server and embedded via iframe. To make the iframe fully responsive, I implemented the postMessage API to communicate height information from the embedded form to the parent site.
This approach allows the calculator to seamlessly integrate with any page while maintaining responsive behavior across all device sizes.