How To Create a Simple Contact Form with HTML and CSS

byCodingFlicks -September 10, 2020

0

A contact form on a website is a simple feature through which a visitor or user can send a message or query directly to the owner of the website. Suppose, you are browsing a website and you have a question or feedback for which you do not want to make a direct phone call or draft a formal email. In such a situation, a contact form on the website comes in very handy. It makes it super easy for the user to connect with the owner of the website. Today we will share with you a snippet of a basic contact form design using HTML and CSS. The video tutorial below shows the process of creating this HTML CSS contact form.

Video Tutorial:

A contact form is an integral part of a website as it creates a bridge between the viewer or visitor and the company. A well-designed contact form relies on professionalism, convenience, and accessibility. This important element of the website ensures that you don’t miss out on potential customers, feedback, or collaborations. In today’s fast-paced digital world, building trust should be a priority for any business, and a contact form does just that.

E-commerce websites, service providers such as consultants or designers, and even bloggers use contact forms to handle customer inquiries and appointments or to start discussions about projects, ask questions, request collaborations, or provide feedback. In addition, non-profit organizations, real estate websites, and small businesses also use this feature to connect with their customers or users.

You may also like:

Simple Contact Form Design [ Source Code ]:

To create this snippet, you need to create an HTML file and a CSS file. After creating the files, copy the code below and paste it into your project. Save your codes and run the project in your browser. If you see any issues, you can download the source code from the download button below this blog post. After getting the source code, make the necessary changes as per your requirement.

HTML:

CSS:

  
  body {
	background: #2290ff; 
	font-family: lato;
}
.contact-area {
	margin: 130px 400px;
	background: #fff;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
}
.contact-title {
	text-align: center;
	margin-bottom: 30px;
}
.contact-title h1 {
	color: #262626;
	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: #2290ff;
}
.form-email::before {
	content: "\f1d8";
	color: #2290ff;
}
.form-message::before {
	content: "\f0e0";
	color: #2290ff;
}
.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 #262626;
	-webkit-transition: 0.2s;
	transition: 0.2s;
	outline: none;
	margin-top: 16px;
	background-color: transparent;
	position: relative;
	padding: 10px 16px 10px 30px;
	color: #262626;
	font-family: lato;
}
.form input:focus, .form textarea:focus, .form input:hover, .form textarea:hover {
	border-color: #000;
}
.form textarea {
	display: block;
	width: 100%;
	border: none;
	border-bottom: 1px solid #262626;
	-webkit-transition: 0.2s;
	transition: 0.2s;
	outline: none;
	margin-top: 16px;
	height: 150px;
	background-color: transparent;
	padding: 10px 16px 10px 30px;
	color: #262626;
	font-family: lato;
}
.center-align button {
	border: 1px solid #2290ff;
	-webkit-transition: 0.2s;
	transition: 0.2s;
	padding: 10px 45px;
	outline: none;
	margin-top: 30px;
	cursor: pointer;
	background-color: #2290ff;
	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;
}

Contact forms are not just a box with fields, they tell visitors, “We are here for you.” This little feature of a website is essential for building relationships between customers and website owners online. We hope you have collected the source code. To get more source code of this type, you can go to our homepage and scroll down by clicking on the “Load More” button. Thank you for visiting our website.

DOWNLOAD CODE

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.