After you buy
How to edit and publish an HTML/CSS landing page template
These are the instructions from the README delivered with every template: change the 5 colour variables, replace the placeholder text, connect the form to your own form handler and host the file. All you need is a text editor.
Re-brand by editing 5 variables
The first rule in the <style> block holds the palette:
:root {
--brand: #0b5cad;
--brand-dark: #083b70;
--accent: #c2410c;
--ink: #14202b;
--tint: #eef5fc;
}
| Variable | Used for | Keep readable |
|---|---|---|
--brand | Hero gradient end, step numbers, outlines | White text sits on it: choose a dark shade |
--brand-dark | Hero gradient start, links, icon color | White text sits on it, and it is text on white and on --tint |
--accent | Call and submit buttons, emergency band, focus outline | White text sits on it: choose a dark shade |
--ink | Body text, demo notice and footer background | Very dark: white text sits on it in the footer |
--tint | Alternate section and form background | Very light: --ink text sits on it |
After changing colors, test each pair with any contrast checker and aim for a ratio of at least 4.5:1.
Replace the placeholder content
Everything in the pages is placeholder content. Nothing describes a real business. Search each file for these and replace them:
Your Business Name(Your Practice Namein the dentist file,Your Law Firm Namein the lawyer file)Your City,Your County,Neighborhood One,Neighborhood Two,Neighborhood Three,Nearby Town One,Nearby Town Two,Neighboring County One,Neighboring County Two- The phone number, which appears as visible text such as
555-0110and as a link such ashref="tel:5550110". Change both. Numbers used: plumber 555-0110, dentist 555-0120, lawyer 555-0130, cleaner 555-0140, electrician 555-0150, landscaper 555-0160. - The placeholder email address
123 Example StreetandYour City, ST 00000$00prices in the dentist and cleaner files- The hours in the footer
- The
<title>and<meta name="description">text at the top of the file - Service descriptions, FAQ answers and the "why us" points. Several of them are written as instructions, for example "State your call-out policy here". Keep only statements that are true for your business.
- The footer links
Privacy policyandTerms of servicepoint to#. Point them at your own pages.
Customer quote slot
The dashed box labelled "Add a real customer quote here" is empty on purpose. Put in words a real customer gave you permission to publish, or delete the whole <div class="quote-slot"> block. Do not invent quotes.
Demo notice
Each page starts with a dark bar saying it is a demonstration template and not a real business. Once every placeholder is replaced, delete the whole <aside class="demo"> block near the top of the <body>.
Wire up the contact form
The form is plain HTML and ships with action="#", so pressing the button sends nothing until you connect it. A static page cannot receive form submissions on its own. You need a form handler: one included with your web host, or a form service you sign up for.
- Get the form endpoint address from your form handler.
- Find
<form action="#" method="post">in the file and replace#with that address. - The fields are sent under these names:
name,phone,email,service,message, plusaddress(plumber, electrician, landscaper),dateandtime(dentist),contact-time(lawyer),bedroomsandfrequency(cleaner). If your handler expects other names, change thename="..."attributes. - Send a test submission and check that it arrives.
A form collects personal data. Link your privacy policy near the form and switch on your handler's spam protection.
Publish
Rename your edited file to index.html and upload it to any static web host. No build step is needed.
Your responsibilities
You are responsible for your own content, for your privacy policy and terms pages, for any advertising rules that apply to your profession (law firms and dental practices in particular), and for the accessibility compliance of the site you publish. The templates include a skip link, landmarks, one h1, labelled form fields and visible focus styles as a starting point, not as a certificate of compliance.