.png)
Create a Contact Us Form in 10 Minutes Using HTML and CSS | Quick Tutorial
Want to add a simple yet effective 'Contact Us' form to your website? Whether you're a seasoned web developer or just starting out, this tutorial is designed to help you create a fully functional and stylish contact form in just 10 minutes using HTML and CSS.
What You’ll Learn:
In this step-by-step guide, you'll discover:
- Basic HTML Structure: How to set up the basic structure of the contact form using HTML.
- Styling with CSS: Techniques to style your form, making it visually appealing and easy to use.
- Form Functionality: How to ensure that your contact form collects and sends the necessary information from visitors.
Why Create a Contact Us Form?
A 'Contact Us' form is essential for any website, allowing visitors to reach out directly to you. It’s a vital tool for communication, whether you’re running a business, blog, or personal website. Plus, designing and coding your own form is a great way to practice and enhance your web development skills.
Quick and Easy Setup
This tutorial is designed to be quick and straightforward. In just 10 minutes, you’ll have a professional-looking contact form that you can:
- Integrate into Your Website: Add the form to any page on your site.
- Customize and Expand: Use the code as a foundation to build more advanced forms or features.
How to Get Started:
- Set Up the HTML: Follow the tutorial to create the structure of the form.
- Apply CSS Styling: Learn how to style your form for a polished, professional look.
- Test and Integrate: Ensure the form works correctly and integrate it into your website.
By the end of this tutorial, you’ll have a fully operational 'Contact Us' form ready to go live on your website, or you can use it as a template for future projects.
HTML Code
Login and Signup Form
Login
Signup
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Montserrat:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&family=Ubuntu&display=swap');
*{
font-family: 'Poppins', sans-serif;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
.container{
height: 100vh;
width:100%;
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
column-gap: 30px;
}
.form{
position: absolute;
max-width: 430px;
width: 100%;
padding: 30px;
border-radius: 6px;
background: #827d7d;
}
.form.signup{
opacity: 0;
pointer-events: none;
}
.forms.show-signup .form.signup{
opacity: 1;
pointer-events: auto;
}
.forms.show-signup .form.login{
opacity: 1;
pointer-events: none;
}
header{
font-size: 28px;
font-weight: 600;
color: #232836;
text-align: center;
}
form{
margin-top: 30px;
}
.form .field{
border-radius: 6px;
position: relative;
height: 50px;
width: 100%;
margin-top: 20px;
}
.field input,
.field button{
height: 100%;
width: 100%;
border: none;
font-size: 16px;
font-weight: 400;
border-radius: 6px;
}
.field input{
outline: none;
padding: 0 15px;
border: 1px solid #cacaca;
}
.field input:focus{
border-bottom-width:2px;
}
.eye-icon{
position: absolute;
top: 50%;
color: #8b8bb8;
right: 10px;
transform: translateY(-50%);
font-size: 18px;
cursor: pointer;
padding: 5px;
}
.field button{
color: #b1a9a9;
background: white;
transition: all 0.3s ease;
cursor: pointer;
}
.field button:hover{
background-color: #016dcb;
}
.form-link{
text-align: center;
margin-top: 10px;
}
.form-link span,
.form-link a{
font-size: 14px;
font-weight: 400;
color: #232836;
}
.form a{
color: #0171d3;
text-decoration: none;
}
.form-content a:hover{
text-decoration: underline;
}
.line{
position: relative;
height: 1px;
width:100%;
background-color:#323030;
}
.line::before{
content: 'Or';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #FFF;
color: #232836;
padding: 0 15px;
}
.media-options a{
display: flex;
align-items: center;
justify-content: center;
}
a.facebook{
background-color: #4267b2;
color: #ffff;
}
a.facebook .facebook-icon{
height: 28px;
width: 28px;
color: #0171d3;
font-size: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
}
.facebook-icon,
img.google-img{
position: absolute;
top:50%;
left: 15px;
transform: translateY(-50%);
}
img.google-img{
height: 20px;
width: 20px;
object-fit: cover;
}
a.google{
border: 1px solid #cacaca;
}
a.google span{
font-weight: 500;
opacity:0.6;
color: #232836;
}
@media screen and (max-width: 400px) {
.form{
padding: 15px 10px;
}
}JavaScript Code
const forms=document.querySelector(".forms"),
pwShowHide = document.querySelectorAll(".eye-icon"),
links = document.querySelectorAll(".link");
pwShowHide.forEach(eyeIcon => {
eyeIcon.addEventListener("click", () => {
let pwFields = eyeIcon.parentElement.parentElement.querySelectorAll(".password");
pwFields.forEach(password => {
if(password.type === "password"){
password.type = "text";
eyeIcon.classList.replace("bx-hide", "bx-show");
return;
}
password.type = "password";
eyeIcon.classList.replace("bx-show", "bx-hide");
})
})
})
links.forEach(link => {
link.addEventListener("click", e => {
e.preventDefault(); //preventing form submit
forms.classList.toggle("show-signup");
})
})PHP Code
Ready to Build?
Let’s get started and create a contact form that will enhance your website's communication with visitors. Follow the steps in this guide, and you’ll be done in no time!