Elegant Contact Form

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Bootstrap Elegant Contact Form</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Patua+One"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <style> body { color: #333; background: #fafafa; font-family: "Patua One", sans-serif; } .contact-form { padding: 50px; margin: 30px 0; } .contact-form h1 { color: #19bc9d; font-weight: bold; margin: 0 0 15px; } .contact-form .form-control, .contact-form .btn { min-height: 38px; border-radius: 2px; } .contact-form .form-control:focus { border-color: #19bc9d; } .contact-form .btn-primary, .contact-form .btn-primary:active { color: #fff; min-width: 150px; font-size: 16px; background: #19bc9d !important; border: none; } .contact-form .btn-primary:hover { background: #15a487 !important; } .contact-form .btn i { margin-right: 5px; } .contact-form label { opacity: 0.7; } .contact-form textarea { resize: vertical; } .hint-text { font-size: 15px; padding-bottom: 20px; opacity: 0.6; } </style> </head> <body> <div class="container-lg"> <div class="row"> <div class="col-md-10 mx-auto"> <div class="contact-form"> <h1>Contact Us</h1> <p class="hint-text">We'd love to hear from you, please drop us a line if you've any query or question.</p> <form action="/examples/actions/confirmation.php" method="post"> <div class="row"> <div class="col-sm-4"> <div class="form-group"> <label for="inputName">Name</label> <input type="text" class="form-control" id="inputName" required> </div> </div> <div class="col-sm-4"> <div class="form-group"> <label for="inputEmail">Email</label> <input type="email" class="form-control" id="inputEmail" required> </div> </div> <div class="col-sm-4"> <div class="form-group"> <label for="inputPhone">Phone</label> <input type="text" class="form-control" id="inputPhone" required> </div> </div> </div> <div class="form-group"> <label for="inputSubject">Subject</label> <input type="text" class="form-control" id="inputSubject" required> </div> <div class="form-group"> <label for="inputMessage">Message</label> <textarea class="form-control" id="inputMessage" rows="5" required></textarea> </div> <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Send</button> </form> </div> </div> </div> </div> </body> </html>

This is an example of a stylish contact us form, designed using CSS, HTML, and Bootstrap framework 4. The font and Bootstrap styles are imported to the code with their URLs. The form consists of input text fields and the 'Send' button. The body of the form is given the styles of font color as #333, background color as #fafafa, and font-family as "Patua One", sans-serif. The title of the form is displayed using a font color of #19bc9d, and the font-weight as bold. The text fields are given a border color of #19bc9d, which gets changed to #19bc9d, in a focus event. The 'Send' button is created as a primary type button and displayed with a style set of font color as #fff, min-width as 150px, font-size as 16px, and background color as #19bc9d. The buttons turn its background color to #15a487, on hover. The subtitle of the form is displayed with a font size of 15px. The input text fields have been validated by making them required. Source: https://www.tutorialrepublic.com/snippets/preview.php?topic=bootstrap&file=elegant-contact-form

Elegant Contact Form

Post Comment or Questions Cancel reply