Forem: Michael Butts

Building an Interactive Software Recommendation Quiz with Pure HTML/CSS/JS

Michael Butts — Thu, 12 Mar 2026 05:11:42 +0000

I needed a way to help contractors figure out which business software to use. Instead of building a React app, I built an interactive 5-step quiz with vanilla HTML, CSS, and JavaScript.

Try the live demo here

Here's how it works and how you can build your own recommendation engine.

The Concept

A multi-step quiz that:

Asks 5 questions (trade, team size, budget, priorities, experience)
Scores 7 software options against the answers
Shows top 3 recommendations with match scores
Has email capture and social sharing built in

All in a single HTML file. No build step. No dependencies.

The Architecture

1. Question Cards with Show/Hide

Each question is a div with a data-q attribute. Only one is visible at a time:

<div class="question-card active" data-q="1">
  <h2>What type of work do you do?</h2>
  <div class="options">
    <div class="option" data-value="hvac" onclick="selectOption(this)">
      <span class="option-icon">snowflake emoji</span>
      <div class="option-text">
        <strong>HVAC</strong>
        <span>Heating, cooling, ventilation</span>
      </div>
    </div>
  </div>
</div>

CSS handles the visibility:

.question-card { display: none; }
.question-card.active { display: block; }

2. Selection Logic

Store answers in a simple object:

const answers = {};

function selectOption(el) {
  const card = el.closest('.question-card');
  const q = card.dataset.q;
  card.querySelectorAll('.option').forEach(o => 
    o.classList.remove('selected'));
  el.classList.add('selected');
  answers[q] = el.dataset.value;
  document.getElementById('nextBtn' + q).disabled = false;
}

3. The Scoring Engine

This is the interesting part. Each software product has arrays of compatible values for each dimension:

const software = {
  jobber: {
    name: 'Jobber',
    trades: ['hvac', 'plumbing', 'electrical'],
    sizes: ['solo', 'small', 'medium'],
    budgets: ['moderate', 'growth'],
    priorities: ['scheduling', 'invoicing'],
    experience: ['none', 'basic'],
    score: 8.5,
    pricing: 'From $49/month'
  }
};

function scoreMatch(sw) {
  let score = 0;
  if (sw.trades.includes(answers['1'])) score += 3;
  if (sw.sizes.includes(answers['2'])) score += 3;
  if (sw.budgets.includes(answers['3'])) score += 3;
  if (sw.priorities.includes(answers['4'])) score += 2;
  if (sw.experience.includes(answers['5'])) score += 1;
  return score; // max 12
}

The weighting is deliberate: trade, size, and budget are deal-breakers (3 points each). Priority matters (2 points). Experience level is a nice-to-have (1 point).

4. Dynamic Results

Sort by score, take top 3, render with template literals:

const scored = Object.entries(software)
  .map(([key, sw]) => ({ key, ...sw, matchScore: scoreMatch(sw) }))
  .sort((a, b) => b.matchScore - a.matchScore)
  .slice(0, 3);

container.innerHTML = scored.map((rec, i) => `
  <div class="recommendation ${i === 0 ? 'top-pick' : ''}">
    <div class="rec-badge">
      ${i === 0 ? 'BEST MATCH' : 'Runner Up'}
    </div>
    <h3>${rec.name}</h3>
    <p>Match: ${rec.matchScore}/12</p>
  </div>
`).join('');

5. Smooth Progress Bar

.progress-fill {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  height: 100%;
  border-radius: 50px;
  transition: width 0.4s ease;
}

Update width on each step transition for that satisfying fill effect.

Why No Framework?

For a tool like this:

0 KB of JavaScript dependencies
Instant load time (important for SEO and user experience)
Works everywhere (no polyfills needed)
Easy to embed (paste HTML into any site)

The tradeoff is managing state manually. But with 5 questions and 7 products, that complexity is trivial.

The Business Side

This quiz pattern works for any recommendation engine:

Lead generation via email capture in results
Affiliate revenue from recommendation links
SEO with FAQ schema for rich snippets
Viral sharing with social buttons

One tool, four growth channels.

Try It

Live demo: Contractor Software Quiz

The pattern is reusable. Swap out the software database for your niche (hosting providers, project management tools, CRMs) and you have a recommendation engine.

All the other free tools are at toolkit.buildoutreach.io/tools

What approach do you prefer for interactive content — framework or vanilla? Let me know in the comments.

I Built a Complete Affiliate SEO Site in 2 Weeks Using Only AI — Here's the Full Stack

Michael Butts — Thu, 12 Mar 2026 05:02:52 +0000

