Every website needs a way for visitors to get in touch. Whether you’re building a portfolio, a business site, or an e-commerce store, a contact form is one of the most critical elements for converting visitors into leads, customers, or collaborators.
But writing a contact form from scratch can be tedious. Between handling HTML structure, CSS styling, and backend functionality, it’s easy to get stuck. That’s why I’ve put together this collection of free HTML contact form code that you can copy, paste, and customize for your next project.
In this post, you’ll find 7 ready-to-use contact form templates, along with tips on how to make them functional without a backend.
Why You Need a Contact Form (Not Just an Email Link)
Before we dive into the code, let’s quickly cover why a contact form is better than simply displaying your email address:
- Spam Protection: Forms can hide your email from bots that scrape public pages.
- Better User Experience: Visitors don’t need to open their email client.
- Structured Data: You can ask for specific information (name, subject, order number) that helps you respond faster.
- Professional Appearance: A well-designed form signals that you take your business seriously.
Now, let’s get to the good stuff—the code.
Template 1: Simple Clean Contact Form
This is your basic, no-fuss contact form. Perfect for portfolios, personal sites, or any page where you want a clean, minimalist look.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Contact Form</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.contact-form {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
width: 100%;
max-width: 500px;
}
.contact-form h2 {
margin-bottom: 20px;
color: #333;
text-align: center;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: #555;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #007bff;
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
button {
background: #007bff;
color: white;
border: none;
padding: 12px 25px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s;
}
button:hover {
background: #0056b3;
}
</style>
</head>
<body>
<div class="contact-form">
<h2>Get in Touch</h2>
<form action="#" method="POST">
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
</div>
<button type="submit">Send Message</button>
</form>
</div>
</body>
</html>
Template 2: Modern Gradient Contact Form
For a more eye-catching design, this template uses a gradient background and subtle shadows to make your form stand out.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Contact Form</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.form-container {
background: rgba(255,255,255,0.95);
border-radius: 20px;
padding: 40px;
width: 100%;
max-width: 550px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.form-container h2 {
font-size: 28px;
margin-bottom: 10px;
color: #333;
}
.form-container p {
color: #666;
margin-bottom: 25px;
}
.input-group {
margin-bottom: 20px;
}
.input-group input,
.input-group textarea {
width: 100%;
padding: 14px 16px;
border: 2px solid #e0e0e0;
border-radius: 12px;
font-size: 16px;
transition: all 0.3s;
font-family: inherit;
}
.input-group input:focus,
.input-group textarea:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
}
.input-group textarea {
resize: vertical;
min-height: 130px;
}
button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 14px 28px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
width: 100%;
transition: transform 0.2s, box-shadow 0.2s;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="form-container">
<h2>Let's Talk</h2>
<p>Have a project in mind? I'd love to hear about it.</p>
<form action="#" method="POST">
<div class="input-group">
<input type="text" placeholder="Your Name" name="name" required>
</div>
<div class="input-group">
<input type="email" placeholder="Email Address" name="email" required>
</div>
<div class="input-group">
<input type="text" placeholder="Subject" name="subject">
</div>
<div class="input-group">
<textarea placeholder="Your Message" name="message" required></textarea>
</div>
<button type="submit">Send Message →</button>
</form>
</div>
</body>
</html>
Template 3: Contact Form with Floating Labels
Floating labels provide a sleek, modern UX by saving space and keeping labels visible when fields are filled.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Label Contact Form</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', system-ui, sans-serif;
background: #f8f9fa;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.form-wrapper {
background: white;
border-radius: 24px;
padding: 40px;
width: 100%;
max-width: 500px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
.form-wrapper h2 {
font-size: 24px;
margin-bottom: 30px;
color: #1a1a2e;
}
.float-group {
position: relative;
margin-bottom: 30px;
}
.float-group input,
.float-group textarea {
width: 100%;
padding: 16px 12px 8px 12px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 16px;
transition: all 0.2s;
background: transparent;
font-family: inherit;
}
.float-group textarea {
resize: vertical;
min-height: 100px;
}
.float-group label {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
background: white;
padding: 0 4px;
color: #64748b;
transition: all 0.2s;
pointer-events: none;
font-size: 16px;
}
.float-group textarea ~ label {
top: 20px;
transform: none;
}
.float-group input:focus,
.float-group textarea:focus {
outline: none;
border-color: #3b82f6;
}
.float-group input:focus ~ label,
.float-group input:not(:placeholder-shown) ~ label,
.float-group textarea:focus ~ label,
.float-group textarea:not(:placeholder-shown) ~ label {
top: 0;
font-size: 12px;
transform: translateY(-50%);
color: #3b82f6;
}
input:not(:placeholder-shown),
textarea:not(:placeholder-shown) {
padding-top: 16px;
padding-bottom: 8px;
}
button {
background: #1a1a2e;
color: white;
border: none;
padding: 14px;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
width: 100%;
transition: background 0.3s;
}
button:hover {
background: #0f0f1f;
}
</style>
</head>
<body>
<div class="form-wrapper">
<h2>Send a Message</h2>
<form action="#" method="POST">
<div class="float-group">
<input type="text" id="name" name="name" placeholder=" ">
<label for="name">Full Name</label>
</div>
<div class="float-group">
<input type="email" id="email" name="email" placeholder=" ">
<label for="email">Email Address</label>
</div>
<div class="float-group">
<textarea id="message" name="message" placeholder=" "></textarea>
<label for="message">Your Message</label>
</div>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Template 4: Minimalist Side-by-Side Contact Form
This layout places name and email fields side by side, creating a more compact and professional look.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Side-by-Side Contact Form</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, 'Segoe UI', Roboto;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.contact-card {
background: #fafafa;
border-radius: 16px;
padding: 40px;
width: 100%;
max-width: 600px;
border: 1px solid #eaeaea;
}
.contact-card h2 {
font-size: 28px;
font-weight: 600;
margin-bottom: 8px;
}
.contact-card > p {
color: #666;
margin-bottom: 30px;
}
.form-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.form-row .field {
flex: 1;
}
.field {
margin-bottom: 20px;
}
.field label {
display: block;
margin-bottom: 8px;
font-weight: 500;
font-size: 14px;
color: #333;
}
.field input,
.field textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid #ddd;
border-radius: 10px;
font-size: 15px;
background: white;
transition: 0.2s;
}
.field input:focus,
.field textarea:focus {
outline: none;
border-color: #000;
}
.field textarea {
resize: vertical;
min-height: 120px;
}
button {
background: #000;
color: white;
border: none;
padding: 14px 24px;
border-radius: 10px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
width: 100%;
}
button:hover {
background: #333;
}
@media (max-width: 500px) {
.form-row {
flex-direction: column;
gap: 0;
}
}
</style>
</head>
<body>
<div class="contact-card">
<h2>Contact Us</h2>
<p>We'll get back to you within 24 hours.</p>
<form action="#" method="POST">
<div class="form-row">
<div class="field">
<label for="first">First Name</label>
<input type="text" id="first" name="first_name" required>
</div>
<div class="field">
<label for="last">Last Name</label>
<input type="text" id="last" name="last_name" required>
</div>
</div>
<div class="field">
<label for="email2">Email</label>
<input type="email" id="email2" name="email" required>
</div>
<div class="field">
<label for="msg">Message</label>
<textarea id="msg" name="message" required></textarea>
</div>
<button type="submit">Send Message</button>
</form>
</div>
</body>
</html>
Template 5: Dark Mode Contact Form
Dark mode is increasingly popular. This template offers a sleek dark aesthetic that’s easy on the eyes.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Contact Form</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
background: #0a0a0a;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.dark-form {
background: #121212;
border-radius: 24px;
padding: 40px;
width: 100%;
max-width: 550px;
border: 1px solid #2a2a2a;
}
.dark-form h2 {
color: #ffffff;
margin-bottom: 12px;
font-size: 28px;
}
.dark-form p {
color: #a0a0a0;
margin-bottom: 30px;
}
.input-dark {
margin-bottom: 20px;
}
.input-dark input,
.input-dark textarea {
width: 100%;
background: #1e1e1e;
border: 1px solid #2e2e2e;
padding: 14px 16px;
border-radius: 12px;
color: #ffffff;
font-size: 15px;
transition: all 0.2s;
font-family: inherit;
}
.input-dark textarea {
resize: vertical;
min-height: 120px;
}
.input-dark input:focus,
.input-dark textarea:focus {
outline: none;
border-color: #3b82f6;
}
.input-dark input::placeholder,
.input-dark textarea::placeholder {
color: #6b6b6b;
}
button.dark-btn {
background: #3b82f6;
color: white;
border: none;
padding: 14px;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
width: 100%;
transition: background 0.2s;
}
button.dark-btn:hover {
background: #2563eb;
}
</style>
</head>
<body>
<div class="dark-form">
<h2>Get in Touch</h2>
<p>We'd love to hear from you. Send us a message and we'll respond as soon as possible.</p>
<form action="#" method="POST">
<div class="input-dark">
<input type="text" placeholder="Your Name" name="name" required>
</div>
<div class="input-dark">
<input type="email" placeholder="Email Address" name="email" required>
</div>
<div class="input-dark">
<input type="text" placeholder="Subject (Optional)" name="subject">
</div>
<div class="input-dark">
<textarea placeholder="How can we help you?" name="message" required></textarea>
</div>
<button type="submit" class="dark-btn">Send Message</button>
</form>
</div>
</body>
</html>
Template 6: Contact Form with Social Links
This template combines a contact form with social media links, making it ideal for personal brands and creators.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form with Social Links</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', system-ui, sans-serif;
background: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.contact-section {
background: white;
border-radius: 32px;
display: flex;
flex-wrap: wrap;
max-width: 1000px;
width: 100%;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.form-side {
flex: 1;
padding: 40px;
min-width: 280px;
}
.info-side {
background: #1a2a3a;
padding: 40px;
flex: 0.8;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.form-side h2 {
font-size: 28px;
margin-bottom: 8px;
}
.form-side p {
color: #666;
margin-bottom: 30px;
}
.input-field {
margin-bottom: 20px;
}
.input-field input,
.input-field textarea {
width: 100%;
padding: 14px 16px;
border: 1px solid #e2e8f0;
border-radius: 16px;
font-size: 15px;
transition: 0.2s;
font-family: inherit;
}
.input-field input:focus,
.input-field textarea:focus {
outline: none;
border-color: #1a2a3a;
}
.input-field textarea {
resize: vertical;
min-height: 110px;
}
.submit-btn {
background: #1a2a3a;
color: white;
border: none;
padding: 14px;
border-radius: 40px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
width: 100%;
}
.info-side h3 {
font-size: 24px;
margin-bottom: 20px;
}
.info-side p {
margin-bottom: 30px;
line-height: 1.5;
opacity: 0.9;
}
.social-icons {
display: flex;
gap: 20px;
margin-top: 30px;
}
.social-icons a {
color: white;
font-size: 24px;
transition: opacity 0.2s;
}
.social-icons a:hover {
opacity: 0.7;
}
@media (max-width: 700px) {
.contact-section {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="contact-section">
<div class="form-side">
<h2>Say Hello</h2>
<p>Fill out the form and I'll get back to you within 24 hours.</p>
<form action="#" method="POST">
<div class="input-field">
<input type="text" placeholder="Full Name" name="name" required>
</div>
<div class="input-field">
<input type="email" placeholder="Email Address" name="email" required>
</div>
<div class="input-field">
<textarea placeholder="Your message..." name="message" required></textarea>
</div>
<button type="submit" class="submit-btn">Send Message →</button>
</form>
</div>
<div class="info-side">
<div>
<h3>Let's Connect</h3>
<p>I'm currently available for freelance work and collaborations. Feel free to reach out through the form or connect with me on social media.</p>
</div>
<div class="social-icons">
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</body>
</html>
Template 7: Bootstrap 5 Contact Form
If you’re using Bootstrap in your project, this responsive form integrates seamlessly with the framework.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Contact Form</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background: #f8f9fa;
padding: 40px 20px;
}
.contact-container {
max-width: 700px;
margin: 0 auto;
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.contact-container h1 {
margin-bottom: 10px;
}
.btn-submit {
background: #0d6efd;
padding: 12px 30px;
font-weight: 500;
}
</style>
</head>
<body>
<div class="contact-container">
<h1 class="text-center">Contact Us</h1>
<p class="text-center text-muted mb-4">Have questions? We're here to help.</p>
<form action="#" method="POST">
<div class="row">
<div class="col-md-6 mb-3">
<label for="fname" class="form-label">First Name</label>
<input type="text" class="form-control" id="fname" name="first_name" required>
</div>
<div class="col-md-6 mb-3">
<label for="lname" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lname" name="last_name" required>
</div>
</div>
<div class="mb-3">
<label for="email3" class="form-label">Email</label>
<input type="email" class="form-control" id="email3" name="email" required>
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone (Optional)</label>
<input type="tel" class="form-control" id="phone" name="phone">
</div>
<div class="mb-3">
<label for="msg2" class="form-label">Message</label>
<textarea class="form-control" id="msg2" rows="5" name="message" required></textarea>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-submit">Send Message</button>
</div>
</form>
</div>
</body>
</html>
How to Make Your Contact Form Actually Work
All the forms above use action="#" in the form tag. This means they won’t send emails yet—they need a backend to process the data. Here are three easy ways to make your forms functional:
Option 1: Use Formspree (Free Tier)
Change the action attribute to point to Formspree:
html
<form action="https://formspree.io/f/your-endpoint" method="POST">
Option 2: Use Netlify Forms
If your site is hosted on Netlify, add data-netlify="true" to the form tag:
html
<form method="POST" data-netlify="true">
Option 3: Use a Simple PHP Script
If you have PHP hosting, create a send.php file and set the form action to it.
Customization Tips
- Change Colors: Look for
background,border-color, andcolorproperties in the CSS to match your brand. - Add Validation: Use the
requiredattribute (already included) for basic validation, or add JavaScript for more advanced checks. - Add a Success Message: You can add a thank-you page or use JavaScript to show a confirmation message after submission.
Where to Find More Free Form Inspiration
If you’re building a complete website and want a pre-designed contact page that matches a professional template, check out these resources:
- Free HTML CSS Templates – Browse hundreds of complete website templates with beautifully designed contact pages.
- Free Portfolio Website Templates – Perfect for creatives who need a contact form integrated with their portfolio.
- Free eCommerce Website Templates – Get contact forms tailored for online stores, including inquiry forms and support pages.
These templates offer complete design systems where contact forms are already styled and integrated, saving you hours of design work.
Conclusion
A contact form is one of the most essential elements of any website, and with these free HTML contact form code templates, you don’t need to start from scratch. Whether you prefer a minimalist design, a dark mode aesthetic, or a Bootstrap-powered layout, there’s a template here for you.
Simply copy the code, paste it into your project, and add a backend service to start receiving messages. If you’re building a full website, consider using a complete template from TemplatesJungle to ensure consistent design across all your pages.
Got questions about customizing these forms? Drop a comment below—I’d love to help!
