"Appointment Form Design"
Bootstrap 4.1.1 Snippet by Nabed

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, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <title>Form Design</title> </head> <body> <!-- Form Design Start--> <section class="form pt-5 pb-5"> <div class="container"> <div class="row"> <div class="offset-md-2 col-md-8"> <div class="heading"> <h1>Appointment</h1> </div> <div class="row"> <div class="col-md-6"> <input type="text" placeholder="First Name"> </div> <div class="col-md-6"> <input type="text" placeholder="Last Name"> </div> </div> <div class="row"> <div class="col-md-6"> <input type="phone" placeholder="Phone Number"> </div> <div class="col-md-6"> <input type="date" placeholder="Date of Birth"> </div> <div class="col-md-12"> <textarea name="message" id="" cols="30" rows="10"></textarea> </div> <div class="col-md-6"> <input type="button" value="Make Appointment"> </div> </div> </div> </div> </div> </section> <!-- Form Design End--> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html>
.form{ background-color: #3CD8C1; position: relative; } .heading{} input[type="text"] { border: none; width: 100%; padding: 10px; margin-bottom: 10px; outline: none; } input[type="phone"]{ border: none; width: 100%; padding: 10px; margin-bottom: 10px; outline: none; } input[type="date"]{ border: none; width: 100%; padding: 10px; margin-bottom: 10px; } input[type="date"]:focus { outline: none; } textarea { border: none; width: 100%; padding: 10px; margin-bottom: 10px; outline: none; } input[type="button"] { border: none; color: #3cd8c1; padding: 10px 40px; background-color: #fff; font-weight: 600; } input[type="button"]:focus { outline: none; } h1 { color: #fff; font-family: sans-serif; text-transform: uppercase; position: absolute; top: 200px; left: -175px; transform: rotate(270deg); opacity: 0.6; } .text { background-color: #fff; padding: 30px 30px; width: 100%; } h2 { font-size: 22px; line-height: 33px; } li.list-group-item { background-color: transparent; border: none; padding: 6px; } ul.list-group { margin-top: 25px; }

Related: See More

Paper Kit 2 Angular
Bootstrap Dual Design Registration Form
Bootstrap 4 Footer Design
Team Design Section with Pure CSS Effect

Questions / Comments: