Free Demo Request Form Template — Copy-Paste HTML Code

Q: Is this demo request 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 demo requests, which starts with a free tier.

Q: How do I get notified when someone requests a demo?

FormBackend emails you the moment a request arrives and stores it in your dashboard. You can also push requests to your CRM, Slack, or Google Sheets so your sales team can follow up fast.

Q: Can I redirect prospects to a calendar booking link after they submit?

Yes. Use FormBackend's custom redirect to send prospects straight to a scheduling page like Calendly after they request a demo.

Q: Does this work on a SaaS landing page?

Absolutely. It's plain HTML and CSS with no dependencies, so it drops into any landing page builder, static site, Webflow, or Framer page.

A demo request form turns interested visitors into qualified sales conversations. In this guide you’ll get a production-ready HTML demo request form template you can copy and paste into any website in minutes. It captures the qualification details your sales team needs — company, team size, and use case — with modern styling, validation, and seamless delivery through FormBackend.

Complete Demo Request Form Code

Here’s a fully-styled, ready-to-use demo request 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>Request a Demo</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: 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, 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:focus, select:focus, textarea:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.12); }
        textarea { resize: vertical; min-height: 90px; }
        .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: #667eea; color: #fff; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.3s ease; margin-top: 10px; }
        button:hover { background: #5a67d8; }
        .success-message, .error-message { display: none; padding: 14px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; }
        .success-message { background: #c6f6d5; color: #22543d; }
        .error-message { background: #fed7d7; color: #742a2a; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Request a Demo</h1>
        <p class="form-subtitle">See how it works. We'll tailor the demo to your needs.</p>

        <div class="success-message" id="successMessage">Thanks! Our team will reach out to schedule your demo.</div>
        <div class="error-message" id="errorMessage">There was an issue submitting your request. Please try again.</div>

        <form id="demoForm" action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
            <div class="form-row">
                <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>

            <div class="form-row">
                <div class="form-group">
                    <label for="company" class="required">Company</label>
                    <input type="text" id="company" name="company" required>
                </div>
                <div class="form-group">
                    <label for="team_size">Team Size</label>
                    <select id="team_size" name="team_size">
                        <option value="">Select...</option>
                        <option value="1-10">1-10</option>
                        <option value="11-50">11-50</option>
                        <option value="51-200">51-200</option>
                        <option value="200+">200+</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="use_case" class="required">What are you hoping to solve?</label>
                <textarea id="use_case" name="use_case" placeholder="Tell us about your use case so we can tailor the demo." required></textarea>
            </div>

            <button type="submit">Request Demo</button>
        </form>
    </div>

    <script>
        const form = document.getElementById('demoForm');
        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();
            const company = document.getElementById('company').value.trim();

            if (!name || !email || !company) {
                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 demo-request-form.html. Drop it onto your landing page, embed it, or test locally first.

Step 2: Create a FormBackend Account

Create a free account at FormBackend, where every demo request 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 demo request form is now live.

Demo Request Form Variations

Variation 1: Simple Demo Request

A short version for the top of a landing page:

<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" required>
    <button type="submit">Book a Demo</button>
</form>

Variation 2: Demo Request with Preferred Time

Let prospects suggest when they’re free:

<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" required>
    <input type="date" name="preferred_date">
    <input type="time" name="preferred_time">
    <button type="submit">Request Demo</button>
</form>

Variation 3: Demo Request with Current Tooling

Understand what the prospect uses today:

<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" required>
    <input type="text" name="current_tools" placeholder="What do you use today?">
    <button type="submit">Request Demo</button>
</form>

How to Customize This Template

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

Adjust qualification: Edit the team size options or add fields for budget, role, or timeline to score leads.

Redirect to scheduling: Set a custom redirect in FormBackend to send prospects to Calendly or your booking page after submit.

Route to sales: Use FormBackend integrations to push requests into your CRM or a sales Slack channel.

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

Integration with FormBackend

FormBackend lets you manage demo requests without a backend. Once requests arrive, you can:

View every request in one organized dashboard
Get an email notification for each new request
Push requests to your CRM, Slack, or Google Sheets
Auto-reply to confirm and share scheduling options
Export requests as CSV

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

Frequently Asked Questions

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

How do I get notified when someone requests a demo? FormBackend emails you instantly and stores each request. You can also push requests to your CRM, Slack, or Google Sheets.

Can I qualify prospects before the call? Yes. The template includes company, team size, and use-case fields.

Can I redirect prospects to a calendar booking link after they submit? Yes. Use FormBackend’s custom redirect to send prospects to a scheduling page.

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

Does this work on a SaaS landing page? Absolutely. It’s plain HTML and CSS with no dependencies.

More form templates

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

Lead Capture Form Template — Turn visitors into qualified leads
Contact Form Template — Collect name, email, and message
Quote Request Form Template — Let prospects request a custom quote
Booking Form Template — Let customers request appointments

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