 |
| Contact form using html and css |
In this article, we given a Basic contact form using html and css with source code to add on website or project. Try this project in your vs code to check how it works. We created a simple and basic contact form using html and css. Let's go and check the source code.
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Contact-form.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Then run the code or check the preview with code preview extension in vs code.
Basic contact form using html and css source code
Here we given a html and css source code of contact form as given -
HTML
In HTML, we created a contact form with form tag for structure. Added a input field to add inputs in the form. Also, added a submit button to submit the form after filling the information in contact form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="" method="post" >
First Name: <input type="text" name="first_name"><br>
Last Name: <input type="text" name="last_name"><br>
Email: <input type="text" name="email"><br>
Message:<br><textarea rows="5" name="message" cols="30"></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>CSS
In CSS, we given a position and proper design to the form. we used advanced css properties to make it reponsive.
body{
font-family: 'Inter', Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
form {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
form input[type="text"],
form textarea {
width: 100%;
padding: 10px;
margin:10px 0 15px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 15px;
}
form textarea {
resize: vertical;
}
form input[type="submit"] {
background-color: #2b00fe;
color: white;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
}
form input[type="submit"]:hover {
background-color: #1c00a6;
}
@media screen and (max-width:480px){
form{
width:fit-content;
height: fit-content;
}
}Output
Check this output image of Basic contact form -
Hope this tutorial will help you to use Basic contact form using html and css with source code.if you have any confusion or query then you can contact us on our coding community.
Checkout more projects on our website and join our coding community on telegram to get more knowledge about coding.
Tags:
projects