Contact Us page Template

Get a friendly and straightforward Contact us page template here with HTML, CSS Code for your website. You can apply the page for your website and give an outstanding look to your website.
Contact pages are the best way to collect inquiries and receive questions from your website visitors or stay in touch with anyone that has something to tell you and one of the most visited and, therefore, one of the most important pages on any business website. I would especially suggest having at least 5 lists with different functions so that other developers will not need too many details about each line but just focus on reading only what is needed. You can also change your form design and adjust general form settings easily. the template is completely FREE. In simple words, the definition of a contact us page is a designed specifically for visitors to find ways to Get in touch with the business. You can do this with displayed data, like phone number and email address, and/or through the form. get your template below.

Features of The Contact us page template:

Latest Bootstrap version
One pager design
Created to be easy for your visitors and a nice way of sharing content amongst friends!
Slick modern design
Cross Browser compatible
Full responsive Contact Us page Template

*key Suggestion:
If you are interested then check our other templates which belong to Same Category.
# Business Website Template
# Cafe & Restaurant Website Template

HTML

<form> <!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="css/custom.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins&family=Roboto:ital,wght@0,500;1,400;1,500&display=swap" rel="stylesheet"> <title>spectricssolutions</title> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-light bg-light" style="padding: 25px;"> <div class="container-fluid"> <a class="navbar-brand" href="#"><img src="img/logo.png" alt="" class="img-fluid logo-img"></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Themes</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Templates</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <button class="btn"><a class="nav-btn" href="#">Login</a></button> </li> </ul> </div> </div> </nav> </header> <section> <div class="tittle-img mt-5"> <div class="container"> <img src="img/img2.jpeg" alt="" class="img-fluid"> <p class="para_tittle text-center mt-5"> <span class=""> Login Page</span></p> <p class="para_discribtion"> For additional login methods, see: Single Sign-On Multi-Factor Login Usage scenarios related to the login page include: A user navigates to an application and is presented with a login page as a way to gain access to the application. There are two possible results: Authentication is successful and the user is directed to the application landing page. Authentication fails and the user remains on the login page. If authentication fails, the screen should show an informational or error message about the failure. A user is automatically logged out due to inactivity. In this event, they will be returned to the login page, which will display an informational message explaining what happened. Once the user logs in again, they should be taken back to the page they were previously on before being timed out A user has forgotten their username and/or password. </p> </div> </div> </section> <div class="code"> <div class="container"> <div class="row gx-2"> <div class="col-md-4"> <div class="html"> <h2>HTML</h2> <p> <textarea onclick="select()" readonly> <form> <div id="info-wrapper"> <span class="brand">B</span> <div class="notification"> <h2>Special announcement</h2> <p>It's time to party! Phasellus semper augue quis metus imperdiet porttitor. Suspendisse suscipit cursus fermentum. Praesent vel erat vitae quam dapibus molestie. In malesuada finibus felis, vel faucibus ex pellentesque ac. Vivamus nec tellus ac ante vulputate luctus.</p> </div> </div> <div id="form-wrapper"> <div> <h1>Welcome Back</h1> <p>Enter your credentials to continue.</p> </div> <div> <div class="input-wrapper"> <input type="text" placeholder="Enter your username" /> <i class="bx bxs-user-circle"></i> </div> <div class="input-wrapper"> <input type="password" placeholder="Enter your password" /> <i class="bx bx-key"></i> </div> <button type="submit"> Sign In <i class='bx bx-right-arrow-alt'></i> </button> </div> <p class="mb-0"> <a class="default" href="#">Send password recovery link to your email.</a> </p> </div> </form> </p> </p>

CSS

$blue-start: rgba(96,128,255,1); $blue-stop: rgba(33,65,189,1); $orange-start: #FEB692; $orange-stop: #EA5455; $purple-start: #97ABFF; $purple-stop: #123597; $crystal-start: #81FFEF; $crystal-stop: #F067B4; $peach-start: #F6D242; $peach-stop: #FF52E5; * { box-sizing: border-box; } body { background-color: #f2f5ff; color: #31507d; display: flex; flex-direction: column; font-family: 'Poppins', sans-serif; height: 100vh; align-items: center; justify-content: center; } ul.theme-picker { list-style-type: none; background-color: #fff; border-radius: 50px; display: flex; padding: 7px 10px; box-shadow: rgba(74, 79, 97, 0.25) 0px 13px 27px -5px, rgba(74, 79, 97, 0.3) 0px 8px 16px -8px; margin-bottom: 50px; li { border-radius: 50px; background: #000; display: inline-block; margin-right: 7px; width: 50px; height: 50px; cursor: pointer; &:last-child { margin-right: 0; } &.blue { background: linear-gradient(225deg, $blue-start 16%, $blue-stop 100%); } &.orange { background: linear-gradient(225deg, $orange-start 16%, $orange-stop 100%); } &.purple { background: linear-gradient(225deg, $purple-start 16%, $purple-stop 100%); } &.crystal { background: linear-gradient(225deg, $crystal-start 16%, $crystal-stop 100%); } &.peach { background: linear-gradient(225deg, $peach-start 16%, $peach-stop 100%); } } } form { background-color: #fff; border-radius: 8px; display: flex; box-shadow: rgba(74, 79, 97, 0.25) 0px 13px 27px -5px, rgba(74, 79, 97, 0.3) 0px 8px 16px -8px; height: 550px; overflow: hidden; #info-wrapper, #form-wrapper { padding: 40px 35px 40px 35px; } #info-wrapper { background-color: #4c70ff; background: linear-gradient(225deg, $blue-start 16%, $blue-stop 100%); color: #fff; width: 450px; padding-left: 50px; p { color: #fff; font-size: 18px; } } #form-wrapper { display: flex; justify-content: space-between; align-items: center; flex-direction: column; text-align: center; width: 575px; } i { color: #fff; font-size: 30px; transition: color 250ms ease-in; } .input-wrapper { margin-bottom: 30px; position: relative; width: 480px; i { color: #a4a9b6; position: absolute; opacity: 0.85; right: 13px; top: 50%; transform: translateY(-50%); } } h1 { font-weight: 600; letter-spacing: 0px; margin: 25px 0 0 0; } h2 { font-weight: 500; } p { color: #a4a9b6; font-size: 18px; margin: 2px 0 44px 0; } a.default { color: #a4a9b6; text-decoration: none; transition: color 300ms ease-in-out; &:hover { color: #4c70ff; } } input[type=text], input[type=password] { border: 1px solid #d8ddf0; border-radius: 6px; font-size: 15px; padding: 13px 9px 13px 9px; transition: border-color 250ms ease-in-out; &:focus { border-color: #4c70ff; outline: none; } &:focus + i { color: #4c70ff; } } input { width: 100% } ::placeholder { color: #a4a9b6; font-size: 15px; opacity: 1; } button[type=submit] { background: #4c70ff; border: none; border-radius: 6px; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; padding: 18px 10px; width: 480px; i { margin-left: 5px; } } .brand { background: #fff; border-radius: 10px; color: #31507d; display: flex; font-size: 28px; font-weight: 600; margin-bottom: 50px; justify-content: center; align-items: center; height: 50px; opacity: 0.9; width: 50px; } } .mb-0 { margin-bottom: 0; }

Contact Us page Template

Features of The Contact us page template:

HTML

CSS

JS