I wanted to test a hypothesis: Can a solo operator build a legitimate, content-rich affiliate site in under 2 weeks using AI tools?

Spoiler: Yes. I built toolkit.buildoutreach.io — a contractor software review site with 26 in-depth review and comparison pages, 6 free tools, 19 blog articles, and full SEO infrastructure. Here's exactly how I did it, what worked, and what I'd do differently.

The Stack

Hosting: Vercel (free tier)
Domain: Cloudflare DNS
Content: Static HTML (no framework, no CMS)
SEO: Google Search Console, IndexNow API, FAQ Schema
Email: Resend + Stripe (lead capture → automated drip)
Analytics: Vercel Analytics
Payments: Stripe Payment Links
AI: Claude for content generation, research, and code

Why Static HTML?

I know, I know. It's 2026. Everyone's using Next.js or Astro.

But here's the thing: static HTML loads instantly, costs nothing to host, and Google loves it. My pages hit 95+ Lighthouse scores without any optimization work. No hydration, no bundle splitting, no build step.

For an affiliate content site, the content IS the product. I don't need client-side routing or server components. I need fast pages with good content.

The Content Architecture

Here's what I built in 14 days:

Affiliate Review Pages (26 pages)

Individual reviews: Jobber, Housecall Pro, ServiceTitan, Workiz, FieldPulse, Kickserv, Joist, Buildertrend
Head-to-head comparisons: Jobber vs Housecall Pro, Jobber vs ServiceTitan, Jobber vs FieldPulse, Housecall Pro vs Workiz
Category roundups: Best Field Service Software, Best CRM for Contractors, Best Scheduling Software, Best Invoicing Software, Best Estimating Software, Best Free Contractor Apps
Trade-specific guides: Best HVAC Software, Best Plumbing Software, Best Electrical Contractor Software

Every review follows the same structure:

Quick verdict + score
Pricing breakdown
Feature deep-dive
Pros/cons
Who it's best for
FAQ schema (for rich snippets)
Comparison table
Cross-links to related reviews

Free Tools (6 tools)

Follow-up message generator
Estimate calculator
Resume bullet generator
Marketing scorecard quiz
47-point marketing checklist
Google review link generator

The tools serve two purposes: they provide genuine value (people actually use them) and they create organic backlinks when people share them.

Blog Content (19 articles)

10 trade-specific marketing guides (HVAC, plumber, electrician, roofing, landscaping, painting, pest control, carpet cleaning, tree service, pressure washing)
AI prompt guides for different niches
Comparison articles

SEO Infrastructure

Content without distribution is just a hobby. Here's what I set up:

Google Search Console

Verified via HTML file upload. Submitted sitemap.xml with all 50 URLs.

IndexNow

Used the IndexNow API to ping Bing and Yandex immediately after deploying new pages:

// Simple IndexNow submission
const response = await fetch("https://api.indexnow.org/IndexNow", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    host: "toolkit.buildoutreach.io",
    key: "your-key-here",
    keyLocation: "https://toolkit.buildoutreach.io/your-key.txt",
    urlList: urls
  })
});

Internal Cross-Linking

This is the most underrated SEO tactic. I built 270+ internal links across all pages. Every review links to:

The relevant comparison pages
The category roundup it appears in
The trade-specific guide where applicable
Related blog articles

This creates a dense link graph that helps Google understand the site's topical authority.

FAQ Schema

Every review page includes structured FAQ data:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "How much does Jobber cost?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Jobber starts at $49/month..."
      }
    }
  ]
}
</script>

This can trigger rich snippets in Google search results, dramatically increasing click-through rates.

Email Capture + Automated Drip

Every page has an email capture form that:

Creates a Stripe customer (for later monetization)
Sends a niche-matched welcome email via Resend
Enrolls them in a 5-day automated email course

The welcome email delivers immediate value (a marketing cheat sheet) so subscribers feel good about signing up.

What I Learned

1. Content is the easy part

With AI, I can generate a high-quality 2,000-word review page in about 20 minutes. The hard part is distribution.

2. Internal linking > external backlinks (early on)

When you have zero domain authority, internal links are the only signals you control. Build them aggressively.

3. Static HTML is underrated for SEO sites

Zero build step, instant deploys, perfect Lighthouse scores. The tradeoff (no dynamic features) doesn't matter for content sites.

4. Trade-specific content > generic content

"Best HVAC Software" converts better than "Best Field Service Software" because the searcher is more specific about what they need.

5. Free tools are the best backlink generators

People share useful tools. Nobody shares review articles.

Results So Far

Honestly? Zero traffic and zero revenue. The site is 2 weeks old. SEO takes 3-6 months to compound.

