Bootstrap Form Examples and Templates | FormSubmit

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

Ship it

Ready to wire this form up?

FormSubmit handles submissions, spam filtering, file uploads, and email notifications — no backend code, no SDK. Pay-as-you-go credits.

Get started → Use the CLI

Basic Bootstrap Form

A clean Bootstrap form with validation:

HTML

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

<form action="https://formsubmit.co/your@email.com" 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/your@email.com" method="POST" class="needs-validation" novalidate>
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingEmail" name="email" placeholder="name@example.com" 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/your@email.com" 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.

Ship it

Ready to wire this form up?

FormSubmit handles submissions, spam filtering, file uploads, and email notifications — no backend code, no SDK. Pay-as-you-go credits.

Get started → Use the CLI

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.