FixRight Handyman

Quick start

1. Extract fixright-handyman.zip and open index.html in your browser.
2. Use a text editor to replace the sample business details, services, locations, hours, and reviews in index.html.
3. Replace the inquiry email in assets/js/main.js as well as the visible contact links.
4. Review the images and policy wording for your business.
5. Upload the folder contents to Hostinger and test the public URL.

The form prepares an email draft. The visitor must open their email application and send it. There is no backend, automatic delivery, appointment reservation, payment collection, or file upload.

1. Overview & included features

FixRight is a one-page Bootstrap 5 landing page for handyman businesses offering minor repairs and small projects. It includes six services, three project-type cards, four illustrative project examples, local service-area buttons, customer review samples, a three-step process, an estimate form, contact hours, twelve FAQs, and policy modals.

Service, project-type, and community buttons preselect form fields while preserving unrelated entries. The site includes a mobile menu and a fixed mobile call/estimate bar. There are no separate service pages, live scheduling services, accounts, analytics, map embeds, or instant prices.

2. Files & dependencies

The website uses HTML5, CSS3, vanilla JavaScript, system Arial/Helvetica and Georgia fonts, and local Bootstrap. No build command, Node.js server, CDN, font download, or package installation is needed to use it.

3. Business details & content

Use your editor’s search function to update every occurrence in index.html. Keep the hero, service areas, contact, FAQs, footer, and policies consistent.

The phone is fictional and the example-domain email cannot receive inquiries. The service base is a sample city, not a walk-in address. Replace the three sample testimonials with genuine, authorized feedback. Adjust the twelve FAQs to match your business practices.

Keep descriptions within your actual capabilities and applicable local requirements. The supplied copy excludes specialist electrical, gas, plumbing alteration, structural, roofing, and hazardous-material work. Do not add unsupported credentials or guarantees.

4. Branding, colors & spacing

Header and footer branding use the .brand and .logo-mark elements. Change both wordmarks in index.html and edit assets/favicon.svg for the browser icon.

:root {
  --ink: #23333e;
  --slate: #40596b;
  --amber: #efb44d;
  --paper: #faf9f5;
  --pale: #eeeee8;
  --muted: #58646b;
  --line: #d5d9d7;
}

Edit these values at the start of assets/css/style.css. Body text uses Arial/Helvetica; the hero emphasis and selected editorial details use Georgia. Edit the h1, h2, and body rules to adjust typography. Section spacing is controlled by .section, with smaller mobile spacing below 768 px. .container controls the content width and side padding. Verify contrast and responsive wrapping after changes.

5. Services, projects & gallery

The services section is #services. Keep each data-service attribute identical to an option in the #service select. Project-type cards in #project-types use data-project values matching the #project select. These project types are broad inquiry categories, not fixed-price packages.

<a class="btn btn-primary" href="#estimate"
   data-service="Furniture Assembly">
  Request This Service
</a>

The four gallery examples in #projects also use data-service. They do not overwrite the visitor’s written description. The repair-list action sets both Home Maintenance & Punch Lists and A List of Little Jobs. Project-only buttons preserve any selected service.

Edit titles, descriptions, and images together. Keep illustrative project labeling; generated photos must not be presented as actual customer work. No before-and-after comparison is implemented.

6. Images & replacement

All eight included photographs are original AI-generated assets, converted to local WebP. They illustrate the template and do not prove employee identity or completed customer jobs. Review and replace generated imagery before a real business launch.

All bundled photos are 1536 × 1024. Keep that size or an equivalent 3:2 ratio for replacements; use a high-resolution subject-centered photo for the hero, which is cropped vertically. Gallery photos display at 3:2; about and main maintenance photos use square crops.

Keep filenames to avoid changing references, or update each src in index.html. Use optimized WebP, descriptive alt text, and accurate width/height attributes. CSS object-fit: cover controls cropping; use object-position for a specific image if needed. Inspect desktop and mobile crops. The hero uses fetchpriority="high"; other photos are lazy-loaded. There are no srcset or external image URLs.

7. Inquiry fields & validation

The form ID is estimateForm. Required fields are name, email, service, project, property, location, and details. Phone, preferred date, preferred time, and materials status are optional.

The date minimum is set from the visitor’s local calendar date and refreshed at submission. Past dates are rejected. No schedule or live availability is queried.

