Painting of ducks in the water.

Createawebsite.cc

Building a Simple Contact Form with HTML

Creating a website and need a contact form? You’re in the right place.

Building a contact form with HTML is relatively straightforward. In this article I cover the essential HTML elements to create one, along with some styling for good measure.

Starting with the HTML Structure

Every contact form needs a few essential pieces. You’ll want fields for the user’s name and email address. And you’ll need a field for their message.

Some forms get fancy with phone numbers, company names, or dropdown menus, etc. But in most cases these are optional extras. Plus we shouldn’t forget that the more fields on a form, the scarier it will look to the user. Most users balk at the thought of having to provide so much information just to send a simple message.

So let’s keep things simple. We’ll create a basic form with the three fields we just mentioned:

<form class="contact-form" action="/submit-contact" method="POST">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
  </div>
  
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>
  
  <button type="submit">Send Message</button>
</form>

Let’s break down what each part does:

  • The <form> element wraps everything and tells the browser where to send data when submitted. The action attribute specifies the destination URL, while method="POST" ensures form data gets sent securely rather than appearing in the URL.
  • Each <label> connects to its input field through the for attribute, which matches the input’s id. This connection helps screen readers understand what each field is for. It also lets users click on labels to focus the corresponding input.
  • The <input type="text"> creates a standard text field for names. Using type="email" for the email field gives you automatic validation that checks for proper email format before the form submits.
  • The <textarea> element provides a larger text area for messages. The rows="5" attribute sets the initial height to show 5 lines of text.
  • The required attribute on each field prevents form submission if any field is left empty. This basic validation happens automatically in modern browsers.

Making Fields Required and Validated

HTML5 gives you some built-in validation that works without requiring any JavaScript. The required attribute prevents form submission if fields are empty. Using type="email" automatically checks that someone entered something that looks like an email address.

You can also add other validation attributes. For example:

<input type="text" name="name" required minlength="2" maxlength="50">
<input type="email" name="email" required>
<textarea name="message" required minlength="10" maxlength="500"></textarea>

In this example I used the minlength and maxlength attributes to set minimum and maximum lengths for two of the fields. This means that the data provided by the user must be no shorter than the minimum length, and no more than the maximum.

These attributes give users immediate feedback when they to submit incomplete or invalid information. Browser validation isn’t perfect, but it catches obvious mistakes before the form gets sent anywhere.

Adding Some Basic Styling

A bare HTML form can look pretty rough. Even just a small amount of CSS can make a huge difference in how professional your form appears:

.contact-form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.contact-form .form-group {
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

.contact-form button {
  background-color: #007cba;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.contact-form button:hover {
  background-color: #005a87;
}

The above CSS creates a clean, centered form with proper spacing and hover effects.

Here’s what our form looks like with the above styles applied:

Of course, this is just a sample style sheet. You can adjust the styles as needed.

I should highlight one thing though. I made sure the font was at least 16px for the input fields. This prevents mobile browsers from zooming in when people tap form fields. This is a quirk with some mobile browsers. If the font size is too small, they try to be helpful by zooming in. But this often creates a jarring experience where the whole page suddenly zooms in just because the user tapped a form field. So, something to remember when creating a style sheet for your forms.

Handling Form Submissions

HTML forms need somewhere to send data when submitted. The action attribute tells the browser where to send form data, and method="POST" ensures sensitive information doesn’t appear in URLs (as opposed to method="GET", which puts all form data in the URL when submitted).

For a basic setup, you might send form data to a server-side script:

<form action="/contact.php" method="POST">

If you’re using a static site, services like Netlify Forms, Formspree, or Getform can handle submissions without requiring backend code. Just update your form’s action attribute to point to their endpoints. In some cases (such as with Netlify), you might just need to add a custom attribute instead.

Improving User Experience

Small touches can make forms feel more polished. Adding placeholder text gives users hints about what to enter:

<input type="text" name="name" placeholder="Enter your full name" required>
<input type="email" name="email" placeholder="your@email.com" required>
<textarea name="message" placeholder="What would you like to discuss?" required></textarea>

You can also group related fields (like we did in our example) or add helpful text below inputs:

<div class="form-group">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <small>We'll never share your email with anyone else.</small>
</div>

In our case we’re using a <div> to group elements, but HTML also provides us with the <fieldset> element to do a similar thing, but with better semantics.

The reason I used <div> instead of <fieldset> is because our simple contact form doesn’t really need semantic grouping. Fieldsets can help when you have distinct sections like “Personal Information” and “Company Details.” For basic forms with just a few fields, <div>s are cleaner and easier to style. If you do want to use fieldsets, they pair with <legend> elements to provide group labels:

<fieldset>
  <legend>Contact Information</legend>
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>
</fieldset>

Testing Your Form

Before going live, test your form thoroughly. Try submitting it empty, with invalid emails, and with different message lengths. Check how it looks on mobile devices and with different browsers.

Make sure error messages are clear and helpful. Instead of generic “Invalid input” messages, tell users exactly what needs fixing.

Security Considerations

Even simple contact forms need basic security measures. Always validate and sanitize form data on the server side, regardless of client-side validation. Consider adding CAPTCHA if you start getting spam submissions.

Never trust user input completely. Hackers love web forms. Validate everything again on your server and escape any data before displaying it or storing it in databases.

If you’re using services like Netlify Forms, Formspree, or Getform, they’ll usually handle most of the security concerns for you. These services automatically validate submissions and protect against common attacks. You still want to be careful about how you display any form data on your site (if applicable), but the heavy lifting is done for you.

Making It Mobile-Friendly

Mobile users probably make up most of your website traffic, so your form had better work well on phones. Use responsive CSS to ensure your form looks good on all screen sizes:

@media (max-width: 600px) {
  .contact-form {
    padding: 10px;
  }
  
  .contact-form input,
  .contact-form textarea,
  .contact-form button {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

Test your form on actual mobile devices, not just by resizing your browser window. Touch targets should be large enough to tap easily, and text should be readable without zooming.

Common Mistakes to Avoid

Don’t make your form longer than necessary. Every additional field reduces completion rates. If your form asks for optional information, mark it clearly as optional.

Avoid tiny submit buttons or unclear labeling. Users should immediately understand what each field is for and what happens when they click submit.

Skip the fancy animations and effects unless they actually improve usability. A form that works well is better than one that looks flashy but confuses people.

Wrapping Up

You’ve seen that building a solid contact form doesn’t require you to have advanced programming skills or expensive tools. All you need is some basic HTML and styling. But the most important thing is to focus on making it easy for people to use. Be sure to test everything thoroughly and keep security in mind from the beginning.

Your contact form is often the first direct interaction people have with your business. Make it count by keeping things simple, accessible, and functional. A good contact form builds trust and makes it easy for potential customers to reach out.

ian

,