Mythradon Lead Capture Form (Bootstrap Example)

This example demonstrates how to build a styled Web-to-Lead Capture Form using the Bootstrap framework. Compared to the simpler Lead Capture Sample Form, this version provides a more polished appearance and follows a cleaner structure by separating the JavaScript logic from the HTML markup.

Files Included

• web-to-lead-bootstrap.html — The main HTML file containing the form layout and Bootstrap styling.
• /assets/js/script.js — A separate JavaScript file handling form logic and submission.

Features This form includes built-in validation to ensure that all required fields are completed before submission:

Upon successful submission, the user is shown a styled confirmation message:

This layout and approach not only improves usability and visual appeal but also makes the codebase easier to manage and extend.

<!DOCTYPE html>
<html>

<head>
    <title>Web to Lead Boostrap Sample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Jquery from Google CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <!-- Bootstrap CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
        crossorigin="anonymous"></script>

    <style>
        h1 {
            margin-bottom: 15px !important;
        }

        .contact-section {
            box-sizing: border-box;
            max-width: 1080px;
            padding: 100px 34px;
            margin: auto;
            position: relative;
            z-index: 100;
        }
    </style>
    <script src="assets/js/script.js"></script>
</head>

<body>
    <div class="container-fluid p-0">
        <div class="body">
            <div class="content">
                <div id="contact-section" class="contact-section">
                    <h1 class="fw-bold">CONTACT US</h1>
                    <p>PLEASE COMPLETE THE FORM BELOW</p>
                    <div class="contact-form">
                        <form id="form" class="needs-validation" novalidate>
                            <div class="mb-3">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="first-name" class="form-label">First Name *</label>
                                        <input type="text" class="form-control" name="first-name" required
                                            maxlength="30">
                                        <div class="invalid-feedback">
                                            Please provide a First Name.
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="last-name" class="form-label">Last Name *</label>
                                        <input type="text" class="form-control" name="last-name" required
                                            maxlength="30">
                                        <div class="invalid-feedback">
                                            Please provide a Last Name.
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="email" class="form-label">Email Address *</label>
                                        <input type="email" class="form-control" name="email" required>
                                        <div class="invalid-feedback">
                                            Please provide a Email Address.
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="phone" class="form-label">Phone *</label>
                                        <input type="text" class="form-control" name="phone" required maxlength="30">
                                        <div class="invalid-feedback">
                                            Please provide a Phone Number.
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="company-name" class="form-label">Company Name</label>
                                <input type="text" class="form-control" name="company-name">
                            </div>
                            <div class="mb-3">
                                <label for="description" class="form-label">Description *</label>
                                <textarea class="form-control" rows="3" name="description" required></textarea>
                                <div class="invalid-feedback">
                                    Please provide a Description.
                                </div>
                            </div>
                            <div id="alert-success" class="alert alert-success" role="alert" style="display: none;">
                                Thank you for your enquiry. We'll contact you soon!
                            </div>
                            <div class="mb-3 d-flex">
                                <button type="button" id="submit" class="btn btn-dark rounded-pill px-4 py-2">
                                    Submit
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Note

Replace the text url: "**YOUR LEAD CAPTURE URL**" on line 34 with the URL value from your Lead Capture Entry Point.

$(document).ready(function () {

    $("#submit").click(function () {
        $(this).attr("disabled", "disabled");
        var form = $('#form');
        var isValid = form.get(0).checkValidity();
        form.addClass('was-validated');

        if (!isValid) {
            $(this).attr("disabled", false);
            return;
        }

        // Note to add fields - Modify the Lead Capture API in Mythradon

        var first_name = $("input[name='first-name']").val();
        var last_name = $("input[name='last-name']").val();
        var email = $("input[name='email']").val();
        var company_name = $("input[name='company-name']").val();
        var description = $("textarea[name='description']").val();
        var phone = $("input[name='phone']").val();

        var data = {
            firstName: first_name,
            lastName: last_name,
            emailAddress: email,
            accountName: company_name,
            description: description,
            phoneNumber: phone
        };

        $.ajax({
            type: 'POST',
            url: "**YOUR LEAD CAPTURE URL**",
            data: JSON.stringify(data),
            contentType : 'application/json',
            error: function (e) {
                console.log(e);
            }
        })
        .done(function (data) {
            showAlert();
            form.removeClass('was-validated');
            resetForm();
            $("#submit").removeAttr('disabled'); 
        });
    });

    function showAlert() {
        $("#alert-success").fadeIn(300);
        setTimeout(function() { 
            $("#alert-success").fadeOut(300); 
        }, 5000);
    }

    function resetForm () {
        $("#form input").val('');
        $("#form textarea").val('');
    }

});

---

See also

• Lead Capture Entry Point

• Web-to-Lead Sample Form

• Mythradon Bookshelf Home

• Mythradon Basics

• Mythradon Marketing
• Mythradon Sales
• Mythradon Service
• Mythradon System Administration
• Mythradon Tools

---