Quote-Ready Website Template for Commercial & Industrial Electricians

Build a complete, responsive website for a commercial and light-industrial electrical contractor. The visitors are facility managers, property managers, general contractors and business owners. The main goal of the site is to collect qualified quote requests, with enough project detail that the contractor can price the job. The secondary goal is phone calls to the estimating line. Use the business details below. They are fictional samples: replace them with your own before you build, or keep them to make a demo. BUSINESS DETAILS - Business name: Ironbridge Electrical Contractors - Trade: commercial and light-industrial electrical contractor - Estimating phone: (555) 017-6634 - Email: [email protected] - Region served: the Harmon Valley region and surrounding counties - Office hours: Monday to Friday 7am to 5pm. After-hours service for existing maintenance clients. - License, bonding and insurance details: [LICENSE / BONDING / INSURANCE DETAILS] - Client names, logos, project photos, safety record figures, years in business: none supplied HONESTY RULES (follow these exactly) - Never invent client names, logos, testimonials, project histories, safety statistics, certifications, years in business, crew sizes, prices or response-time guarantees. - Where one of these would normally appear, show a clearly marked placeholder in square brackets, for example "[Add a completed project: client type, scope, photos used with permission]", styled so the owner can see it needs filling in. - No stock photos and no images presented as real projects. Use line drawings, diagrams and icons instead (see Visual direction). PAGES Build four pages that share one header, one footer and one stylesheet. 1. Home - Header: the business name as a text logo, links to the four pages, a "Request a quote" button, and the estimating phone number as a smaller tap-to-call link. On phones, collapse the links into a menu and keep "Request a quote" visible. - Hero: a headline that names the work and the client ("Electrical contracting for commercial and light-industrial sites" style, written naturally), one sentence on what makes the contractor easy to work with (clear scopes, written quotes, work planned around your operating hours), and two buttons: "Request a quote" (primary) and "Call estimating" (secondary). - Capabilities overview: six services, each as a card with a line icon, a title and two sentences: Tenant fit-outs and build-outs, LED lighting retrofits, Power distribution and panel work, Preventive maintenance contracts, After-hours and emergency service for businesses, Workplace and fleet EV charging. Each card links to its section on the Services page. - Sectors served: Offices, Retail and hospitality, Warehouses and light industrial, Multi-unit residential common areas. Each links to its section on the Sectors page. - "How a project runs": five numbered stages (site visit and scope, written quote, schedule agreed around your operations, installation and inspection, handover with documentation). - Project experience: three placeholder cards using the bracketed placeholder text from the honesty rules. - Credentials panel: "[LICENSE / BONDING / INSURANCE DETAILS]" as a visible placeholder, plus a short note that certificates are available on request. - Quote band: a short line encouraging people to send drawings or a scope, with a "Request a quote" button. - Footer: business name, estimating phone, email, office hours, region served, credentials placeholder, links to all pages. 2. Services - A short intro. - One section per service, each with an id so the home page cards can link straight to it. For each: typical scope, what the client needs to provide (drawings, access, shutdown windows), and a "Request a quote for this" link that opens the quote page with that service preselected (use a URL parameter, for example ?service=lighting-retrofit, and read it on the quote page). 3. Sectors - A short intro. - One section per sector, each with an id, describing the practical concerns of that kind of site (for example: working around trading hours in retail, keeping warehouses running during upgrades, tenant communication in multi-unit buildings). Keep it general and useful; don't invent client stories. 4. Request a quote - A two-step form on one page. Step 1, the project: service needed (select, preselected from the URL parameter if present), sector (select), site city or town, project size (a select of rough ranges such as "Under 2,500 sq ft", "2,500 to 10,000 sq ft", "10,000 to 50,000 sq ft", "Over 50,000 sq ft", "Not sure"), preferred timeline (select), and "Do you have drawings or a written scope?" (Yes, No, In progress). Step 2, contact details: name, company, role, email, phone, and a free-text "Anything else we should know?". Show a step indicator ("Step 1 of 2") and "Next" and "Back" buttons. The final button reads "Send quote request". - Beside the form: a short "What happens next" list (we review your details, we call to arrange a site visit if needed, you receive a written quote) without promising specific turnaround times. - The estimating phone number for people who would rather talk. FORMS - Build complete form markup with labels, required fields and clear client-side validation messages. Step 1 must validate before Step 2 appears. - Leave the form's submission address as a clearly marked placeholder: action="[FORM ENDPOINT]". If someone submits while the placeholder is still in place, don't navigate away. Show an inline message instead: "This form isn't connected yet. Please call (555) 017-6634 or email [email protected]." VISUAL DIRECTION - Mood: precise, organized and calm, like a well-drawn set of plans. - Colors: white #FFFFFF and pale blue-gray #EEF2F7 backgrounds, graphite #22262E for text and dark sections, electric blue #0A5BFF for primary actions and highlights, steel gray #6B7588 for secondary text and rules. Every text and button color pairing must meet WCAG AA contrast. - Type: IBM Plex Sans Condensed (600) for headings and IBM Plex Sans (400 and 500) for body text, loaded from Google Fonts. Use IBM Plex Mono sparingly for small labels such as step numbers and section tags. - Layout: a clear grid with thin rule lines, generous white space and squared-off cards with a small corner radius. Section labels sit above headings in small uppercase mono text. - Imagery: no photos. Use inline SVG line drawings in a technical style: a simple single-line diagram motif in the hero, and line icons for services and sectors. COPY AND TONE - Professional and direct. Write for someone who manages buildings and budgets. Short paragraphs, concrete nouns, no hype. - Use "you" and "we". Avoid vague claims such as "world-class" or "best in the business". - Buttons say exactly what happens: "Request a quote", "Call estimating", "Send quote request". TECHNICAL REQUIREMENTS - Plain HTML, one CSS file and a small amount of vanilla JavaScript (menu toggle, two-step form, preselecting the service). No frameworks and no build step. - One HTML file per page. All pages share the same header and footer markup. - Semantic HTML: header, nav, main and footer landmarks, one h1 per page, and a logical h2/h3 order. - Phone numbers are tel: links and email addresses are mailto: links. Every interactive element has a visible keyboard focus style. - Responsive from 320px wide upward. Check the layout at phone, tablet and desktop widths. - Give each page a unique title tag and meta description, for example "Commercial Electrical Contractor | Ironbridge Electrical Contractors". - Respect prefers-reduced-motion and keep any animation subtle. - Keep it fast: no large libraries, no autoplaying media, and width and height set on any images added later.