Template Customization

How to Add a Contact Form to Your HTML Template

A contact form is one of the most essential features of any website. It allows visitors to reach out, ask questions, or provide feedback—without needing to open their email app. In this guide, we’ll show you how to add a simple yet effective contact form to your HTML template.

Why a Contact Form Is Important

  • Improves communication with customers
  • Enhances user experience
  • Keeps your email address hidden from spam bots
  • Encourages visitors to engage with your business

Step 1: Basic HTML Structure for the Form

Insert the following HTML code into your contact.html or any section where you want the form to appear:

<form action="contact.php" method="POST">
  <label for="name">Your Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Your Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Send Message</button>
</form>

Step 2: Adding PHP to Handle Form Submission

If you’re using a server that supports PHP, you can create a contact.php file to process form data:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = htmlspecialchars($_POST["name"]);
    $email = htmlspecialchars($_POST["email"]);
    $message = htmlspecialchars($_POST["message"]);
    
    $to = "[email protected]";
    $subject = "New Contact Form Message";
    $body = "Name: $name\nEmail: $email\n\nMessage:\n$message";

    mail($to, $subject, $body);
    echo "Message sent successfully!";
}
?>

Note: Make sure to replace [email protected] with your actual email address.

Step 3: Styling the Form with CSS

You can enhance the form’s appearance with CSS. Here’s a simple example:

form {
  max-width: 500px;
  margin: 0 auto;
}
label, input, textarea, button {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

Tips for Better Form Experience

  • Use placeholders and labels clearly
  • Validate input on both client and server side
  • Redirect users to a thank-you page after submission
  • Use reCAPTCHA to prevent spam

Conclusion

Adding a contact form to your HTML template is a simple but powerful way to stay connected with your visitors. With a few lines of HTML, PHP, and CSS, you can create a professional communication channel that supports your business goals and improves user trust.