Bootstrap Form Examples and Templates | FormSubmit | FormSubmit

Explore our collection of Bootstrap form templates and examples. Each template is built with Bootstrap 5, featuring responsive design and built-in validation.

Ready to Power Your Forms?

FormSubmit handles form submissions without any backend code. Get started for free and receive 50 submissions every month!

Learn More Sign Up Free

Basic Bootstrap Form

A clean Bootstrap form with validation:

HTML

<!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<form action="https://formsubmit.co/[email protected]" method="POST" class="needs-validation" novalidate>
    <div class="mb-3">
        <label for="name" class="form-label">Name</label>
        <input type="text" class="form-control" id="name" name="name" required>
        <div class="invalid-feedback">
            Please enter your name
        </div>
    </div>
    <div class="mb-3">
        <label for="email" class="form-label">Email address</label>
        <input type="email" class="form-control" id="email" name="email" required>
        <div class="invalid-feedback">
            Please enter a valid email address
        </div>
    </div>
    <div class="mb-3">
        <label for="message" class="form-label">Message</label>
        <textarea class="form-control" id="message" name="message" rows="3" required></textarea>
        <div class="invalid-feedback">
            Please enter your message
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

JavaScript (Form Validation)

JAVASCRIPT

// Bootstrap form validation
(function () {
    'use strict'
    
    // Fetch all forms that need validation
    var forms = document.querySelectorAll('.needs-validation')
    
    // Loop over them and prevent submission
    Array.prototype.slice.call(forms)
        .forEach(function (form) {
            form.addEventListener('submit', function (event) {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }
                
                form.classList.add('was-validated')
            }, false)
        })
})()

Floating Label Form

A modern form with floating labels:

HTML

<form action="https://formsubmit.co/[email protected]" method="POST" class="needs-validation" novalidate>
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingEmail" name="email" placeholder="[email protected]" required>
        <label for="floatingEmail">Email address</label>
        <div class="invalid-feedback">
            Please enter a valid email address
        </div>
    </div>
    <div class="form-floating mb-3">
        <input type="password" class="form-control" id="floatingPassword" name="password" placeholder="Password" required>
        <label for="floatingPassword">Password</label>
        <div class="invalid-feedback">
            Please enter your password
        </div>
    </div>
    <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="rememberMe" name="remember">
        <label class="form-check-label" for="rememberMe">Remember me</label>
    </div>
    <button type="submit" class="btn btn-primary w-100">Sign in</button>
</form>

Inline Form

A compact inline form layout:

HTML

<form action="https://formsubmit.co/[email protected]" method="POST" class="row row-cols-lg-auto g-3 align-items-center">
    <div class="col-12">
        <label class="visually-hidden" for="inlineEmail">Email</label>
        <div class="input-group">
            <div class="input-group-text">@</div>
            <input type="email" class="form-control" id="inlineEmail" name="email" placeholder="Email">
        </div>
    </div>

    <div class="col-12">
        <label class="visually-hidden" for="inlinePassword">Password</label>
        <input type="password" class="form-control" id="inlinePassword" name="password" placeholder="Password">
    </div>

    <div class="col-12">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="inlineRemember" name="remember">
            <label class="form-check-label" for="inlineRemember">
                Remember me
            </label>
        </div>
    </div>

    <div class="col-12">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>

Pro Tip: Bootstrap's form validation works with FormSubmit out of the box. Just add your FormSubmit endpoint to the form's action attribute.

Ready to Power Your Forms?

FormSubmit handles form submissions without any backend code. Get started for free and receive 50 submissions every month!

Learn More Sign Up Free

Implementation Steps

Include Bootstrap CSS and JS in your project
Copy the HTML code for your chosen template
Add the validation JavaScript if using form validation
Replace the form action URL with your FormSubmit endpoint
Customize the form fields and styling to match your needs

Note: Make sure to include Bootstrap's CSS and JavaScript files in your project. The examples above use Bootstrap 5.3.0.