Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Design a Contact us Page using HTML and CSS
It really doesn't make sense to have a contact form on a website without one, much like a burger without a bun. If your business is online, you must have a method for clients to get in touch with you. A "Contact Us" form is an online form that website users can use to submit messages or requests to the website's owners or operators. It provides customers with an easy way to get in touch with the company, organization, or person operating the website without requiring them to use means of contact like phone calls or emails.
The data is often forwarded to the recipient's specified email address or kept in a database for further use when the user completes and submits the form. With this approach, businesses and organizations may handle consumer queries, comments, support requests, and other forms of contact in a more efficient and well-organized manner.
Since "Contact Us" forms don't involve using an email client, provide an organized method of communicating with users, and are available day or night, they are frequently favored by consumers. Moreover, they let companies collect insightful client information and comments for review and development. Let’s dive into the article to learn how to create contact us page using HTML and CSS.
Example
Let’s look at the following example, where we are going to design a contact us form on the webpage. Let’s do it one by one.
HTML
Following is the HTML code that is used to design the structure of the form.
<!DOCTYPE html>
<html>
<body>
<div>
<form class="tutorial">
<div class="pageTitle title">Contact Us</div>
<div class="secondaryTitle title">We'd love to hear from you.!</div>
<input type="text" class="y formEntry" placeholder="Enter Your Name.!" />
<input type="text" class="a formEntry" placeholder="Enter Your Email.!" />
<textarea class="b formEntry" placeholder="Enter Your Message.!"></textarea>
<input type="checkbox" class="x" value="Term">
<label style="color: #2C3E50 " for="terms">Accepting <span>
<b>Terms</b>
</span> & <span style="color: #2C3E50 ">
<b>Privacy Policy</b>
</span>. </label>
<br>
<button class="c formEntry" onclick="thanks()">Submit</button>
</form>
</div>
</body>
</html>
CSS
Now we are going to create the template for the above code where we created the structure of the form.
<style>
body {
background-color: #E8DAEF;
}
.tutorial {
background: #D5F5E3;
box-shadow: 0 10px 10px 0 #DE3163;
max-width: 460px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
position: absolute;
animation: bounce 1s infinite;
}
.title {
font-family: verdana;
margin: 11px auto 6px;
width: 325px;
font-weight: bold;
}
.x {
margin: 0 auto 6px 82px;
}
.pageTitle {
font-size: 2em;
}
.secondaryTitle {
color: grey;
}
.y {
background-color: #E5E8E8;
color: #DE3163;
}
.y:hover {
border-bottom: 5px solid #6495ED;
height: 30px;
width: 300px;
transition: ease 1s;
}
.a {
background-color: #E5E8E8;
height: 2em;
}
.a:hover {
border-bottom: 5px solid #6495ED;
height: 30px;
width: 300px;
transition: ease 1s;
}
.b {
background-color: #E5E8E8;
height: 2rem;
}
.b:hover {
border-bottom: 5px solid #6495ED;
height: 10em;
width: 300px;
transition: ease 1s;
}
.formEntry {
display: block;
margin: 31px auto;
min-width: 250px;
padding: 15px;
border: none;
transition: all 1s ease 0s;
}
.c {
width: 100px;
color: #DE3163;
background-color: #D6EAF8;
font-size: 25px;
}
.c:hover {
box-shadow: 16px 16px 16px 6px #ABB2B9;
border-top: 5px solid #D2B4DE;
}
@keyframes bounce {
0% {
tranform: translate(0, 3px);
}
50% {
transform: translate(0, 6px);
}
}
</style>
Complete code
Here is the finite code obtained by combining both HTML and CSS, which results in the creation of the contact us form on the webpage.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #E8DAEF;
}
.tutorial {
background: #D5F5E3;
box-shadow: 0 10px 10px 0 #DE3163;
max-width: 460px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
position: absolute;
animation: bounce 1s infinite;
}
.title {
font-family: verdana;
margin: 11px auto 6px;
width: 325px;
font-weight: bold;
}
.x {
margin: 0 auto 6px 82px;
}
.pageTitle {
font-size: 2em;
}
.secondaryTitle {
color: grey;
}
.y {
background-color: #E5E8E8;
color: #DE3163;
}
.y:hover {
border-bottom: 5px solid #6495ED;
height: 30px;
width: 300px;
transition: ease 1s;
}
.a {
background-color: #E5E8E8;
height: 2em;
}
.a:hover {
border-bottom: 5px solid #6495ED;
height: 30px;
width: 300px;
transition: ease 1s;
}
.b {
background-color: #E5E8E8;
height: 2rem;
}
.b:hover {
border-bottom: 5px solid #6495ED;
height: 10em;
width: 300px;
transition: ease 1s;
}
.formEntry {
display: block;
margin: 31px auto;
min-width: 250px;
padding: 15px;
border: none;
transition: all 1s ease 0s;
}
.c {
width: 100px;
color: #DE3163;
background-color: #D6EAF8;
font-size: 25px;
}
.c:hover {
box-shadow: 16px 16px 16px 6px #ABB2B9;
border-top: 5px solid #D2B4DE;
}
@keyframes bounce {
0% {
tranform: translate(0, 3px);
}
50% {
transform: translate(0, 6px);
}
}
</style>
</head>
<body>
<div>
<form class="tutorial">
<div class="pageTitle title">Contact Us</div>
<div class="secondaryTitle title">We'd love to hear from you.!</div>
<input type="text" class="y formEntry" placeholder="Enter Your Name.!" />
<input type="text" class="a formEntry" placeholder="Enter Your Email.!" />
<textarea class="b formEntry" placeholder="Enter Your Message.!"></textarea>
<input type="checkbox" class="x" value="Term">
<label style="color: #2C3E50 " for="terms">Accepting <span>
<b>Terms</b>
</span> & <span style="color: #2C3E50 ">
<b>Privacy Policy</b>
</span>. </label>
<br>
<button class="c formEntry" onclick="thanks()">Submit</button>
</form>
</div>
</body>
</html>
When we run the above code, it will generate an output consisting of the contact us form displayed on the webpage, applied with CSS.
38 Views