But the infrastructure is solid:

50 URLs indexed
270+ internal links
Email capture on every page
Automated drip sequences
Affiliate programs approved

I'll update this post in 90 days with real traffic and revenue numbers.

The Full Site

Check it out: toolkit.buildoutreach.io

Everything's live — the reviews, the tools, the blog. If you're building an affiliate site, feel free to steal the structure.

What's your experience with AI-assisted content sites? Has anyone else gone the static HTML route? I'd love to hear what's working for you.

I Compared 15+ Contractor Software Tools — Here's What Actually Works in 2026

Michael Butts — Wed, 11 Mar 2026 21:29:48 +0000

I spent the last two months testing and reviewing field service management software for contractors. Not just reading feature pages — actually digging into pricing, workflows, and user feedback across platforms like Jobber, Housecall Pro, ServiceTitan, Workiz, and more.

Here's the honest breakdown for anyone building in or selling to the contractor/home services space.

The Market Is Bigger Than You'd Think

The field service management (FSM) software market is projected to hit $8.5B by 2028. There are ~3.7 million contracting businesses in the US alone, and most of them are still running on whiteboards, spreadsheets, and sticky notes.

The dominant players right now:

Jobber — ~200K+ users, focused on small-mid service companies
Housecall Pro — similar size, stronger marketing features
ServiceTitan — enterprise play, $9.5B valuation, recently filed for IPO
Workiz — growing fast, built-in VoIP is unique
Kickserv — free tier, older platform

What I Found (The TL;DR)

Tool	Price	Best For	Verdict
Jobber	$69-349/mo	Small-mid service contractors	Best overall for most
Housecall Pro	$79-199/mo	Marketing-focused companies	Great if you want built-in review automation
ServiceTitan	$2,000-5,000+/mo	Enterprise (5+ trucks, $1M+ rev)	Overkill for 90% of contractors
Workiz	$65/mo+	Phone-heavy businesses	Best call tracking in the space
Kickserv	Free/$47/mo	Budget-conscious	Dated but functional
Joist	Free/$20/mo	Solo mobile estimating	Best free mobile app
Buildertrend	$199/mo	Remodelers/GCs	Construction-grade estimating

Key Takeaways for Builders & SaaS People

1. Pricing gaps create opportunity

ServiceTitan charges $2K-5K/month. Jobber charges $69. There's a massive gap between "basic scheduling" and "enterprise everything." Builders targeting the $500K-$2M revenue contractor segment (too big for basic, too small for ServiceTitan) have a real opening.

2. Estimating is the most underserved workflow

Most platforms bolt on estimating as an afterthought. Contractors consistently say "I spend 3-4 hours a week on estimates." A tool that makes estimating fast, accurate, and mobile-first could win this market segment.

3. Vertical SaaS is eating horizontal SaaS here

Contractors don't want Salesforce or HubSpot. They want software that knows what a "change order" is. Every general-purpose tool I tested felt wrong for this audience. The winners are 100% vertical.

4. Distribution is the real moat

The software features are converging — everyone has scheduling, invoicing, CRM. The winners are winning on distribution: Jobber's contractor community, Housecall Pro's review automation loop, ServiceTitan's enterprise sales team.

What I Built (Free + Open Source)

While doing this research, I built a few free tools for contractors:

Estimate Calculator — Build quick estimates with labor, materials, and markup
Follow-Up Message Generator — Generate professional follow-up messages
Marketing Scorecard — 47-point assessment for contractor marketing
Google Review Link Generator — Create shareable review links

Full comparison guides:

The open-source contractor marketing toolkit is on GitHub with templates for follow-ups, estimates, and review requests.

Why This Matters for the Dev Community

If you're building SaaS, the "boring" vertical markets like contractor software are where the money is. Low competition, high willingness to pay, and customers who stay forever once they adopt your workflow.

The hardest part isn't building — it's distribution. Getting in front of a plumber or HVAC tech is completely different from getting in front of a developer. Trade shows, Google Local Services Ads, and contractor Facebook groups are the real acquisition channels.

I've been deep in the contractor software space for the last year. Happy to answer questions about the market, tools, or building for this audience.

How I Built 7 Free Marketing Tools for Contractors (and What I Learned)

Michael Butts — Wed, 11 Mar 2026 21:29:45 +0000

A technical breakdown of building a free tool suite that helps home service businesses get more customers — using Vercel, Stripe, and Resend.

If you run a plumbing, HVAC, roofing, or landscaping business, marketing probably isn't your thing. You're great at your trade, but "getting more customers" feels like a mystery.

