Modern Responsive Contact Form | Free Source Code (HTML & CSS)

In this post, I am sharing a clean, modern, and fully responsive contact form. Whether you are building a personal portfolio or a business landing page, this form is designed to look great on all devices, from mobile phones to desktop monitors.

Features

• Modern UI: A clean, minimalist design that fits any website style.
• Fully Responsive: Optimized for mobile, tablet, and desktop screens.
• Easy to Integrate: Well-commented code that is easy to customize.

---

The Source Code

1. HTML Structure

<!-- Main Container -->
<div class="contact-container">
    <h2>Contact Us</h2>
    <form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
        <!-- Name Field -->
        <input type="text" name="name" placeholder="Full Name" required>
        
        <!-- Email Field -->
        <input type="email" name="email" placeholder="Email Address" required>
        
        <!-- Message Area -->
        <textarea name="message" placeholder="Write your message here..." rows="5" required></textarea>
        
        <!-- Submit Button -->
        <button type="submit">Send Message</button>
    </form>
</div>

2. CSS Styles

/* Contact form container */
.contact-container {
    background: #ffffff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px;
    margin: 50px auto;
}

/* Input and Textarea fields */
input, textarea {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
}

/* Submit button */
button {
    background-color: #28a745;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 8px;
    width: 100%;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s;
}

button:hover {
    background-color: #218838;
}

/* Responsive design */
@media (max-width: 600px) {
    .contact-container {
        padding: 20px;
        width: 90%;
    }
}

---

How to Integrate

1. Copy the HTML code into your desired page.
2. Add the CSS code to your website's stylesheet or within a <style> tag.
3. Pro Tip: This form is a frontend component. To make it functional (to receive messages), you can connect it to a service like Formspree. Simply replace "YOUR_FORM_ID" with your unique endpoint URL from Formspree.

Final Thoughts

Feel free to customize the colors and fonts to match your website branding. If you have any questions or run into issues during integration, leave a comment below and I’ll be happy to help!