Contact Us Form in HTML

Overview

A Contact Us form allows users to reach out to the website owner or support team. It typically includes fields like name, email, subject, and message.

HTML Code Example

Here is a simple and responsive contact form built using HTML and Tailwind CSS:

<form action="submit-form.php" method="post" class="space-y-4">
  <div>
    <label for="name" class="block  font-medium">Name:</label>
    <input type="text" id="name" name="name" required class="w-full border border-gray-300 rounded px-3 py-2">
  </div>

  <div>
    <label for="email" class="block  font-medium">Email:</label>
    <input type="email" id="email" name="email" required class="w-full border border-gray-300 rounded px-3 py-2">
  </div>

  <div>
    <label for="subject" class="block  font-medium">Subject:</label>
    <input type="text" id="subject" name="subject" class="w-full border border-gray-300 rounded px-3 py-2">
  </div>

  <div>
    <label for="message" class="block  font-medium">Message:</label>
    <textarea id="message" name="message" rows="5" required class="w-full border border-gray-300 rounded px-3 py-2"></textarea>
  </div>

  <button type="submit" class="bg-blue-600 text-white px-5 py-2 rounded hover:bg-blue-700">Send Message</button>
</form>
            

Tips

• Always validate form inputs on the client and server sides.
• Use CAPTCHA to prevent spam submissions.
• Provide a success or error message after submission.