I just imagined building a custom website with the help of Hostinger and ChatGPT. If a client wants something truly lightweight, fast, and custom-built. Let me share how I created an imagined project for a local flower business, and how I did it entirely using ChatGPT custom code and hosted on Hostinger.
Table of Contents
- 🏡 The Client's Need: Simplicity, Speed, and Control
- 🛠️ Why Hostinger?
- 📁 Folder Structure
- 📄 Step 1: Creating the HTML Website (index.html)
- 📩 Step 2: Handling the Form Submission (contact.php)
- How to create or upload a custom website to Hostinger?
- 🔐 Step 3: Securing the Leads File with .htaccess
- 📄 Create a .htaccess File
- ✅ Steps in Hostinger File Manager:
- 📊 Why This Approach Works for Local Businesses
- 🚀 Want to Try It Yourself?
- 🎨 Giving It a Stunning Look: The style.css Code in Action
- Don't Forget to Link It!
- 🤝 My Partner in Creation: How Gemini Helped Bring This to Life
- 🚀 See the Full BloomLocal Flowers Website Live!
- 🌟 Final Thoughts
🏡 The Client’s Need: Simplicity, Speed, and Control
I imagined it as a digital marketing intern, where a local flower shop owner approached me. She wanted to build a customized website for his flower business.
His requirements were clear:
- A clean, simple website
- A contact form where customers could send messages
- No WordPress, no builders, no fluff
This was the perfect opportunity to create a custom-coded website with a contact form that stores data and sends a welcome email.
🛠️ Why Hostinger?
I chose Hostinger for this project because:
- It offers reliable PHP and file manager support
- I could easily upload custom HTML and PHP files
- It’s beginner-friendly but powerful
With just a few files, I could build a fully functioning custom website.
📁 Folder Structure
Here’s how I structured the project inside the /public_html/ directory:
/public_html/
├── index.html
├── contact.php
└── leads.txt (auto-created)📄 Step 1: Creating the HTML Website (index.html)
This is the main page customers see:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BloomLocal Flowers</title>
</head>
<body>
<h1>Welcome to BloomLocal Flowers 🌸</h1>
<p>Fresh flowers for every occasion. Contact us below!</p>
<h2>Send Us a Message</h2>
<form action="contact.php" method="POST">
<input type="text" name="name" placeholder="Your Name" required><br><br>
<input type="email" name="email" placeholder="Your Email" required><br><br>
<textarea name="message" placeholder="Your Message" required></textarea><br><br>
<button type="submit">Send</button>
</form>
</body>
</html>📩 Step 2: Handling the Form Submission (contact.php)
This PHP script does two things:
- Stores the message in a
.txtfile - Sends an automatic welcome email
<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
$name = htmlspecialchars($_POST["name"]);
$email = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
$message = htmlspecialchars($_POST["message"]);
// Save to file
$entry = "Name: $name | Email: $email | Message: $message" . PHP_EOL;
file_put_contents("leads.txt", $entry, FILE_APPEND | LOCK_EX);
// Send auto-reply
$subject = "Thanks for contacting BloomLocal Flowers 🌸";
$body = "Hi $name,\n\nThanks for reaching out to BloomLocal Flowers. We’ll get back to you shortly!\n\nWith love,\nTeam BloomLocal";
$headers = "From: contact@yourdomain.com";
mail($email, $subject, $body, $headers);
echo "Thanks! Your message has been sent.";
} else {
echo "Invalid request.";
}
?>How to create or upload a custom website to Hostinger?
🔐 Step 3: Securing the Leads File with .htaccess
We don’t want visitors to access leads.txt directly. Here’s how to protect it:
📄 Create a .htaccess File
In the same folder (/public_html/), create a file named .htaccess and add this code:
<Files "leads.txt">
Order allow,deny
Deny from all
</Files>✅ Steps in Hostinger File Manager:
- Go to hPanel > File Manager
- Open the
/public_html/folder - Click “New File” and name it
.htaccess - Paste the code above and save
This makes sure no one can open https://yourdomain.com/leads.txt in their browser.
📊 Why This Approach Works for Local Businesses
- ✅ Fast: No bloated themes or plugins
- ✅ Cheap: No need to pay for premium builders
- ✅ Custom: Every element is 100% yours
- ✅ Practical: Data stored and email sent automatically
For small local businesses like BloomLocal Flowers, this is an ideal solution.
🚀 Want to Try It Yourself?
I imagined this project, and I tried it with the help of ChatGPT and Hostinger. You can also try.
(Note: Update contact@yourdomain.com to your own domain email for emails to work reliably.)
💡 Want to give it a stunning look? Add a style.css file and link it in your HTML to beautifully style the form, layout, and overall site. It’s a simple next step to level up your project!
🎨 Giving It a Stunning Look: The style.css Code in Action
As I hinted earlier, a simple style.css file can transform the look and feel of your custom website. This is where we bring BloomLocal Flowers to life with colors, fonts, and a cleaner layout!
First, you’ll need to create a style.css file in the same /public_html/ directory as your index.html and contact.php.
/* Reset & Base Styles */
body {
background-color: #fff5f8;
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 20px;
color: #333;
text-align: center;
}
/* Heading */
h1 {
color: #e91e63;
font-size: 2rem;
margin-bottom: 10px;
}
p {
margin-bottom: 30px;
font-size: 1.1rem;
}
/* Form Section */
form {
max-width: 600px;
margin: 0 auto;
background: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(233, 30, 99, 0.1);
text-align: left;
}
/* Input Fields */
input, textarea {
width: 100%;
padding: 12px 15px; /* ← padding left and right to fix your issue */
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
box-sizing: border-box;
}
/* Input Focus */
input:focus, textarea:focus {
border-color: #e91e63;
outline: none;
box-shadow: 0 0 5px rgba(233, 30, 99, 0.2);
}
/* Submit Button */
button {
background-color: #e91e63;
color: white;
padding: 12px 24px;
border: none;
border-radius: 6px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #c2185b;
}
Don’t Forget to Link It!
For these styles to take effect, you need to link the style.css file to your index.html. Open your index.html file and add the following line inside the <head> section:
<link rel="stylesheet" href="style.css">like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BloomLocal Flowers</title>
<link rel="stylesheet" href="style.css">
</head>
<body>The page will look like this —
See the difference? With just a few lines of CSS, the website now has a much more inviting and professional appearance, proving that a custom, lightweight approach doesn’t mean sacrificing aesthetics.
What do you think of these styles? Are there any specific elements you’d like to further customize or enhance?
🤝 My Partner in Creation: How Gemini Helped Bring This to Life
You might be wondering who helped me craft such a comprehensive and aesthetically pleasing website without relying on WordPress or complex builders. The answer is simple: it was Gemini!
From the initial index.html structure and the dynamic contact.php script, to the detailed style.css that transformed its look, and even the very content you see across sections like “Our Story” and “Our Exquisite Collections” – Gemini was my constant co-pilot.
I provided the vision and the specific requirements for a lightweight, custom solution for BloomLocal Flowers, and Gemini helped generate the tailored code snippets and descriptive text based on the prompts I gave it. For example, to guide Gemini in making the site truly shine and expand its functionality, my prompt to the AI was refined to something like:
“Make this website more visually stunning and add comprehensive new sections to enhance user experience.”
This project is a testament to how powerful and efficient the collaboration between human creativity and AI capabilities can be. It allowed me to deliver a truly custom, fast, and feature-rich website that perfectly met the client’s needs, all while learning a tremendous amount along the way.
🚀 See the Full BloomLocal Flowers Website Live!
(Image of the fully developed website here)
Check out the complete, custom-built BloomLocal Flowers landing page right here: https://saddlebrown-snake-265608.hostingersite.com/
Ready to build your own custom, lightweight website with AI? Let’s get started!
🌟 Final Thoughts
This project taught me how much you can accomplish with just a few lines of clean code and a reliable host like Hostinger. If you’re a digital marketer or freelancer, learning how to build and host custom websites like this can seriously level up your value to local businesses.
Want to learn how to build advanced features like CRM integration or Google Sheets sync? Let me know in the comments or reach out—I’m here to help!
Anup Ain
Hey, my name is Anup Ain. I am a blogger and a digital marketing intern. I enjoy sharing my knowledge and experiences with others.