Free Contact Form Template — Copy-Paste HTML Code

A contact form is one of the most important elements on any website. It’s how visitors reach out, ask questions, and generate leads for your business. In this guide, you’ll get a production-ready HTML contact form template that you can copy and paste directly into your website in minutes. The template includes modern styling, form validation, and works seamlessly with FormBackend to receive submissions.

Complete Contact Form Code

Here’s a fully-styled, ready-to-use contact form you can copy into any HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            padding: 40px;
            max-width: 500px;
            width: 100%;
        }

        h1 {
            font-size: 28px;
            margin-bottom: 10px;
            color: #1a202c;
        }

        .form-subtitle {
            font-size: 14px;
            color: #718096;
            margin-bottom: 30px;
        }

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

        label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #2d3748;
        }

        .required::after {
            content: " *";
            color: #e53e3e;
        }

        input[type="text"],
        input[type="email"],
        input[type="tel"],
        select,
        textarea {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            font-size: 14px;
            font-family: inherit;
            transition: all 0.3s ease;
            background: #fff;
        }

        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="tel"]:focus,
        select:focus,
        textarea:focus {
            outline: none;
            border-color: #3182ce;
            box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
        }

        textarea {
            resize: vertical;
            min-height: 120px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        @media (max-width: 480px) {
            .form-row {
                grid-template-columns: 1fr;
            }

            .container {
                padding: 25px;
            }
        }

        button {
            width: 100%;
            padding: 14px 20px;
            background: #3182ce;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s ease;
            margin-top: 10px;
        }

        button:hover {
            background: #2c5aa0;
        }

        button:active {
            transform: scale(0.98);
        }

        .success-message {
            display: none;
            background: #c6f6d5;
            color: #22543d;
            padding: 14px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 14px;
        }

        .error-message {
            display: none;
            background: #fed7d7;
            color: #742a2a;
            padding: 14px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Get in Touch</h1>
        <p class="form-subtitle">We'd love to hear from you. Send us a message!</p>

        <div class="success-message" id="successMessage">
            Thank you for your message! We'll get back to you soon.
        </div>

        <div class="error-message" id="errorMessage">
            There was an issue submitting your form. Please try again.
        </div>

        <form id="contactForm" action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
            <div class="form-row">
                <div class="form-group">
                    <label for="name" class="required">Name</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="email" class="required">Email</label>
                    <input type="email" id="email" name="email" required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="phone">Phone (Optional)</label>
                    <input type="tel" id="phone" name="phone">
                </div>
                <div class="form-group">
                    <label for="subject" class="required">Subject</label>
                    <select id="subject" name="subject" required>
                        <option value="">Select a subject...</option>
                        <option value="General Inquiry">General Inquiry</option>
                        <option value="Support">Support</option>
                        <option value="Billing">Billing</option>
                        <option value="Partnership">Partnership</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="message" class="required">Message</label>
                <textarea id="message" name="message" required></textarea>
            </div>

            <button type="submit">Send Message</button>
        </form>
    </div>

    <script>
        const form = document.getElementById('contactForm');
        const successMessage = document.getElementById('successMessage');
        const errorMessage = document.getElementById('errorMessage');

        form.addEventListener('submit', function(e) {
            // Reset messages
            successMessage.style.display = 'none';
            errorMessage.style.display = 'none';

            // Basic validation
            const name = document.getElementById('name').value.trim();
            const email = document.getElementById('email').value.trim();
            const message = document.getElementById('message').value.trim();

            if (!name || !email || !message) {
                errorMessage.textContent = 'Please fill in all required fields.';
                errorMessage.style.display = 'block';
                e.preventDefault();
                return false;
            }

            // Email validation
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                errorMessage.textContent = 'Please enter a valid email address.';
                errorMessage.style.display = 'block';
                e.preventDefault();
                return false;
            }
        });
    </script>
</body>
</html>

How to Use This Template

Getting your contact form live is simple. Follow these three steps:

Step 1: Copy the Code

Copy the entire HTML code above and save it as contact-form.html on your computer. You can then either: - Upload it directly to your website’s server - Embed it within your existing website pages - Test it locally in your browser first

Step 2: Create a FormBackend Account

If you don’t have one already, create a free account at FormBackend. This is where all your contact form submissions will be received and stored.

Step 3: Update the Form Action URL

Replace YOUR_FORM_ID in the form action with your actual FormBackend form ID. You’ll find this in your FormBackend dashboard after creating a form. The action will look like: https://www.formbackend.com/f/abc123xyz

That’s it! Your contact form is now live and ready to receive submissions.

Contact Form Variations

Different use cases sometimes require different layouts. Here are three variations you can customize further:

Variation 1: Minimal Contact Form

For pages where space is limited, use this streamlined version:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <textarea name="message" placeholder="Your Message" required></textarea>
    <button type="submit">Send</button>
</form>

Variation 2: Contact Form with Department Routing

Use this version to route inquiries to different departments:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <select name="department" required>
        <option value="Sales">Sales</option>
        <option value="Support">Support</option>
        <option value="HR">Human Resources</option>
    </select>
    <textarea name="message" placeholder="Message" required></textarea>
    <button type="submit">Submit</button>
</form>

Variation 3: Contact Form with File Upload

Allow visitors to attach files (like resumes or project files):

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST" enctype="multipart/form-data">
    <input type="text" name="name" placeholder="Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <textarea name="message" placeholder="Message" required></textarea>
    <label>Attach File:</label>
    <input type="file" name="attachment">
    <button type="submit">Submit</button>
</form>

How to Customize This Template

The contact form template is designed to be flexible. Here are common customizations:

Change the button color: Find background: #3182ce; in the CSS and change it to your brand color. For example, #ff6b6b for red or #51cf66 for green.

Add more fields: Simply duplicate a form-group div and change the name, id, and label text. The form backend will automatically capture new fields.

Remove optional fields: Don’t need the phone field? Delete the entire form-group that contains the phone input.

Adjust the width: Change max-width: 500px; to make the form wider or narrower.

Customize the subject options: Edit the <option> values inside the subject <select> to match your business needs.

Add a logo or branding: Insert an <img> tag before the <h1> with your company logo.

Change placeholder text: Update the form heading and subtitle by editing “Get in Touch” and “We’d love to hear from you.”

Integration with FormBackend

FormBackend provides a simple way to manage contact form submissions without needing a backend. Once submissions arrive in your dashboard, you can:

View all submissions in a clean, organized interface
Export data as CSV for use in spreadsheets
Set up email notifications when new submissions arrive
Customize confirmation messages shown to users
Set up webhooks to integrate with other services

For more details on receiving emails from your contact form and managing submissions, check out the FormBackend documentation.

Frequently Asked Questions

Is this contact form template really free? Yes, completely free. You can use and modify this template however you like. The only cost is the FormBackend service for receiving and managing submissions, which starts with a free tier.

How do I receive contact form submissions by email? FormBackend automatically sends email notifications when you receive new submissions. You can configure email notifications in your FormBackend dashboard settings. You can also set up automatic replies to your visitors.

Can I add a CAPTCHA to prevent spam? Yes. FormBackend supports multiple CAPTCHA options including Cloudflare Turnstile, reCAPTCHA, and hCaptcha. This helps prevent automated spam submissions. See the Cloudflare Turnstile integration guide for implementation details.

Does this work on static websites and WordPress? Absolutely. This is plain HTML and JavaScript, so it works on any website platform — static HTML sites, WordPress, Webflow, Wix, Squarespace, and more. The form simply sends data to FormBackend when submitted.

Can I customize the styling to match my website? Completely. All styling is inline CSS in the template, so you can edit colors, fonts, spacing, and layout directly. You can also remove the <style> section and move the CSS to your site’s stylesheet.

What happens after someone submits the form? The form data is sent to FormBackend where it’s stored in your dashboard. You can view, export, or process submissions as needed. You can also set up email notifications and configure custom redirect pages.

More form templates

Looking for a different form type? Browse our full collection of free HTML form templates, or try one of these:

Order Form Template — Accept product orders with quantities and shipping details
Feedback Form Template — Customer feedback with star ratings and comments
Registration Form Template — Event, workshop, and conference signups
Survey Form Template — Multiple choice, rating scales, and open-ended questions

Need a custom form? Use our HTML form generator to build one visually.