Mini Contact Form Footer Template

Make it effortless for users to reach out with this footer featuring a built-in mini contact form.

This template is designed to capture inquiries and leads by placing a simple contact form in one of the most visible and consistent locations on your website, the footer. It's perfect for service-based businesses, agencies, and consultants.

Screenshot of a footer with a compact contact form on one side and company contact details and links on the other.

Get Source Code Preview

About this Mini Contact Form Footer Template

By embedding a contact form directly in the footer, you remove the need for your users to navigate to a separate "Contact Us" page. This reduction in steps can significantly increase the number of inquiries you receive. This template provides a clean, two-column layout that presents the form alongside essential company information and navigation links. The design is fully responsive and ensures the form is easy to use on any device.

Features

Embedded Contact Form: A compact form with fields for name, email, and a message.
Accessible by Default: Form inputs are properly associated with label elements for screen reader compatibility.
Balanced Layout: Uses CSS Grid to create a two-column layout that neatly balances the form with other footer content.
Spam Prevention Note: Includes a placeholder for reCAPTCHA or other spam prevention services, which adds an extra layer of protection against spam bots and fake entries.
Responsive Design: The columns stack gracefully on mobile screens, making the form usable on any device.

Ideal Use Cases

Service-based businesses (consultants, contractors, etc.).
Creative agencies and freelance portfolios.
Corporate websites for quick inquiries.
Any site wanting to provide a low-friction contact method.

Code Breakdown

The main section, .footer-form__main, is a CSS Grid container that defaults to a single column and switches to a two-column layout on larger screens. One column contains traditional footer links and contact details, while the other is dedicated to the form. All form elements are styled for clarity and usability. The separate .footer-form__bottom bar uses Flexbox to handle the copyright and social media links.

Note: This template provides the HTML and CSS for the form's appearance. To make it functional (i.e., to actually send emails), it must be connected to a back-end script (like PHP, Node.js, etc.) or a third-party form service (like Formspree or Formspark).

Code

Here's the full code for the footer template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini Contact Form Footer</title>
    <style>
        :root {
            --footer-bg: #2d3436;
            --footer-text: #dfe6e9;
            --footer-heading: #ffffff;
            --footer-link-hover: #ffffff;
            --footer-border: #636e72;
            --form-button-bg: #0984e3;
            --form-button-text: #ffffff;
        }

/* Basic body styles */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        main {
            flex-grow: 1;
        }

.container {
            width: 90%;
            max-width: 1140px;
            margin-left: auto;
            margin-right: auto;
        }

.main-content {
            padding: 2rem 0;
        }

/* FOOTER STYLES START HERE */
        
        .footer-form {
            background-color: var(--footer-bg);
            color: var(--footer-text);
            padding: 3rem 0;
            font-size: 0.95rem;
            line-height: 1.6;
        }

.footer-form__main {
            display: grid;
            grid-template-columns: 1fr; /* Mobile-first */
            gap: 3rem;
            padding-bottom: 2.5rem;
            border-bottom: 1px solid var(--footer-border);
        }

.footer-form__info h3,
        .footer-form__form-section h3 {
            color: var(--footer-heading);
            font-size: 1.25rem;
            margin: 0 0 1.5rem 0;
        }

.footer-form__info p { margin: 0 0 1rem 0; }
        .footer-form__info a {
            color: var(--footer-text);
            text-decoration: none;
            transition: color 0.2s;
        }
        .footer-form__info a:hover { color: var(--footer-link-hover); text-decoration: underline; }
        
        .footer-form__form .form-group {
            margin-bottom: 1rem;
        }
        
        .footer-form__form label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .footer-form__form .form-control {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid var(--footer-border);
            background-color: #555;
            color: #fff;
            border-radius: 6px;
            font-size: 1rem;
            box-sizing: border-box;
        }
        .footer-form__form .form-control:focus {
            outline: 2px solid var(--form-button-bg);
            border-color: var(--form-button-bg);
        }

.footer-form__form textarea.form-control {
            min-height: 100px;
            resize: vertical;
        }
        
        .footer-form__submit-button {
            width: 100%;
            background-color: var(--form-button-bg);
            color: var(--form-button-text);
            border: none;
            padding: 0.875rem;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .footer-form__submit-button:hover { opacity: 0.85; }
        
        .footer-form__spam-notice {
            font-size: 0.8rem;
            text-align: center;
            margin-top: 1rem;
        }

.footer-form__bottom {
            padding-top: 1.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
            text-align: center;
            font-size: 0.875rem;
        }
        
        @media (min-width: 992px) {
            .footer-form__main {
                grid-template-columns: 1fr 1fr;
            }
        }
    </style>
</head>
<body>
    <main>
        <div class="container main-content">
            <h1>Mini Contact Form Footer</h1>
            <p>Make it easy for users to send a message from any page.</p>
        </div>
    </main>

<footer class="footer-form" role="contentinfo">
        <div class="container">
            <div class="footer-form__main">
                <div class="footer-form__info">
                    <h3>Contact Information</h3>
                    <p>
                        Have a question or a project in mind? Drop us a line. We'd love to hear from you.
                    </p>
                    <p>
                        <strong>Email:</strong> <a href="mailto:info@yoursite.com">info@yoursite.com</a><br>
                        <strong>Phone:</strong> <a href="tel:+1555010203">(555) 010-2030</a>
                    </p>
                    <p>
                        123 Creative Way<br>
                        Design City, DC 12345
                    </p>
                </div>
                <div class="footer-form__form-section">
                    <h3>Send a Quick Message</h3>
                    
                    <form class="footer-form__form" action="#" method="POST">
                        <div class="form-group">
                            <label for="footer-name">Your Name</label>
                            <input type="text" id="footer-name" name="name" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="footer-email">Your Email</label>
                            <input type="email" id="footer-email" name="email" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="footer-message">Message</label>
                            <textarea id="footer-message" name="message" class="form-control" required></textarea>
                        </div>
                        <button type="submit" class="footer-form__submit-button">Send Message</button>
                        <p class="footer-form__spam-notice">
                            This site is protected by reCAPTCHA and the Google Privacy Policy applies.
                        </p>
                    </form>
                </div>
            </div>
            <div class="footer-form__bottom">
                <p>&copy; 2025 Your Company. All Rights Reserved.</p>
            </div>
        </div>
    </footer>
</body>
</html>

View Output