Solar Company Website Template: Free HTML Code and How to Build One

People looking for solar panels compare companies on their phones before they call anyone. A good solar company website answers their three questions fast: what do you install, what size do I need, and how do I get a price? It does not need WordPress or a database; a fast HTML site works better and costs almost nothing to host.

This guide gives you a free solar company website in one index.html, with services, a system size calculator and a WhatsApp quote form, then covers what a solar installer's site needs to bring in local customers from Google.

What a solar company website needs

• Services in plain words: home systems, shops and offices, water pumps, batteries
• A size calculator, so visitors see roughly what they need before they contact you
• A quick way to ask for a quote; in Pakistan, India and the Gulf that means WhatsApp
• Proof: photos of finished projects, the brands you install, and real reviews
• Pages for the cities you serve, because people search “solar installation in” their city

Free template: one index.html

1. Copy the code below into a file called index.html and open it in your browser.
2. Change the company name, the city and phone in the footer, and WHATSAPP at the bottom to your own number with the country code.
3. Upload it to your hosting. It is plain HTML, so the cheapest hosting works.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bright Solar – Solar Panel Installation for Homes and Businesses</title>
<meta name="description" content="Solar panel installation for homes, shops and farms. Work out the system size you need and get a free quote on WhatsApp.">
<style>
  :root { --brand: #f59e0b; --dark: #0f172a; }
  body { margin: 0; font-family: system-ui, sans-serif; color: #1e293b; background: #fff; }
  header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--dark); }
  header b { color: #fff; font-size: 20px; }
  header a { background: #22c55e; color: #fff; padding: 9px 16px; border-radius: 999px; font-weight: 700; text-decoration: none; }
  .hero { padding: 56px 20px; text-align: center; background: linear-gradient(135deg, #0f172a, #1e3a8a); color: #fff; }
  .hero h1 { font-size: clamp(28px, 6vw, 46px); margin: 0 0 12px; }
  .hero p { font-size: 18px; max-width: 620px; margin: 0 auto 22px; color: #cbd5e1; }
  .btn { display: inline-block; background: var(--brand); color: #111827; padding: 13px 26px; border-radius: 999px; font-weight: 800; text-decoration: none; border: 0; font-size: 16px; cursor: pointer; }
  section { max-width: 1000px; margin: 0 auto; padding: 44px 20px; }
  h2 { font-size: 28px; margin-top: 0; }
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
  .card { border: 1px solid #e2e8f0; border-radius: 16px; padding: 18px; }
  .card h3 { margin: 0 0 6px; }
  .box { background: #fffbeb; border: 1px solid #fde68a; border-radius: 16px; padding: 20px; }
  label { display: block; font-weight: 700; margin: 12px 0 4px; }
  input, select { width: 100%; box-sizing: border-box; font: inherit; padding: 11px; border: 1px solid #cbd5e1; border-radius: 10px; }
  .result { margin-top: 14px; font-size: 18px; font-weight: 800; }
  footer { padding: 24px 20px; text-align: center; background: var(--dark); color: #94a3b8; }
</style>
</head>
<body>
<header><b>Bright Solar</b><a href="#quote">Free quote</a></header>

<div class="hero">
  <h1>Cut your electricity bill with solar</h1>
  <p>Solar systems for homes, shops and farms: design, installation, net metering and after-sales service.</p>
  <a class="btn" href="#size">Find the system size you need</a>
</div>

<section>
  <h2>Our services</h2>
  <div class="cards">
    <div class="card"><h3>Home solar</h3><p>On-grid and hybrid systems that run your home and lower the bill.</p></div>
    <div class="card"><h3>Shops and offices</h3><p>Daytime power for businesses, sized from your real usage.</p></div>
    <div class="card"><h3>Solar water pumps</h3><p>Pumps for farms and tube wells, with no fuel cost.</p></div>
    <div class="card"><h3>Batteries and backup</h3><p>Keep lights and fans on during load shedding.</p></div>
  </div>
</section>

<section id="size">
  <h2>What size system do you need?</h2>
  <div class="box">
    <label for="units">Units used per month (look at your electricity bill)</label>
    <input id="units" type="number" min="1" placeholder="for example 500">
    <button class="btn" id="calc" style="margin-top:14px">Calculate</button>
    <div class="result" id="sizeOut"></div>
    <p style="font-size:14px;color:#64748b">Rough guide using 5 hours of good sunlight a day and 585 W panels. We confirm the size after a site visit.</p>
  </div>
</section>

<section id="quote">
  <h2>Get a free quote</h2>
  <form class="box" id="quoteForm">
    <label for="name">Your name</label><input id="name" required>
    <label for="city">City</label><input id="city" required>
    <label for="type">For</label>
    <select id="type"><option>Home</option><option>Shop or office</option><option>Farm or water pump</option></select>
    <button class="btn" style="margin-top:16px">Send on WhatsApp</button>
  </form>
</section>

<footer>Bright Solar · Lahore · +92 300 0000000</footer>

<script>
const WHATSAPP = '923000000000';   // your WhatsApp number with country code, no + or spaces
const SUN_HOURS = 5;               // average hours of good sunlight per day
const PANEL_WATTS = 585;           // the panels you install
let lastSize = '';

// System size: monthly units ÷ 30 days ÷ sun hours = kilowatts
document.getElementById('calc').onclick = () => {
  const units = Number(document.getElementById('units').value);
  const out = document.getElementById('sizeOut');
  if (!units || units < 1) { out.textContent = 'Enter the units from your bill'; return; }
  const kw = Math.ceil(units / 30 / SUN_HOURS * 10) / 10;
  const panels = Math.ceil(kw * 1000 / PANEL_WATTS);
  lastSize = kw + ' kW';
  out.textContent = `About ${kw} kW: ${panels} panels of ${PANEL_WATTS} W`;
};

// Quote: opens WhatsApp with the visitor's details already typed
document.getElementById('quoteForm').onsubmit = e => {
  e.preventDefault();
  const v = id => document.getElementById(id).value.trim();
  const text = `Hello, I would like a solar quote.\nName: ${v('name')}\nCity: ${v('city')}\nFor: ${v('type')}` +
               (lastSize ? `\nSystem size: ${lastSize}` : '');
  window.open('https://wa.me/' + WHATSAPP + '?text=' + encodeURIComponent(text), '_blank');
};
</script>
</body>
</html>

Get local customers from Google

• A page per city you work in, for example “Solar panel installation in Lahore”, with your projects there. Do not copy the same text with only the city name changed.
• A Google Business Profile with photos, working hours and reviews. For local searches it often shows above every website.
• Price guide pages, such as “5 kW solar system price”, updated when prices change. People search for prices more than anything else.
• Project photos with a short write-up: the system size, the city, and what the customer saves.
• LocalBusiness structured data with your name, phone, address and hours, so Google understands who you are.
• Speed: compress photos (WebP), and keep the site light; most visitors are on mobile data.

Common problems

The full version: a 20-page solar company website

Our solar company website template is a complete site for a solar installer, built the same way (plain HTML, CSS and JavaScript, nothing running on the server):

• 20 pages written for search engines and AI answers: home, services (villa solar, farm solar, water pumps, battery storage, cleaning, AC on solar, hybrid systems), price guides, city pages and a contact page
• WhatsApp buttons and a contact form that opens WhatsApp with the visitor's details already typed
• SEO and AI search built in, and fast pages: no web fonts, no framework, AVIF and WebP images, about 15 KB of CSS and JavaScript
• A build tool that turns one settings file (name, phones, WhatsApp, address, hours, menus) into the whole site, so you rebrand it in minutes

The demo brand is a fictional installer in the UAE; change the settings and page texts for your own country and cities.

Where to go next

• What actually matters in cheap web hosting
• Get your pages ranking in Google
• Turn your website into an Android app