I've spent years working with contractors and noticed the same problems over and over: no follow-up system, no review strategy, no way to estimate jobs quickly. So I built a free toolkit to solve these problems — and open-sourced the templates on GitHub.

Here's the technical breakdown and what I learned.

The Problem

Most contractor marketing advice is generic garbage: "post on social media!" or "run Google Ads!"

What contractors actually need are specific scripts, templates, and tools they can use today. Not a 47-page marketing strategy — a text message they can copy-paste to follow up with a lead.

What I Built

1. Follow-Up Message Generator

The tool: Select your trade, scenario (new lead, post-estimate, no-show), and tone → get 3 customized follow-up messages.

Tech stack: Pure client-side JavaScript. No API calls needed. Uses template literals with trade-specific variables. Supports 20 trades × 8 scenarios × 3 tones = 480 unique combinations.

// Simplified version of the message generation logic
function generateMessages(trade, scenario, tone) {
  const templates = messageBank[scenario][tone];
  return templates.map(t => 
    t.replace('{trade}', tradeLabels[trade])
     .replace('{service}', serviceTypes[trade])
  );
}

Email capture: After generating messages, users can save their "message playbook" by entering their email. This triggers a Vercel serverless function that creates a Stripe customer and sends a welcome email via Resend.

2. Estimate Calculator

The tool: Enter project type, square footage, and location → get a price range with material and labor breakdown.

Why it works: Contractors constantly need quick estimates for phone quotes. Rather than building a complex pricing engine, I used regional multipliers and industry-standard cost-per-unit data.

3. Google Review Link Generator

The tool: Enter business name → get a direct link customers can click to leave a Google review.

The viral hook: Every generated review link page includes a small "Powered by ContractorToolkit" watermark. Every contractor who uses it creates a tiny distribution channel.

4. Marketing Scorecard Quiz

The tool: Answer 10 yes/no questions about your marketing → get a score and personalized recommendations.

Why quizzes work: They're inherently shareable ("I scored 4/10 on contractor marketing!") and the results page is a natural place to recommend specific tools and resources.

5. Embeddable Estimate Widget

The tool: Get an iframe embed code → put a working estimate calculator on your own website.

The distribution play: Every embedded widget is a permanent backlink AND a referral source. The contractor's customers see the tool, some visit the source.

6. Resume Bullet Point Generator

Bonus tool for a different niche: I also built tools for job seekers (resume bullets) and content creators (prompt libraries). Same pattern: free tool → email capture → paid toolkit upsell.

The Tech Stack

Frontend: Static HTML/CSS/JS on Vercel (zero framework, fast loads, free hosting)
Email: Resend API with custom domain (buildoutreach.io)
Payments: Stripe Payment Links → webhook → automated PDF delivery
Email automation: Vercel Cron jobs trigger a 5-day email drip sequence
Analytics: Vercel Analytics (built-in)

Why No Framework?

Controversial take: for content-heavy marketing sites, plain HTML outperforms React/Next.js on every metric that matters — load time, SEO, maintainability, and cost. Each page is a self-contained HTML file. No build step. No hydration. No JavaScript framework overhead.

The tools that need interactivity use vanilla JS. Total JavaScript payload across all tools: ~15KB.

The Email Automation System

User enters email on any tool/article
  → Vercel API route (/api/leads)
  → Creates Stripe customer (for future purchases)
  → Sends welcome email via Resend (niche-matched template)
  → Sets metadata: { niche, source, drip_day: 0 }

Vercel Cron (daily)
  → Queries Stripe customers with drip_day < 5
  → Sends next email in 5-day sequence
  → Increments drip_day

Three niche-matched welcome templates (contractor, job seeker, creator) each deliver a genuine "cheat sheet" — not a sales pitch disguised as value. The 5-day drip sequence teaches real marketing concepts with soft CTAs to the paid toolkit.

Open Source Templates

I open-sourced the core templates on GitHub: contractor-marketing-toolkit

Includes:

10 phone follow-up scripts
15 text message templates
5-email nurture sequence
Google review request scripts
Review response templates
Estimate template guide
47-point marketing checklist

These are the raw materials that power the interactive tools. Fork them, customize them, use them however you want.

What I'd Do Differently

Build distribution before product. I built 18 articles, 7 tools, and 3 paid products before having a single visitor. Should have validated demand first with a Reddit post or landing page test.
Start with one tool, not seven. The estimate calculator alone could have been a standalone product. Spreading across 7 tools diluted focus.
Interactive tools > static content for initial traction. Blog articles need SEO time (weeks/months). Tools get shared immediately if they're genuinely useful.
Email capture from day one. I initially launched without email capture and had to retrofit it across 20+ pages. Should have been in the template from the start.

