Can I use "Contact page — Bootstrap forms snippet" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Contact page — Bootstrap forms snippet — Free Forms Snippet (Bootstrap 5)

Loading…

1<!doctype html> 2<html lang="en"> 3 4<head> 5  6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8  9 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 10 <title>Bootstrap 5 - contact form</title> 11</head> 12 13<body> 14 <div class="container-full"> 15 <div class="row g-0"> 16 <div class="col-12"> 17 <div class="text-center"> 18 <h1 class="text-center bg-secondary p-2 text-white">Contact page</h1> 19 <a href="#" class="p-2 fs-3 border-bottom">Back</a> 20 </div> 21 </div> 22 </div> 23 </div> 24 25 <div class="container"> 26 <form class="row g-2 mt-4"> 27 <div class="col-12 col-lg-6"> 28 <label for="name" class="form-label">*Name</label> 29 <input type="text" class="form-control" id="name" name="name" placeholder="Your name" required> 30 </div> 31 <div class="col-12 col-lg-6"> 32 <label for="email" class="form-label">*Email address</label> 33 <input type="email" class="form-control" id="email" name="email" placeholder="Email address" required> 34 </div> 35 <div class="col-12"> 36 <label for="subject" class="form-label">Subject</label> 37 <select id="subject" name="subject" class="form-select" aria-label="Subject"> 38 <option selected>Select a item</option> 39 <option value="1">One</option> 40 <option value="2">Two</option> 41 <option value="3">Three</option> 42 </select> 43 </div> 44 <div class="col-12"> 45 <label for="comment">*Comments</label> 46 <textarea class="form-control" placeholder="Leave a comment here" name="comment" id="comment" style="height: 120px" required></textarea> 47 </div> 48 <div class="col-12"> 49 <hr> 50 <button type="submit" class="p-2 px-4 btn btn-success" name="button" id="button">Send</button> 51 </div> 52 </form> 53 </div> 54 55 <div class="container-full"> 56 <div class="row g-0"> 57 <div class="col-12"> 58 <p class="text-center p-2 mt-5">Thank you!</p> 59 </div> 60 </div> 61 </div> 62 63  64 65  66 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> 67 68  69  73</body> 74 75</html> 76

Contact page — Bootstrap forms snippet

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Forms snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection