Contact page — Bootstrap forms snippet

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

Source Code

More Forms snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery