Free Lead Capture Form Template — Copy-Paste HTML Code

Q: Is this lead capture form template free?

Yes, completely free. Copy, modify, and use it however you like. The only cost is the FormBackend service for receiving and managing leads, which starts with a free tier.

Q: How do I get my leads after someone submits the form?

FormBackend emails you the moment a lead comes in and stores every lead in your dashboard. You can also push leads straight to Google Sheets, your CRM, Mailchimp, or Slack using FormBackend's integrations and webhooks.

Q: Does this work on landing pages and static sites?

Yes. This is plain HTML and CSS with no dependencies, so it drops into any landing page builder, static site, WordPress, Webflow, or Framer page.

Q: Can I redirect leads to a thank-you page after submitting?

Yes. FormBackend supports custom redirects, so you can send leads to a thank-you page, a calendar booking link, or a downloadable resource after they submit.

A lead capture form turns anonymous visitors into contacts you can follow up with. In this guide you’ll get a production-ready HTML lead capture form template you can copy and paste into any landing page in minutes. It collects the fields that matter for qualification — name, email, company, and interest — with modern styling, validation, and seamless delivery through FormBackend.

Complete Lead Capture Form Code

Here’s a fully-styled, ready-to-use lead capture 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>Get Started</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
        }
        .container { background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); padding: 40px; max-width: 460px; width: 100%; }
        h1 { font-size: 26px; margin-bottom: 8px; color: #1a202c; }
        .form-subtitle { font-size: 14px; color: #718096; margin-bottom: 28px; }
        .form-group { margin-bottom: 18px; }
        label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #2d3748; }
        .required::after { content: " *"; color: #e53e3e; }
        input, select { width: 100%; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px; font-family: inherit; transition: all 0.3s ease; }
        input:focus, select:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.12); }
        button { width: 100%; padding: 14px 20px; background: #667eea; color: #fff; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.3s ease; margin-top: 8px; }
        button:hover { background: #5a67d8; }
        .privacy { font-size: 12px; color: #a0aec0; text-align: center; margin-top: 14px; }
        .success-message, .error-message { display: none; padding: 14px; border-radius: 6px; margin-bottom: 18px; font-size: 14px; }
        .success-message { background: #c6f6d5; color: #22543d; }
        .error-message { background: #fed7d7; color: #742a2a; }
    </style>
</head>
<body>
    <div class="container">
        <h1>See it in action</h1>
        <p class="form-subtitle">Tell us a bit about you and we'll be in touch.</p>

        <div class="success-message" id="successMessage">Thanks! We've got your details and will reach out soon.</div>
        <div class="error-message" id="errorMessage">There was an issue submitting the form. Please try again.</div>

        <form id="leadForm" action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
            <div class="form-group">
                <label for="name" class="required">Full Name</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email" class="required">Work Email</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="company">Company</label>
                <input type="text" id="company" name="company">
            </div>
            <div class="form-group">
                <label for="interest" class="required">What are you interested in?</label>
                <select id="interest" name="interest" required>
                    <option value="">Select one...</option>
                    <option value="Product demo">Product demo</option>
                    <option value="Pricing">Pricing</option>
                    <option value="Partnership">Partnership</option>
                    <option value="Just browsing">Just browsing</option>
                </select>
            </div>

            <button type="submit">Get Started</button>
            <p class="privacy">We respect your privacy. Unsubscribe anytime.</p>
        </form>
    </div>

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

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

            const name = document.getElementById('name').value.trim();
            const email = document.getElementById('email').value.trim();

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

            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

Step 1: Copy the Code

Copy the entire HTML above and save it as lead-capture-form.html. Drop it into your landing page, embed it, or test it locally first.

Step 2: Create a FormBackend Account

Create a free account at FormBackend, where every lead will be received and stored.

Step 3: Update the Form Action URL

Replace YOUR_FORM_ID with your real FormBackend form ID so the action reads https://www.formbackend.com/f/abc123xyz.

Your lead capture form is now live.

Lead Capture Form Variations

Variation 1: Minimal Email Capture

For the top of a landing page where less friction means more leads:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="email" name="email" placeholder="Enter your email" required>
    <button type="submit">Get Early Access</button>
</form>

Variation 2: Lead Capture with Budget Qualification

Add qualification fields to score leads before you reply:

<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="Work email" required>
    <input type="text" name="company" placeholder="Company">
    <select name="budget" required>
        <option value="">Estimated budget...</option>
        <option value="Under $1k">Under $1k</option>
        <option value="$1k-$5k">$1k-$5k</option>
        <option value="$5k+">$5k+</option>
    </select>
    <button type="submit">Request a Call</button>
</form>

Variation 3: Gated Content Lead Capture

Collect a lead in exchange for a download, then redirect to the asset:

<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>
    <input type="hidden" name="resource" value="2026 Pricing Guide">
    <button type="submit">Download the Guide</button>
</form>

How to Customize This Template

Match your brand: Change the gradient background on body and the button background: #667eea; to your colors.

Add or remove fields: Duplicate a form-group div and edit the name, id, and label. Remove the company field if you don’t need it.

Qualify leads: Add a dropdown for budget, team size, or timeline to score leads automatically.

Redirect after submit: Configure a custom redirect in FormBackend to send leads to a thank-you page or booking link.

Adjust width: Change max-width: 460px; to fit your layout.

Integration with FormBackend

FormBackend lets you manage leads without building a backend. Once leads arrive, you can:

See every lead in one organized dashboard
Get an email notification for each new lead
Push leads to Google Sheets, Mailchimp, your CRM, or Slack
Trigger webhooks and Zapier automations
Export your full lead list as CSV

For more on integrations and managing submissions, see the FormBackend documentation.

Frequently Asked Questions

Is this lead capture form template free? Yes, completely free. The only cost is FormBackend for receiving and managing leads, which starts with a free tier.

How do I get my leads after someone submits the form? FormBackend emails you instantly and stores every lead. You can also push leads to Google Sheets, your CRM, Mailchimp, or Slack.

Can I send leads to my CRM or email tool automatically? Yes. FormBackend connects to Zapier, Mailchimp, Google Sheets, and supports webhooks.

How do I stop spam and fake leads? FormBackend includes spam protection on every plan and supports Cloudflare Turnstile, reCAPTCHA, and hCaptcha.

Does this work on landing pages and static sites? Yes. It’s plain HTML and CSS with no dependencies.

Can I redirect leads to a thank-you page after submitting? Yes. FormBackend supports custom redirects to a thank-you page, calendar link, or downloadable resource.

More form templates

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

Contact Form Template — Collect name, email, subject, and message
Demo Request Form Template — Let prospects request a product demo
Newsletter Signup Form Template — Grow your email list
Quote Request Form Template — Let prospects request a custom quote

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