Building a Simple One-Page Website with a Working Contact Form

Building a Simple One-Page Website with a Working Contact Form

Building a Simple One‑Page Website with a Working Contact Form

Creating a professional website doesn’t have to be complicated. In this guide, we’ll walk through how to build a simple one‑page website for a generic company. We’ll include a working contact form, explain how it works, and cover the basics of connecting the site to a domain name.

Why a One‑Page Website?

A one‑page site is perfect for freelancers, small businesses, or anyone starting out. It offers:

  • A clean, focused experience for visitors.

  • Easy maintenance (just one page to update).

  • Quick loading times.

Example Website Code

Here’s a minimal HTML, CSS, and JavaScript website you can copy into a file named index.html:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generic Company</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
header { background: #4CAF50; color: white; text-align: center; padding: 2rem; }
section { padding: 2rem; max-width: 800px; margin: auto; }
form { display: flex; flex-direction: column; gap: 1rem; }
input, textarea { padding: 0.5rem; font-size: 1rem; }
button { background: #4CAF50; color: white; border: none; padding: 0.75rem; cursor: pointer; }
button:hover { background: #45a049; }
footer { text-align: center; padding: 1rem; background: #f2f2f2; margin-top: 2rem; }
</style>
</head>
<body>
<header>
<h1>Generic Company</h1>
<p>Your tagline goes here</p>
</header>

<section>
<h2>About Us</h2>
<p>We provide top‑notch services to our clients and value quality above all else.</p>
</section>

<section>
<h2>Contact Us</h2>
<form action="https://formspree.io/f/yourformid" method="POST">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" rows="5" placeholder="Your Message" required></textarea>
<button type="submit">Send</button>
</form>
</section>

<footer>
<p>&copy; 2025 Generic Company. All rights reserved.</p>
</footer>
</body>
</html>

How the Form Works

  • The <form> uses a service like Formspree (https://formspree.io) to handle submissions.

  • Replace yourformid with the ID from your Formspree account.

  • When a visitor submits, you’ll receive the message in your email.

If you have your own server, you can swap out the action with your backend script (PHP, Node.js, etc.) to process form submissions directly.

Hosting the Website

  1. Save the File: Put the index.html file in a folder.

  2. Choose a Hosting Service: Examples:

    • GitHub Pages (free)

    • Netlify (free tier available)

    • Traditional hosting (Bluehost, HostGator, SiteGround, etc.).

  3. Upload: Drag and drop your site into the hosting platform.

Adding a Domain Name

  1. Register a Domain: Buy from providers like Namecheap, GoDaddy, or Google Domains.

  2. Point to Host: In your registrar’s dashboard, update DNS records to point to your hosting provider’s servers (your host gives you these values).

  3. Verify: Within 24–48 hours, your domain should display your website.

Next Steps

  • Add more sections (Services, Portfolio, Testimonials).

  • Improve design with frameworks like Bootstrap or TailwindCSS.

  • Secure your site with HTTPS (most modern hosts provide free SSL via Let’s Encrypt).

Conclusion: With just one file, you can launch a functional website and connect it to a domain. Over time, you can expand with blogs, e‑commerce, or custom backends, but starting simple ensures you get online fast.