"Simple Attractive contact us form "
Bootstrap 4.1.1 Snippet by nitish754

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> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form Design</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body{ margin: 0px; padding: 0px; background-color:antiquewhite; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; /* overflow: hidden; */ } .container{ padding: 100px; } .section1{ background-color: cyan; padding: 20px; /* border: 2px solid #333333; */ display: block; position: relative; border-radius: 25px; box-sizing: border-box; /* box-shadow: 0 0 20px #333333; */ } .form{ background-color: #ffffff; padding: 30px; border-radius: 20px;; } .form h3{ text-transform: capitalize; text-align: center; } .form-header{ margin-bottom: 20px; } .btn { background-color: transparent; border: 2px solid green; border-style: dashed; color: green; } .btn i{ background-color: green; color: #ffffff; padding: 5px; border-radius: 50%; } .form-control { border: none; /* border-spacing: 100px; */ border-bottom: 1px solid green; } .form-control:focus{ border-bottom: 1px solid aqua; outline: none; box-shadow: none; } .form-control:focus ~ label{ display: none; } img{ filter:hue-rotate(); transform: rotate(360deg); padding: 0px; margin: 0px; /* margin-right: -200px; */ right: 0px; } @media screen and (max-width: 1050px) { .container{ width: 100%; padding: 10px; } .image-section{ display: none; } /* .form{ padding: 10px; } .section1{ padding: 5px; } */ } </style> </head> <body> <div class="container"> <div class="col-md-4 image-section" style="padding: 0px;"> <img src="img/1.png" class="img-responsive" alt=""> </div> <div class="col-md-6 section1"> <div class="form"> <div class="form-header"> <h3>a good form title</h3> </div> <div class="form-body"> <form action=""> <div class="form-group"> <label for="subject">Subject</label> <input type="text" class="form-control" > </div> <div class="form-group"> <label for="comment">Write Your Commennt</label> <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea> </div> <div class="form-group text-center"> <!-- <label for="btn"></label> --> <button type="submit" class="btn btn-success"> <i class="fa fa-plus"></i> Add New Question</button> </div> </form> </div> </div> </div> </div> </body> </html>

Related: See More

Material Dashboard Angular
Contact Form
Bootstrap Contact Form
Bootstrap Contact Form

Questions / Comments: