Introduction

Creating a contact form for your website might seem a bit daunting at first, especially if you're new to web development. But don't worry, it's actually quite straightforward! In this guide, we'll walk you through the basics of building a simple HTML contact form. You don't need to be a tech wizard – with just a few lines of code, you'll have a working form ready for your site.

Along the way, we'll mention tools like Basin, which can help handle form submissions, but the focus here is on the HTML part. By the end of this guide, you'll have a clear understanding of how to create a contact form that your website visitors can use to get in touch with you.

Ready to dive in? Let's get started with the basics!

The Basics of HTML Contact Forms

Creating an HTML contact form is like putting together a simple puzzle. You just need a few pieces, and once you put them in the right place, you've got a form that lets people send you messages through your website. Let's look at these pieces:

The Basic Structure

Here's a basic example of what an HTML contact form looks like:

<form action="where-your-form-goes" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Send">
</form>

In this example, we have:

• A form tag that wraps everything up. It's like a container for your form.
• Input fields for the name and email. This is where people will type their info.
• A submit button. When clicked, it sends the form's data somewhere.

Making It Work

The `action` attribute in the form tag tells the form where to send the data when the submit button is pressed. If you're using a service like Basin, this is where you'll put the link they give you. If not, it will be a link to a script on your server that processes the form data.

Adding a Bit of Style

You can make your form look nicer with a bit of CSS. Here’s a simple example:

form {
  margin: 20px;
}
input[type=text], input[type=email] {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50">
</textarea>

<p>How did you hear about us?</p>
<div>
  <input type="radio" id="search" name="source" value="search">
  <label for="search">Search Engine</label><br>
  <input type="radio" id="social" name="source" value="social">
  <label for="social">Social Media</label><br>
  <input type="radio" id="friend" name="source" value="friend">
  <label for="friend">Friend</label>
</div>

<p>What services are you interested in?</p>
<div>
  <input type="checkbox" id="design" name="service" value="design">
  <label for="design">Design</label><br>
  <input type="checkbox" id="dev" name="service" value="dev">
  <label for="dev">Development</label><br>
  <input type="checkbox" id="seo" name="service" value="seo">
  <label for="seo">SEO</label>
</div>

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="usa">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="canada">Canada</option>
  <!-- Add more options here -->
</select>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];

    // Process the data...
    // For example, send an email or store it in a database

    // Redirect or display a message
    echo "Thank you for your submission!";
}
?>

<form action="https://usebasin.com/f/your-unique-endpoint" method="post">
  <!-- Your form fields go here -->
</form>