Minimalist CSS Contact Form Code (Responsive & Clean)

A contact form is one of the most essential parts of any website. It allows your visitors, potential clients, or readers to reach out to you easily. However, default HTML forms often look outdated and boring.

In this post, I am sharing a Minimalist CSS Contact Form source code. This design focuses on simplicity and usability (UI/UX). It features clean lines, a subtle focus animation, and a modern "Send" button. It is fully responsive and looks great on mobile devices.

Why use this Minimal Form?

• Distraction Free: The clean design keeps the focus on the content, encouraging users to complete the form.
• Visual Feedback: The input fields change color slightly when clicked (focus state), guiding the user.
• Fully Responsive: The form width adjusts automatically to fit smartphones, tablets, and desktops.
• Easy to Customize: You can change the colors and fonts to match your brand with just a few CSS tweaks.

Live Preview

This is how the form looks. It is purely HTML and CSS for the design.

Get in Touch

HTML & CSS Code

Copy the code below and paste it into your blog post or page. This code creates the layout and style.

<style>
.contact-container {
  background: #ffffff;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  font-family: 'Segoe UI', sans-serif;
}

.contact-container h3 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

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

.minimal-form input, 
.minimal-form textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  font-size: 14px;
  color: #555;
  outline: none;
  transition: 0.3s;
  box-sizing: border-box; /* Prevents padding from breaking layout */
}

.minimal-form input:focus, 
.minimal-form textarea:focus {
  border-color: #6c5ce7; /* Focus Color */
  box-shadow: 0 0 8px rgba(108, 92, 231, 0.1);
}

.submit-btn {
  width: 100%;
  padding: 15px;
  background-color: #6c5ce7; /* Button Color */
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.submit-btn:hover {
  background-color: #5b4cc4;
  transform: translateY(-2px);
}
</style>

<!-- HTML Structure -->
<div class="contact-container">
    <h3>Get in Touch</h3>
    <form action="#" class="minimal-form">
        <div class="form-group">
            <input type="text" placeholder="Your Name" required>
        </div>
        <div class="form-group">
            <input type="email" placeholder="Your Email" required>
        </div>
        <div class="form-group">
            <textarea rows="5" placeholder="Your Message" required></textarea>
        </div>
        <button type="submit" class="submit-btn">Send Message</button>
    </form>
</div>

How to Customize

Here are a few ways to make this form match your blog's theme:

1. Changing the Theme Color

The current theme color is a soft purple. To change it:
Find border-color: #6c5ce7; (for input focus) and background-color: #6c5ce7; (for the button).
Replace #6c5ce7 with your own color code (e.g., #2ecc71 for Green).

2. Adjusting the Width

If you want a wider or narrower form, look for .contact-container and change max-width: 500px; to your desired size.

3. Making Inputs Rounded

If you prefer fully rounded inputs (pill shape), change border-radius: 5px; to border-radius: 30px; in the input and button styles.

Conclusion

A minimalist contact form not only looks professional but also improves user experience by being easy to read and fill out. Simply copy the code above and add it to your "Contact" page widget. Happy coding!