"Bootstrap 5 form contact"
Bootstrap 4.1.1 Snippet by BrCodeSnippets

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>Bootstrap 5 - contact form</title> </head> <body> <div class="container-full"> <div class="row g-0"> <div class="col-12"> <div class="text-center"> <h1 class="text-center bg-secondary p-2 text-white">Contact page</h1> <a href="#" class="p-2 fs-3 border-bottom">Back</a> </div> </div> </div> </div> <div class="container"> <form class="row g-2 mt-4"> <div class="col-12 col-lg-6"> <label for="name" class="form-label">*Name</label> <input type="text" class="form-control" id="name" name="name" placeholder="Your name" required> </div> <div class="col-12 col-lg-6"> <label for="email" class="form-label">*Email address</label> <input type="email" class="form-control" id="email" name="email" placeholder="Email address" required> </div> <div class="col-12"> <label for="subject" class="form-label">Subject</label> <select id="subject" name="subject" class="form-select" aria-label="Subject"> <option selected>Select a item</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> <div class="col-12"> <label for="comment">*Comments</label> <textarea class="form-control" placeholder="Leave a comment here" name="comment" id="comment" style="height: 120px" required></textarea> </div> <div class="col-12"> <hr> <button type="submit" class="p-2 px-4 btn btn-success" name="button" id="button">Send</button> </div> </form> </div> <div class="container-full"> <div class="row g-0"> <div class="col-12"> <p class="text-center p-2 mt-5">Thank you!</p> </div> </div> </div> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <!-- Option 2: Separate Popper and Bootstrap JS --> <!-- <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> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> --> </body> </html>

Related: See More

Paper Kit
Contact Form
Bootstrap Contact Form
Bootstrap Contact Form

Questions / Comments: