How To Create a Simple Contact Form with HTML and CSS

byCodingFlicks -September 10, 2020

0

Hello Friends, Today, I will share a snippet based on how To create a simple contact form with HTML and CSS. Earlier I have shared a snippet on a simple parallax scrolling effect using CSS. Today I have used plain HTML, CSS, and font-awesome icons to create this project. I have linked the font-awesome CDN link below for your convenience. Add that to your HTML file before pasting the code below.

Contact form design is an essential part of web design because it allows the website owner to collect some information about their visitors, and it helps to communicate with them. Its also increase the trust level among the visitor about the website they are visiting.

You may also like:

To create this snippet, you have to make an HTML file and a CSS file. After making those files copy the code below and paste them to your project. Save the files and run the project to your browser. See how it works and made the changes according to your need.

HTML

CSS:

body {
background: #D54C76;
font-family: lato;
}
.contact-area {
margin: 130px 400px;
background: linear-gradient(180deg,#0D1544,#272F5D);
box-shadow: 0 15px 35px rgba(0,0,0,0.8);
}
.contact-title {
text-align: center;
margin-bottom: 30px;
}
.contact-title h1 {
color: #fff;
margin-bottom: 8px;
padding-top: 30px;
text-transform: uppercase;
}
.form-container {
background: transparent;
max-width: 550px;
margin: auto;
}
.form {
padding-bottom: 16px;
display: block;
width: 100%;
}
.form-name, .form-email, .form-message {
position: relative;
}
.form-name::before {
content: "\f007";
color: #D54C76;
    
}
.form-email::before {
content: "\f1d8";
color: #D54C76;
}
.form-message::before {
content: "\f0e0";
color: #D54C76;
}
.form-name::before, .form-email::before, .form-message::before {
font-family: 'fontAwesome';
position: absolute;
top: 10px;
left: 0;
}
.form input {
display: block;
width: 100%;
border: none;
border-bottom: 1px solid #ddd;
-webkit-transition: 0.2s;
transition: 0.2s;
outline: none;
margin-top: 16px;
background-color: transparent;
position: relative;
padding: 10px 16px 10px 30px;
color: #fff;
    font-family: lato;
}
.form input:focus, .form textarea:focus, .form input:hover, .form textarea:hover {
border-color: #666;
}
.form textarea {
display: block;
width: 100%;
border: none;
border-bottom: 1px solid #ddd;
-webkit-transition: 0.2s;
transition: 0.2s;
outline: none;
margin-top: 16px;
height: 150px;
background-color: transparent;
padding: 10px 16px 10px 30px;
color: #fff;
    font-family: lato;
}
.center-align button {
border: 1px solid #D54C76;
-webkit-transition: 0.2s;
transition: 0.2s;
padding: 10px 45px;
outline: none;
margin-top: 30px;
cursor: pointer;
background-color: #D54C76;
text-transform: uppercase;
font-size: 16px;
color: #fff;
display: inline-block;
text-decoration: none;
border-radius: 50px;
margin-bottom: 15px;
}
.center-align {
text-align: center;
}

I hope you find it useful. Thanks for visiting the blog. Please follow us on our Facebook, Twitter, and Instagram pages to keep updated.

Please do not enter any spam link in the comment box.

Post a Comment

Please do not enter any spam link in the comment box.