Forms Bootstrap 5Free
Contact page — Bootstrap forms snippet: a hand-crafted, open-source Bootstrap 5 form. HTML included, ready to copy.
1.5k views16 downloads
gosnippets.com/preview/contact-page-—-bootstrap-forms-snippet
Source Code
1<!doctype html>
2<html lang="en">
3
4<head>
5 <!-- Required meta tags -->
6 <meta charset="utf-8">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <!-- Bootstrap CSS -->
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 <!-- Optional JavaScript; choose one of the two! -->
64
65 <!-- Option 1: Bootstrap Bundle with Popper -->
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 <!-- Option 2: Separate Popper and Bootstrap JS -->
69 <!--
70 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
71 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
72 -->
73</body>
74
75</html>
76More Forms snippets
Bootstrap 5 simple login form with social login
Free Bootstrap 5 form snippet — Bootstrap 5 simple login form with social login. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
FormsView →
Bootstrap 5 Login Form UI Design snippets
Bootstrap 5 Login Form UI Design snippets: a hand-crafted, open-source Bootstrap 5 form. HTML & CSS included, ready to copy.
FormsView →
Bootstrap 5 Fancy user login form snippets
Free Bootstrap 5 form snippet — Bootstrap 5 Fancy user login form snippets. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
FormsView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.