Try It

All tools are free at toolkit.buildoutreach.io

The templates are open source at github.com/Mikebutts20/contractor-marketing-toolkit

If you work with contractors or small businesses, I'd love to hear what tools would be most useful. Drop a comment or open an issue on the repo.

Building tools for trades that don't have them yet. If you liked this, I also wrote about free alternatives to ServiceTitan and Jobber for contractors who can't afford $300/month software.

How I Built 7 Free Marketing Tools for Contractors (and What I Learned)

Michael Butts — Tue, 10 Mar 2026 21:34:06 +0000

A technical breakdown of building a free tool suite that helps home service businesses get more customers — using Vercel, Stripe, and Resend.

If you run a plumbing, HVAC, roofing, or landscaping business, marketing probably isn't your thing. You're great at your trade, but "getting more customers" feels like a mystery.

Here's the technical breakdown and what I learned.

The Problem

Most contractor marketing advice is generic garbage: "post on social media!" or "run Google Ads!"

What contractors actually need are specific scripts, templates, and tools they can use today. Not a 47-page marketing strategy — a text message they can copy-paste to follow up with a lead.

What I Built

1. Follow-Up Message Generator

The tool: Select your trade, scenario (new lead, post-estimate, no-show), and tone → get 3 customized follow-up messages.

Tech stack: Pure client-side JavaScript. No API calls needed. Uses template literals with trade-specific variables. Supports 20 trades × 8 scenarios × 3 tones = 480 unique combinations.

// Simplified version of the message generation logic
function generateMessages(trade, scenario, tone) {
  const templates = messageBank[scenario][tone];
  return templates.map(t => 
    t.replace('{trade}', tradeLabels[trade])
     .replace('{service}', serviceTypes[trade])
  );
}

2. Estimate Calculator

The tool: Enter project type, square footage, and location → get a price range with material and labor breakdown.

Why it works: Contractors constantly need quick estimates for phone quotes. Rather than building a complex pricing engine, I used regional multipliers and industry-standard cost-per-unit data.

3. Google Review Link Generator

The tool: Enter business name → get a direct link customers can click to leave a Google review.

The viral hook: Every generated review link page includes a small "Powered by ContractorToolkit" watermark. Every contractor who uses it creates a tiny distribution channel.

4. Marketing Scorecard Quiz

The tool: Answer 10 yes/no questions about your marketing → get a score and personalized recommendations.

Why quizzes work: They're inherently shareable ("I scored 4/10 on contractor marketing!") and the results page is a natural place to recommend specific tools and resources.

5. Embeddable Estimate Widget

The tool: Get an iframe embed code → put a working estimate calculator on your own website.

The distribution play: Every embedded widget is a permanent backlink AND a referral source. The contractor's customers see the tool, some visit the source.

The Tech Stack

Frontend: Static HTML/CSS/JS on Vercel (zero framework, fast loads, free hosting)
Email: Resend API with custom domain (buildoutreach.io)
Payments: Stripe Payment Links → webhook → automated PDF delivery
Email automation: Vercel Cron jobs trigger a 5-day email drip sequence
Analytics: Vercel Analytics (built-in)

Why No Framework?

The tools that need interactivity use vanilla JS. Total JavaScript payload across all tools: ~15KB.

Open Source Templates

I open-sourced the core templates on GitHub: contractor-marketing-toolkit

Includes:

10 phone follow-up scripts
15 text message templates
5-email nurture sequence
Google review request scripts
Review response templates
Estimate template guide
47-point marketing checklist

These are the raw materials that power the interactive tools. Fork them, customize them, use them however you want.

What I'd Do Differently

Build distribution before product. I built 18 articles, 7 tools, and 3 paid products before having a single visitor. Should have validated demand first.
Start with one tool, not seven. The estimate calculator alone could have been a standalone product. Spreading across 7 tools diluted focus.
Interactive tools > static content for initial traction. Blog articles need SEO time (weeks/months). Tools get shared immediately if they're genuinely useful.
Email capture from day one. I initially launched without email capture and had to retrofit it across 20+ pages. Should have been in the template from the start.

Try It

All tools are free at toolkit.buildoutreach.io

The templates are open source at github.com/Mikebutts20/contractor-marketing-toolkit

If you work with contractors or small businesses, I'd love to hear what tools would be most useful. Drop a comment or open an issue on the repo.

Building tools for trades that don't have them yet. If you liked this, I also wrote about free alternatives to ServiceTitan and Jobber for contractors who can't afford $300/month software.