Validation uses browser validity checks with visible messages in each field’s error span and aria-invalid states. Empty required text is rejected even if it contains only spaces. An invalid submission focuses the first field needing attention. The form does not request access codes, payment details, or sensitive information.

Preferred dates and times are requests only. Preparing or sending an inquiry does not confirm a price, slot, or appointment.

8. Buttons & preserved entries

Only fields named in the clicked action are changed. Contact information, project details, and other unrelated selections remain intact. The general Check My Location button scrolls to the form without replacing a typed location.

Changing form data or clicking a preselection action hides any previously prepared email link to avoid using an old draft. Prepare the inquiry again with the updated details. There are no service-package compatibility rules because this template does not sell service packages.

9. Email fallback & backend

A valid submission creates an encoded mailto link in #emailDraft. It does not send the inquiry. The visitor must choose Open Email Draft and send the message from their email application. A telephone alternative is always available.

const BUSINESS_EMAIL = 'hello@fixrighthandyman.example';
const BUSINESS_PHONE = '(630) 555-0148';

Change these constants in assets/js/main.js. Also update the visible HTML links and policy copy. Mailto behavior depends on the visitor’s email application, and long requests may exceed some clients’ limits. Files are not attached and there is no upload control.

For automatic lead delivery, replace the form submit handler with a secure backend integration. Validate on the server, add appropriate spam controls, and keep secrets on the server. Preserve entries on failure and display success only after the backend confirms acceptance. Test actual receipt. Update privacy wording and form explanations to match the implemented provider and storage behavior.

10. Navigation, FAQs & modals

The top navigation targets #services, #projects, #process, #areas, and #contact. Estimate actions target #estimate. Update all links if a section ID changes.

Bootstrap Collapse controls #mainNav. The menu closes after a navigation selection. The mobile bar is shown below 768 px; body bottom padding and safe-area insets keep it clear of page content.

FAQs use #faq and unique panels #faq0 through #faq11. Each button’s data-bs-target and aria-controls must match its panel ID.

Policy modals are #privacyModal and #termsModal. Bootstrap handles focus containment, Escape, close controls, and focus restoration. Keep each aria-labelledby linked to its modal title. Keyboard focus and reduced-motion styles are included.

This guide’s top horizontal bar includes a Back to Template link to index.html, visible on desktop and mobile. Sidebar links navigate within this guide.

11. Policies & metadata

Replace the Privacy Policy and Terms wording in index.html after reviewing it for your actual business. The supplied text describes the static form and email-draft flow. It does not invent analytics, cookies, cancellation fees, warranties, or payment terms.

Edit the page title and meta description in the document head. The template includes a theme-color meta tag and favicon. It does not include a sitemap, robots.txt, canonical URL, structured data, or a social preview image. Add these only with accurate production information.

README.html is marked noindex and is not linked from the customer-facing page. You may retain it locally instead of uploading it publicly.

12. Upload to Hostinger

1. Extract the ZIP.
2. Open Hostinger File Manager or connect through SFTP.
3. For the main domain, upload the contents of fixright-handyman into public_html.
4. For a subdirectory, place index.html and assets directly in that chosen folder, for example public_html/demos/landing-pages/fixright-handyman/.
5. Preserve folder names, filename case, and relative asset paths.
6. Open the final HTTPS URL and test images, links, menu, FAQs, policies, and the inquiry flow.

Do not upload only index.html. No server build or installation is needed. The email fallback requires a real recipient, and automatic sending requires a backend.

13. Licenses & before-launch checklist

Bootstrap 5.3.3 and bundled Popper notices are retained in LICENSES.txt and vendor headers. No third-party icon library or font bundle is included. Retain applicable notices. This guide does not create template redistribution rights, support contracts, or new license grants.

• Replace sample contacts, city coverage, hours, and testimonials.
• Verify service scope, material arrangements, and claims.
• Review or replace generated imagery and update alt text.
• Review and replace policy wording.
• Configure real contact destinations and verify inquiry receipt.
• Test all preselection actions without losing existing entries.
• Test keyboard navigation, modals, mobile menu, and date validation.
• Check desktop, tablet, narrow mobile, and enlarged text.
• Check asset paths and functionality at the final Hostinger URL.

14. Troubleshooting