2 Problems Fixed in Under 2 Hours
Better blog engagement + working lead capture
What You'll Learn
This is a real development session from today. Two separate issues, one AI-assisted coding session, and a few lessons about content strategy and serverless functions along the way.
Part 1: The Blog That Nobody Wanted to Read
We had just published a detailed case study about building a smart availability picker. The content was solid—real bugs, real solutions, real code. But something was wrong.
"The Problem: Forms That Don't Capture Reality"
Starts with the problem. Reader doesn't know why they should care yet.
"2 Hours of AI Coding → Smart Booking Form"
Leads with outcome. Reader immediately sees the value.
The Problem: Starting with the Problem
The original blog opened with "The Problem: Forms That Don't Capture Reality." Sounds reasonable, right? Wrong. Readers don't care about your problem yet. They need to know why they should invest their time reading.
The Hook Principle
The Fix: Outcome-First Structure
We restructured the opening to lead with results:
The new structure gives readers immediate context: who the client was, what was built, how long it took, and what they'll learn. Now they have a reason to keep reading.
Identify the outcome
What did you actually achieve? Lead with that.
Add context cards
Client, problem, time, result—at a glance.
List what they'll learn
Give readers a roadmap of value.
Add a CTA
Link to the live result if possible.
The Cherry on Top: See It Live
We added a prominent call-to-action linking to the actual live form. Readers can try the availability picker themselves at the client's site. This builds credibility and lets the work speak for itself.
If you built something real, let people see it. A link to live work is worth a thousand screenshots.
Part 2: The Contact Form That Wasn't Contacting Anyone
While reviewing the site, we discovered the contact form was broken. Submissions were failing silently. Potential leads were hitting a wall.
The Root Cause
The Netlify Function was trying to submit to Netlify Forms by POSTing to "/" from within the serverless function. This doesn't work—Netlify Forms expects submissions from the browser, not from server-side code.
Netlify Forms Gotcha
The Solution: Submit Directly from Browser
The fix was simple: instead of routing through a Netlify Function, submit directly to Netlify Forms from the browser. Netlify Forms are free for 100 submissions/month and just work—no extra services needed.
Implementation Details
The fix was straightforward: change the form to POST directly to "/" with the form data URL-encoded and a "form-name" field matching the hidden form in the HTML. Netlify handles the rest—submissions appear in the dashboard and you can set up email notifications there.
Before
- Form silently fails
- No lead capture
- Routed through Netlify Function
- Lost potential clients
After
- Submissions in Netlify dashboard
- Email notifications available
- Direct browser submission
- Never miss a lead
Key Takeaways
Blog Optimization
- Lead with outcomes, not problems
- Use context cards for quick scanning
- Link to live work when possible
Contact Forms
- Test forms regularly—they break silently
- Use dedicated email APIs for reliability
- Log submissions for debugging
The Bigger Picture
Both fixes took under 2 hours combined. The blog optimization was about understanding reader psychology—people want to know what's in it for them before investing time. The form fix was about understanding platform limitations and choosing the right tool for the job.
AI-assisted development made both faster. Not because AI wrote perfect code, but because it helped iterate quickly, debug efficiently, and implement solutions without context-switching to documentation.
The best development sessions solve real problems in real-time. Document them, and you've got content that actually helps people.
Building JJM: The Blog
Share This Article
Spread the knowledge