Hey, developer today is Day 71 of our 90Projects in 90Days. And today, we are going to Create a Responsive Survey form using HTML and CSS
To run the given code firstly you have to copy the HTML code and run it into your code editor and then create a CSS file and paste the given CSS code in your code's CSS file.
Preview
Image Resources: Download Now
HTML Code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Survey Form </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2> Geeks Help Survey Form </h2>
<div class="form-wrapper">
<form action="">
<div class="form-group">
<label for="name"> Name: </label>
<input type="text" name="name" id="name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email"> Email: </label>
<input type="text" name="email" id="email" placeholder="Enter your email">
</div>
<div class="form-group gender">
Gender:
<div class="genderDiv">
<input type="radio" name="gender" id="male"><label for="gender"> Male </label>
<input type="radio" name="gender" id="female"><label for="gender"> Female </label>
</div>
</div>
<div class="form-group">
<label for="hear" id="hear"> Where from you know about Geeks Help? </label>
<select>
<option class="transparent" value="Instagram"> Instagram </option>
<option class="transparent" value="Facebook"> Facebook </option>
<option class="transparent" value="friends"> Friends </option>
<option class="transparent" value="googleSearch"> Google Search </option>
<option class="transparent" value="Randomly"> Randomly </option>
<option class="transparent" value="other"> other </option>
</select>
</div>
<div class="form-group flex">
<label for=""> Will you recommend Geeks Help to your friends ? </label>
<div class="recommendation">
<input type="radio" name="recommend" id="yes"><label for="yes"> Yes </label>
<input type="radio" name="recommend" id="no"><label for="no"> No </label>
</div>
</div>
<div class="form-group">
<label for="lang"> Favorite Language </label>
<div class="box">
<input type="checkbox" name="js" id="html"> <label for="html"> HTML </label>
<input type="checkbox" name="js" id="css"> <label for="css"> CSS </label>
<input type="checkbox" name="js" id="javascript"> <label for="javascript"> JavaScript </label>
<input type="checkbox" name="js" id="python"> <label for="python"> Python </label>
<input type="checkbox" name="js" id="java"> <label for="java"> Java </label>
<input type="checkbox" name="js" id="c/c++"> <label for="c/c++"> C/C++ </label>
<input type="checkbox" name="js" id="nodejs"> <label for="nodejs">NodeJS</label>
</div>
</div>
<div class="form-group flex">
<label for="suggestions"> How we can improve ourself? </label>
<textarea name="suggestions" id="suggestions" cols="30" rows="10"></textarea>
</div>
<button type="submit"> Submit </button>
</form>
</div>
</div>
</body>
</html>
CSS Code
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container {
text-align: center;
color: #fff;
width: 100%;
padding: 5rem 0;
background-image: url(backgroud.jpg);
background-color: #e65b00;
background-size: cover;
display: grid;
align-content: center;
}
.container h2 {
margin-bottom: 20px;
}
.form-wrapper {
margin: 0 auto;
width: 60%;
overflow: hidden;
background: transparent;
border: 1px solid #ffffff35;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(243, 237, 237, 0.182);
padding: 10px;
}
.form-group {
display: flex;
padding: 5px;
text-align: left;
margin: 4px 0;
}
.form-group label {
font-weight: 400;
}
.form-group input,
option {
font-weight: 200;
}
.form-group input {
background-color: transparent;
border-radius: 5px;
margin-left: 10px;
color: #fff;
width: 400px;
padding: 5px;
border: 1px solid rgba(255, 255, 255, 0.803);
outline: navajowhite;
}
.form-group input[type="radio"] {
width: 15px;
margin-right: 10px;
}
.form-group label[for="name"],
.form-group label[for="email"] {
width: 50px;
margin-right: 10px;
}
.box input {
width: auto;
}
#hear {
margin-right: 10px;
}
.form-group select {
outline: none;
border: 1px solid #fff;
cursor: pointer;
border-radius: 20px;
border-radius: 5px;
cursor: pointer;
padding: 5px;
background-color: transparent;
color: #fff;
}
.form-group select option {
background-color: #e65b00;
color: #000;
}
.flex {
display: flex;
flex-direction: column;
}
textarea {
width: 90%;
resize: none;
background: transparent;
border-radius: 6px;
color: #fff;
padding: 10px;
}
button {
width: 60%;
padding: 6px;
border-radius: 7px;
border: none;
outline: none;
background-color: transparent;
border: 1px solid #fff;
transition: all 0.2s;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #e65b00;
border-color: #e65b00;
}
@media screen and (max-width: 839px) {
.container {
padding: 1rem;
}
.form-wrapper {
width: 100%;
}
.form-group input[type="text"],
.form-group input[type="email"] {
width: 80%;
}
.form-group {
flex-direction: column;
}
.form-group select {
width: 40%;
border-radius: 5px;
cursor: pointer;
padding: 5px;
background-color: transparent;
color: #fff;
}
.form-group select option {
width: 40%;
border-radius: 5px;
outline: none;
cursor: pointer;
border: none;
padding: 5px;
background-color: #e65b00;
color: #fff;
border-radius: 5px;
}
.gender {
display: flex;
}
}
Learn HTML- Learn Now
Learn CSS- Learn Now
Visit our 90Days, 90Projects Page- Visit Now
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
