Today we are going to create a contact form using Html and Css but first, let me introduce what exactly a contact form is.
A Contact Form is a short web-based form published on a website. Any visitor can fill out the form and submit it to send a message to the site owner.
Publishing a contact form makes it easy for new customers to get in touch.
HTML Code For Contact Form
Document
Contact Us
This is the basic structure of our Contact form but this is not looking good as you see, so let’s style it using css.
CSS Code For Contact Form
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "gilroy";
}
html,
body {
height: 100%;
width: 100%;
background-image: url("https://images.unsplash.com/photo-1619190223471-53ac698b13c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTY0fHxibHVlJTIwYWVzdGhldGljfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60");
background-position: center;
background-size: cover;
}
#main {
height: 500px;
width: 500px;
background-color: rgba(100, 148, 237, 0.103);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 2%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.815);
}
h2 {
color: white;
text-shadow: 0px 2px 4px black;
font-weight: bold;
letter-spacing: 4px;
}
#msg {
width: 250px;
margin-left: 5%;
margin-top: 3%;
background: transparent;
}
#submit {
padding: 8px 15px;
background-color: #0a64ce;
color: white;
margin: 3% 25%;
}
select option,selected{
color: black;
font-size: 30px;
}
input,
select {
Padding: 20px;
margin-top: 3%;
margin-left: 5%;
height: 35px;
background: transparent;
color: #ffff;
}
input#mobno {
margin-left: 2%;
}
::placeholder {
color: #ffff;
font-size: 20px;
}
written by @cannycoder_7
Thanks For Reading!
