How to create contact form in bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create a Contact Form in Bootstrap Quickly

To create a contact form in Bootstrap, use the form element with Bootstrap's form classes like form-control for inputs and btn btn-primary for the submit button. Wrap inputs inside mb-3 divs or use Bootstrap 5's grid system for layout and responsiveness.

📐

Syntax

A Bootstrap contact form uses the <form> tag with input fields styled by form-control. Each input is usually wrapped in a div with mb-3 for spacing. The submit button uses btn classes for styling.

form-control: styles input fields
mb-3: adds margin below inputs
btn btn-primary: styles the submit button

html

<form>
  <div class="mb-3">
    <label for="name" class="form-label">Name</label>
    <input type="text" class="form-control" id="name" placeholder="Enter your name">
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="name@example.com">
  </div>
  <div class="mb-3">
    <label for="message" class="form-label">Message</label>
    <textarea class="form-control" id="message" rows="3" placeholder="Your message"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Send</button>
</form>

Output

A simple vertical contact form with labeled fields for Name, Email, and Message, plus a blue 'Send' button.

💻

Example

This example shows a complete responsive contact form using Bootstrap 5. It includes labels, placeholders, and a submit button styled with Bootstrap classes.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Contact Form</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container py-5">
    <h2>Contact Us</h2>
    <form>
      <div class="mb-3">
        <label for="name" class="form-label">Name</label>
        <input type="text" class="form-control" id="name" placeholder="Enter your name" required>
      </div>
      <div class="mb-3">
        <label for="email" class="form-label">Email address</label>
        <input type="email" class="form-control" id="email" placeholder="name@example.com" required>
      </div>
      <div class="mb-3">
        <label for="message" class="form-label">Message</label>
        <textarea class="form-control" id="message" rows="4" placeholder="Your message" required></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Send</button>
    </form>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A clean, responsive contact form with fields for Name, Email, and Message, and a blue 'Send' button, all styled by Bootstrap.

⚠️

Common Pitfalls

Common mistakes when creating Bootstrap contact forms include:

Not using form-control class on inputs, which breaks styling.
Missing label tags, which hurts accessibility.
Forgetting to add required attribute for basic validation.
Not including Bootstrap CSS link, so styles don't apply.

Always check that your form fields have proper labels and classes for good user experience.

html

<!-- Wrong: Missing form-control class -->
<input type="text" id="name" placeholder="Name">

<!-- Right: With form-control class -->
<input type="text" class="form-control" id="name" placeholder="Name">

📊

Quick Reference

Bootstrap contact form essentials:

Element	Purpose	Bootstrap Class
<form>	Wraps the entire form	No class needed
<label>	Describes input field	form-label
<input> / <textarea>	User input fields	form-control
<div>	Wraps input and label for spacing	mb-3
<button>	Submit button	btn btn-primary

✅

Key Takeaways

Use Bootstrap's form-control class on inputs for consistent styling.

Wrap inputs and labels in a div with mb-3 for spacing.

Always include labels for accessibility and clarity.

Add required attributes for basic form validation.

Include Bootstrap CSS link to apply styles correctly.